WordPress Widget Headings
A Basic WordPress Widget Heading Error
WordPress is mostly a SEO friendly system, yet there is one critical error that will reduce the optimisation of a WordPress blog or website: WordPress encloses Widget Titles within <h3> header markup. WordPress is not the only system theme developers make this basic error – I’ve also seen Drupal themes using h3 and worse still h2
This is one of the things I would really like to see changed in the next version of WordPress (WordPress.org) as well as WordPress.com.
The three primary heading markup tags really should only ever be used in content.
- <h1> markup should only be used for page or post TITLES
- <h2> should be the introduction content heading, with occasional use to separate really important sections of articles.
- <h3> should be used to separate subsections included under <h2> markup tags…
Widget Titles in Lower Priority Heading Markup
Ideally, Widget Titles and the widget content that follows should use the lowest possible heading tag markup; preferably <h5> or <h6>
For WordPress self hosted sites (WordPress.org) we have the option to change the default header tags by modifying the theme or core files. For WordPress.com blogs this option is not available.
The only way to get round this issue is to remove all the provided widgets, and only use text widgets (without a Title). Not an ideal situation at all, as many of the widget functions are impossible to recreate using a text widget. This is also a way round the problem for self hosted WordPress sites whose owners don’t want to hack into the theme or core files (not a good idea unless one really knows what they are doing)
So what to do. The problem can be reduced somewhat by using only the really essential widgets. Looking around WordPress.com blogs I notice many of these use few widgets anyway. At the very least we can remove the default META widget. This widget is totally unnecessary, and is only a convenience. Rather bookmark the log-in page next time you go to log-in to the blog.
Other common widgets used are RSS links – a better way to include links to your RSS feeds was described in my article SEO Friendly Website Links with the added advantage of “nofollowing” the links.
Example of Widget Title using <h6> markup
<h6 style=”font-size:medium; font-weight: bold; margin-bottom: 14px;”>OTHER SITES</h6>
There is also opportunity to style the Text Header; the example uses HTML markup for font size and font weight. The font size is particularly useful, as WordPress may display h6 header text in very small letters – setting the font size this way overrides the default size. Font Size can be set as shown using medium, large, etc, or with a numerical value e.g. 16px, or 1.2em, or even a perecentage
This alternative HTML header can be used in place of the Widget Title. Delete the title of the text widget to remove the <h3> markup.
Anyone who gives the two HTML ‘widget’ ideas from this and the previous mentioned article may discover just how useful and easy basic HTML code can be, and could be encouraged to explore this powerful web design tool a little further.
The four text widgets used for outgoing links on this blog serve as examples of the use of this header.
Remove WordPress Widget Titles:
Another step in the right direction is to remove the widget title from the widgets available in the blog Widget Admin page, wherever possible. Not always a practical solution though; as can be seen on this page, the search box and Category Widget do not display a heading, while the Latest Posts etc do.
Real On-Site Optimisation
Removing the Widget Title for Latest Posts and the others would have made the list meaningless, so I just have to put up with these inside h3 markup. At the end of the day we have to chooses between how optimised our blogs are, and how our visitors will enjoy the experience. Practical On-Site Optimisation is not all about the search engine spiders, at the end of the day it is the visitor that counts the most.
If you found this article useful, or would like more information about fixing the h3 widget headers and other technical tips for your self hosted WordPress blog, subscribe to SME Technology, my website all about building a self hosted site using WordPress. This is a weekly e-mail newsletter with details about the latest articles published. One of my upcoming articles will deal with widget heading (Title) markup in more detail.
Sometimes if a Title is not used for the widget, a blank space can be left between the previous widget and the custom text widget. This can make the blog look untidy. Content in text widgets can also be indented to the right, instead of being vertically aligned with other widgets.
There is however an easy fix for this – Read CSS Fix for Text Widget Without Title
As pointed out by bitkahuna – see comment below, some themes may still insert the empty h3 tags – check your page source code to check if yours does this.
Posted on January 2, 2012, in HTML, TECH NOTES, WordPress and tagged Blogs, Google, Headers, Headings, HTML Markup, Search engine optimization, SEO, Templates, Website, Widgets, WordPress, wordpress.com. Bookmark the permalink. 7 Comments.