Analyzing my blog (https://www.fotov60.com), on the desktop version, I find that the template uses h2 for menu titles in sidebar. Is that harmful for SEO, appearing so frequently in all my entries? Should I change it? If so, do you recommend an alternative to modify it that would benefit the website?
Heading elements are handy for organizing content and for searching a page. It’s best to use them for grouping content into useful sections, rather than for random elements like social links etc. Seems there’s a bit of both on your site, but using H2s in the sidebar is fine.
1 Like
Hm not so sure about that… there’s no actual content really, it’s just lists with links and some images here and there. Maybe use figure / figcaption elements to group the sidebar sections instead?
A better question IMO would be “is that helpful to site visitors?”. If yes, then you don’t need to worry about any negative impact.
Who are you designing your site for? People or search engines?
I don’t understand what you mean; could you explain it differently?
In reality, I don’t know if it’s useful for the visitor, as there may be another way to format the menu titles. However, I also believe that we must consider SEO since there are many menu titles, and if it doesn’t matter much to the user which format is used, but one is harmful for SEO while the other is not, it’s better to choose the option that represents a double benefit, isn’t it?
Presuming that a div with a social link or a list of blog archives doesn’t qualify as content, I was suggesting to use figure elements with captions for these… so instead of e.g.
<h2 class="widgettitle">Follow us on Facebook</h2>
<div class="textwidget custom-html-widget">
<a href="https://www.facebook.com/FOTOV60">Follow Page</a>
</div>
… you’d have:
<figure>
<figcaption class="widgettitle">Follow us on Faceboo</figcaption>
<div class="textwidget custom-html-widget">
<a href="https://www.facebook.com/FOTOV60">Follow Page</a>
</div>
</figure>
Just an idea though. :-)
I meant as a general principle, rather than for this site necessarily — although there are definite sections of content down that sidebar.
2 Likes
I think Igot it. In this case, should I indicate the format it would have through inline styles, CSS, or how?
With format you mean the styling? Ideally in a CSS file… when using the same classes, you might not even have to adjust much though (it depends on how specific the rules for those classes are).
@m3g4p0p Yes, I wanted to refer to the styling. I’m fairly new to CSS in style sheets, and I’m not sure if what I should do is look for <h2 class="widgettitle"> in the sheet and replace it with <figcaption class="widgettitle">, and then the styles previously applied to the first one will be applied to the second where I’ve exchanged the tags.
In the CSS you’d look for the class selector .widgettitle… just had another look at your page though and it seems that the headline styling is not applied via the class, but via the tag name and sidebar ID:
#sidebar h2 {
margin: 5px 0 0;
width: 208px;
height: 39px;
/* font-size: 12px; */
text-transform: uppercase;
padding: 11px 0 0 47px;
background: url('/wp-content/themes/fotov60/images/sidebar-headings.gif') top left no-repeat;
color: #eef0eb;
font-family: Tahoma,Verdana,Sans-Serif;
font-size: 1.2em;
font-weight: 700;
}
So just adding that widgettitle class won’t help here. You might add an analogous figcaption selector though:
#sidebar figcaption,
#sidebar h2 {
/* styles as above */
}
Of course, if this is all new to you you’ll have to read a bit about it. The MDN is always a good place to start:
1 Like
Im watching at my CSS and found this two sidebar h2 references:
#sidebar h2,
#wp-calendar caption,
cite {
text-decoration: none;
}
#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;
}
And another to sidebar h3:
#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;
}
Maybe Litespeedcache plugin is modifying the CSS sheet. If you want, you can watch de original one visiting de url adding a modifier at the end like this https://www.fotov60.com/?LSCWP_CTRL=before_optm . Then the in the browser´s developer console you can see that h2 are in https://www.fotov60.com/wp-content/themes/fotov60/style.css?ver=4.4
So you mean to achieve the change, should I write
#sidebar figcaption,
#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;
}
in the place where I found the second sidebar h2 that I mentioned? And then replace in the HTML wherever it says <h2 class="widgettitle"> with <figcaption class="widgettitle">, resulting in something like this example?:
<figure>
<figcaption class="widgettitle">Follow us on Facebook</figcaption>
<div class="textwidget custom-html-widget">
<a href="https://www.facebook.com/FOTOV60">Follow Page</a>
</div>
</figure>
And the same for the h3 tag?
Yes exactly. :-)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.