How to Add H1 to H6 Heading Tags in Weebly?

There are six levels of headings used in documentation to group and prioritize the content. Similarly, HTML has H1 to H6 heading tags that you can use on webpages to create appropriate headings. Generally, a webpage starts with a level 1 heading (H1) indicating the highest priority and then moves on to H2, H3 and so on. It is also good idea to use H2 tags or group of tags like {H2 > H3 > H4} and then {h2 > H3 > H4} in-between to allocate content blocks properly. It is very easy to add headings in content management systems like WordPress which automatically assign H1 tag for the title. However, platforms like Weebly works differently that could harm your search engine ranking. In this article, we will explain the problem with default Weebly H1 tag and cover how to use H1 to H6 heading tags properly 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.

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.

<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 title 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).

Note: You can also use H2-H6 tags in the same manner as H1 tag. This will help to provide more structured information to your reader. However, 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.

<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.

<h1 style="text-align:left;font-size:28px;color:red;font-family:arial;"> This is a first Heading for Your Page</h1>

In the above example case, we have used “Arial” as a font family. However, you can change it to any family as you like to use on your site. Also, remember you can customize the color and other styles of elements using default Weebly settings. You can do this by navigating to “Theme > Change Fonts > Paragraph Titles > Color” section in Weebly editor.