How to Add H1 Title in Weebly Blog?

Although Weebly offers a blogging option, it needs lot of improvements both in terms of look as well as for search engines. One of the SEO related problems with Weebly blog is that missing H1 tags on single post. This problem is applicable for standard Weebly pages also and we had explained how to add H1 tag in Weebly pages in our previous article. In this article we will explain how to add H1 title in Weebly blog to get rid of the high priority SEO issue.

Page Vs Post

Since Weebly uses different structure for pages and blog posts there are additional CSS classes exclusively used to define the blog elements. For example, a standard page has a “Page Title” under “Pages” tab which is not mandatory to be provided. If page title is not provided for a page the URL is considered as a page title. But in case of blogs, post title is a mandatory element which should be provided when publishing a post. If you do not enter the post title, Weebly automatically takes the current system date as post title.

Adding H1 Title for Weebly Blog

By default, the post title entered will be considered as a heading 2 with H2 tag. There are two steps for changing the H2 and adding H1 title for your Weebly blog.

Step 1 – Modifying the Partials

After the recent Carbon update, Weebly added a section called “Partials” in theme code editor. Navigate to the code editor through “Design > Edit HTML / CSS” and look for the section named “Partials”. Expand the “blog” section and click on the file “post.tpl”. You will see the code like below:

<h2 class="blog-title">
{{{title_html}}}
</h2>

Simply change the h2 to h1 as shown in the below picture and save your theme.

Step 2 – Adding Styles for H1 Blog Title

Once the partials is changed the blog title will become H1 automatically, hence this step is only required on case if your blog title looks very small and does not look like H1 title. Add the below CSS in your “main_style.css” or “main.less” file.

h1.blog-title {
font-size: 26px;
margin-bottom:15px;
}

Basically you can add any CSS styles like line height, margin, padding, etc to get the title aligned for your layout. We recommend to add the code in blog index section of the main stylesheet so that it is easy to identify later.

Now your blog title will be with H1 and you can get rid of the issue showing in SEO reports.

Note: This style will only affect the blog title, any other title elements used on the post will be with H2 tags and follow the main style of your theme.