How to Add H1 to H6 Heading Tags in Weebly?
Weebly H1 Tag Issue
Besides free or Pro account, all Weebly users have the SEO problem of missing H1 tags in Weebly sites. By default the Title (or Title+Paragraph in older version) element provided by Weebly will create a H2 tag and there is no provision for creating a H1 tag for the title of your page content. H1 or H2 is not an issue for the users but search engines consider H1 tag as a primary title of your content and further headings as a sub-header elements how it may appear in a typical newspaper article.
Ideally the first line in a webpage should be heading which informs search engines regarding the remaining content on that page. Hence missing H1 tags will be considered as high priority issue from SEO perspective.
Where Can I See the SEO Issue?
Any SEO tools will show the missing H1 tags, here we show an example from Bing Webmaster Tools. This can be checked from the "SEO Reports" option available under "Reports & Data" section. H1 tag missing in a Weebly site is shown as a high severity issue in Bing Webmaster Tools.
SEO Reports in Bing Webmaster Tools
How to Resolve the H1 Tag Issue
Whether you can see the H1 tag issue in webmaster tools account or not, it is a recommended practice to have a H1 tag for the article's title. This helps both search engines as well as improves user's readability. But there is no default way in Weebly to add H1 tag to your webpage and you need to use embed code (Custom HTML) element to add a H1 tag. Copy and Paste the following code inside the embed code element to create a H1 tag. You can customize the alignment, color and size of the fonts as you need to match your site's layout.
1 | <h1 style="text-align:left;font-size:28px;"> This is a first Heading for Your Page</h1> |
Why Weebly Does Not Provide Default H1 Tag Option?
- Well, with a single Title element, it is not possible for Weebly to offer different kind of headings from H1 to H6.
- It is not possible to make the single Title element as H1 since it can be used at any place on the page.
- Making tile element as H1 will confuse the search engines as there will be many H1 headings on a single page.
Hence the only way for Weebly is to make it as a sub-heading (H2 tag) which can be used at any place including the start of a page for the real heading (H1 tag).
You can also use H2-H6 tags in the same manner as H1 tag to provide more structured information to your reader.
But ensure to use H1 tags at the start of the page and not after any of the standard Weebly elements.
Below is the sample code for using H3 tag.
1 | <h3 style="text-align:left;font-size: 20px;">Your H3 Title Goes Here</h3> |
Changing Color of Headings
Many users have emailed asking how to change the color of the heading inside embed code. You need to just add the "color" attribute to the inline CSS style in order to change to the required color. For example, below code will produce the H1 heading with red color. Change the color to any color name like blue, red, green, etc. or use hex code values like #333333.
1 | <h1 style="text-align:left;font-size:28px;color:red;font-family:arial;"> This is a first Heading for Your Page</h1> |
The font family also can be changed with "font-family" attribute and in the above case we have used "Arial" as an example.
The color of the default title element can be changed under "Theme > Change Fonts > Paragraph Titles > Color"
33 Comments
Leave your reply.