Tutorial Stats
How To change your weebly blog Post titles to h1 tags
Tutorial Description
H1 tags are important for SEO because they tell the search engines what the page consists of. If you use the Weebly blog for the majority of your written content, you're at a slight disadvantage in the SEO department because the titles of Weebly blog posts are currently H2 tags. To fix this, all we need to do is change a "2" to a "1", and create CSS styling for your blog post titles' new H1 tags.
Since we're changing the title of your blog posts to H1 tags, you might be concerned about having multiple H1 tags appearing on your main blog page in order to stay SEO compliant. It's true, in a perfect world, you would only need one H1 tag per page, but in the real world, multiple blog posts can appear on a main blog page because it's a content management system. There's still a lot of misinformation out there about having multiple H1 tags appear on the same page, but rest assured, you don't need to set your posts per page to "1".
To quote JohnMu, a Google Employee, from the Google Webmaster Central Help Forum on December 12, 2016, he said, "We don't treat HTML5 differently & having multiple H1 tags on a page is fine. Be reasonable when using them, use them where they make sense. There's definitely no penalty for using H1s."
Since we're changing the title of your blog posts to H1 tags, you might be concerned about having multiple H1 tags appearing on your main blog page in order to stay SEO compliant. It's true, in a perfect world, you would only need one H1 tag per page, but in the real world, multiple blog posts can appear on a main blog page because it's a content management system. There's still a lot of misinformation out there about having multiple H1 tags appear on the same page, but rest assured, you don't need to set your posts per page to "1".
To quote JohnMu, a Google Employee, from the Google Webmaster Central Help Forum on December 12, 2016, he said, "We don't treat HTML5 differently & having multiple H1 tags on a page is fine. Be reasonable when using them, use them where they make sense. There's definitely no penalty for using H1s."
SHOW MORE
Tutorial
Step 1. Open Weebly's HTML/CSS Editor
Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.
Step 2. open blog post's TPL file
On the left, under "PARTIALS", click on "blog>post.tpl".
Step 3. change h2 to h1
On the right, you're going to see this code:
<h2 class="blog-title">
{{{title_html}}}
</h2>
Change the "h2" tags to "h1" tags as shown below in orange:
<h1 class="blog-title">
{{{title_html}}}
</h1>
<h2 class="blog-title">
{{{title_html}}}
</h2>
Change the "h2" tags to "h1" tags as shown below in orange:
<h1 class="blog-title">
{{{title_html}}}
</h1>
Step 4. style h1 tag
If you already have CSS styling for H1 tags in your site, then you're done!
However, if you don't, or if you want the CSS styling for your blog titles' H1 tags to be different from the other H1 tags on your site, on the left, under "STYLES", click on "main.less".
On the right, add the following code to your CSS file, preferably in the vicinity of your other blog codes. This code will target your blog titles' new H1 tags:
#blogTable .blog-post h1.blog-title a {
}
Once you add the code above to your CSS file, you can begin adding style codes to it to as shown below:
#blogTable .blog-post h1.blog-title a {
display:block;
font-size:1em; /* Changes the H1 text size */
color:#f1f1f2; /* Changes the H1 text color */
line-height:1.2; /* Changes the space between lines of H1 text */
text-transform:capitalize; /* Capitalizes the H1 text */
font-weight:700; /* Changes the thickness of the H1 text */
font-family: 'Quattrocento', serif; /* Changes the H1 text's font */
text-shadow: 0 1px 3px #000; /* Gives the H1 text a shadow */
}
Click save.
However, if you don't, or if you want the CSS styling for your blog titles' H1 tags to be different from the other H1 tags on your site, on the left, under "STYLES", click on "main.less".
On the right, add the following code to your CSS file, preferably in the vicinity of your other blog codes. This code will target your blog titles' new H1 tags:
#blogTable .blog-post h1.blog-title a {
}
Once you add the code above to your CSS file, you can begin adding style codes to it to as shown below:
#blogTable .blog-post h1.blog-title a {
display:block;
font-size:1em; /* Changes the H1 text size */
color:#f1f1f2; /* Changes the H1 text color */
line-height:1.2; /* Changes the space between lines of H1 text */
text-transform:capitalize; /* Capitalizes the H1 text */
font-weight:700; /* Changes the thickness of the H1 text */
font-family: 'Quattrocento', serif; /* Changes the H1 text's font */
text-shadow: 0 1px 3px #000; /* Gives the H1 text a shadow */
}
Click save.
You're Done! Publish your site to see your blog Post titles' new h1 tags!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
