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.

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?

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

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

The font family also can be changed with “font-family” attribute and in the above case we have used “Arial” as an example.