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.
You recommend adding this to the blog index section of the main stylesheet. Where is that? I don’t see a blog index section or a main_style.css folder.
Perfect, this worked like a charm with no errors at all, thank you, it now passes SEO checks too.
Hi, I’ve succeded in changing blog titles from h2 to h1 however regardless of where I put code (main css editor) to change the style of a realy small font size of h1 it doesn’t work. If I go to theme – change fonts to change it there I see that Blog post title no longer highlights Blog titles . Any suggestions?
By doing this, this creates another issue in webmaster tools. Once I did this, now I have duplicate titles and multiple h1 tags on all blog posts and categories. I am at my wits end with Weebly. My site keeps dropping in the search engines all because of the blog that is supposed to help with SEO. Weebly has some serious issues with their blogs!
Thank you so much for this how-to article! I followed the instructions and it worked perfectly on my blog. I did the same thing for my headline on the landing page of my website by going to “landing.html” under Header Type in CSS and changing {headline:text global=”false”} to {headline:text global=”false”}. Now if only I can edit the font to match the main style of the h2’s throughout my site, which read:
h2 {
font-size: 2.3em;
margin: 0;
padding: .3em 0;
line-height: 1.2;
font-family: “Neucha”, Arial, Helvetica, sans-serif;
font-weight: normal;
-webkit-text-stroke-width: 0.1px;
}
#content h2 {
Do you have any instructions on this?
Thanks again,
Nicole
http://www.organizedbynicole.com
The article on how to add H1 to H6 tags on Weebly pages is already linked on the first paragraph – https://www.webnots.com/how-to-add-h1-to-h6-heading-tags-in-weebly/