Reviewing the SEO of my blog, I’ve noticed that, if I’m not mistaken, the post titles are tagged as h2. Should they be tagged as h1? If so, based on the source code you see (https://www.fotov60.com/?LSCWP_CTRL=before_optm), what should I modify to be able to tag them as h1?
The designer has used H1 for the logo, so that’s probably why the subsequent headings are H2 and down. I don’t think it’s very good practice to use an H1 for the logo, but it’s not uncommon (although less common that in the past).
1 Like
So, would you recommend me to look for an alternative to remove the H1 from the logo and reserve it for the post headers?
I would want to do that myself, but you don’t need to stress over it. Most of your end users aren’t going to notice or care. (It might be a little annoying for those using screen readers.) I guess it depends on how much of a purist you want to be. But if you’re into HTML purity, WordPress isn’t the best place to start. 
Honestly, though, there are so many WordPress sites out there, and people just live with it. Most people just need to get online and don’t want to have to worry about the finicky concerns of web purists. There are lots of compromises online. Nothing will ever be perfect. The main thing is that your website does what you need it to. If that’s all in place, then it might be worth refining it bit by bit.
Your web page title “FOTOV6” has <h1> tag which is good.
It is good practice to have no more than one <h1> tag (reference).
It is therefore good practice that your blog article titles are within <h2> tags, not within <h1> tags.
I see you have some <h3> tags for subheadings within blog articles which is also good. However as they are in a large bold font they do not look like subheadings.
It’s not really a title, though, but the site logo. I remember there was a lot of debate about this in the early web standards day, and it seemed the general consensus was that it’s not the place for an H1. Otherwise, every page on the site has the same main title, which isn’t very useful.
It does not seem right to me that text displayed at the top of a web page, such as the name of a company or organisation, should not be in a heading tag, especially on the home page.
We should be guided by what the users of screen readers find most helpful, although I appreciate that section heading elements may help search engines.
Should we not also be guided by MDN saying that we should avoid using multiple <h1> elements on one page?
1 Like
I guess to a screen reader it’s all just text. But for them to have to read through all the things like logo, menu etc. on each page is a real drag, so it’s better to be able to jump to the real, unique content of the page — either by juming through headings or via a skip-to-content link.
That’s what I like to do, although HTML5 made it acceptable to use more than one h1, for some reason.
That’s what I’m trying to do, fix the more specific errors now that it passes web analysis tools like Insights or webpagetest correctly.
FOTOV60 like @ralphm says is the page´s logo, not the title and
I am trying to refine the CSS in that regard, as well as determine the most suitable elements to use them on. I have isolated all the headings h1, h2… If you could give me your opinion on whether you see them as correct or, if not, what changes you would make.
/*-------------------------------
START Typography & Colors
-------------------------------*/
h1 {
font-size: 4.8em;
font-family: orkney,serif;
text-transform: uppercase;
padding: 0 0 0 39px;
}
h1,
h1 a,
h1 a:hover,
h1 a:visited,
#header .description {
text-decoration: none;
color: #000;
}
h2 {
font-size: 2.8em;
font-family: orkney,serif;
font-weight: normal;
line-height: 1em;
padding-bottom: 9px;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited {
font-family: orkney,serif;
color: #cc0000;
text-decoration: none;
}
#sidebar h2,
#wp-calendar caption,
cite {
text-decoration: none;
}
h3 {
font-size: 2.5em;
line-height: 1em;
}
H4 {
font-size: 2.4em;
font-family: orkney,serif;
color: #000;
line-height: 1em;
padding: 0px;
}
H4.footerwidget {
padding-top: 20px;
}
H5 {
font-size: 2em;
font-family: orkney,serif;
color: #000;
line-height: 1em;
padding: 12px 0 12px 0;
}
H6 {
font-size: 1.6em;
font-family: orkney,serif;
color: #000;
line-height: 1em;
padding: 0px 0 16px 0;
}
.sticky h2 {
padding-top: 10px;
}
a:hover,
h3 a:hover {
color: #0000ff;
text-decoration: underline;
}
h2 a:hover,
h3 a:hover {
color: #0000ff;
border-bottom: 1px dashed;
text-decoration: none;
}
/*-------------------------------
End Typography & Colors
-------------------------------*/
/*-------------------------------
START headers
-------------------------------*/
h1 {
padding-top: 61px;
margin: 0;
}
h2 {
margin: 30px 0 0;
}
h2.pagetitle {
margin-top: 0px;
width: 512px;
}
h2.archivetitle {
margin-top: 0px;
color: #000;
font-size: 2.5em;
text-transform: uppercase;
border-bottom: 1px dashed #575b59;
}
#sidebar h2 {
margin: 5px 0 0;
width: 208px;
height: 39px;
font-size: 12px;
text-transform: uppercase;
padding: 11px 0 0 47px;
background: url('images/sidebar-headings.gif') top left no-repeat;
color: #eef0eb;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 1.2em;
font-weight: bold;
}
#sidebar h3 {
margin: 5px 0 0;
width: 208px;
height: 39px;
font-size: 12px;
text-transform: uppercase;
padding: 11px 0 0 47px;
background: url('images/sidebar-headings.gif') top left no-repeat;
color: #eef0eb;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 1.2em;
font-weight: bold;
}
h3 {
padding: 0;
margin: 8px 0 18px;
}
/*-------------------------------
END headers
-------------------------------*/
/*Extra large tablet screen only*/
}
h2.pagetitle{
width: 100%;
}
/*for tablet screen*/
h2.pagetitle{
width: 100%;
}
/*Responsive for mobile by farhat*/
h2.pagetitle{
width: 100%;
}
What can I use instead of H1 for the logo? If I set the post titles as H1, would it help them to skip to the actual and unique content of the page? How should I do it with this CSS?
A logo to me is more or less an image. I use SVG format for logos. And the lazy way is to avoid <h1> html tag and use <div id="logo">My Logo</div> and set the size etc for the id #logo by CSS.
I have taken a quick look at the RNIB and BBC home pages because they would take much care about accessibility for blind people.
Both have a single <h1> element.
The BBC home page <h1> element has text content “BBC Homepage” (without quotation marks) but it is visually hidden by this CSS:
width: 1px;
height: 1px;
clip-path: inset(100%);
They do not use visibility:hidden or display:none because screen readers would no read text hidden those ways.
The BBC News web page has a <h2> element “News Navigation” hidden in a similar way.
The RNIB home page has “Home” hidden in a very similar way.
Whether or not you call " FOTOV60" a logo, visitors to the website will read that as being the title of the web page: in this case the name of the website.
I was trying to work out the structure of your home page from the differing styles of red text, without looking at their <h2> etc tags. The red text in bold seemed more important than the other red text.
I may be wrong but I think you have five blog articles on your home page. If this is the case then I would say the title of each blog article should be <h2> and other red text should be at <h3> level or lower. I think the page would be improved visually if the five blog articles were separated from each other in a better way: possibly by making the other red text significantly less prominent or preferably by displaying each blog article within some form of box. These are just personal comments…
How can I do to make work in desktop and mobile version?
In the last post the title is H2, titles inside the post are H2 and have subtitles in H3 (the one that look bold). I think the problem is the styles definitions instead the structure of the titles across the post. Are you agree? Watching the CSS in the previous post, how can I modify to make look better?
Its ok, im searching ways to improve it all proposals are wellcome. Are you watching it in desktop or mobile version? Have a recommendation that works in both views?
Whats the utility of this?
About similar to a normal image. .png .jpeg or whatever. SVG stays sharp regardless of size.
See your other forum thread.
I am using an HD monitor 1920 x 1080. I have not looked at your website a smartphone or tablet.
A screen reader being used by a blind person would be able to inform the user that they have navigated to the BBC Homepage.
It is generally advised to use a single H1 element per page in the context of SEO to indicate the primary heading or title of the material. Using several H1 tags could make it unclear to search engines what your content’s main focus is.
It’s best practice for blogs to use an H1 tag for the post title. It facilitates search engines’ comprehension of your page’s primary subject. But don’t forget about your HTML’s overall structure. Using the right header tags (H2, H3, etc.) for subsections or parts of the blog post is also essential to preserving the hierarchical structure.
<body>
<header>
<h1>Main Blog Title</h1>
<nav>
<!-- Navigation links -->
</nav>
</header>
<main>
<article>
<h1>Blog Post Title</h1>
<p>Blog content...</p>
<h2>Subheading 1</h2>
<p>Content...</p>
<h2>Subheading 2</h2>
<p>Content...</p>
</article>
</main>
<footer>
<!-- Footer content -->
</footer>
</body>
I understand what you’re saying, but in my case, I don’t know how to apply it correctly. Currently, due to the theme design, the h1 is applied to the logo/title “FOTOV60,” which may not be very descriptive, and it appears on 100% of the web pages. The h2 is applied to post titles, and within the body of the posts, I use h2 and h3.
That’s why I was exploring the possibility of using another tag for the logo/title and using h1 for post titles or another element on the website to differentiate pages. Any recommendations?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.