How to change your Wordpress widget’s header tags to H3 or below

Last Updated on April 10, 2020

Recently, I was doing a regular SEO check of my website, and I found that all my Wordpress widgets were h2 headers. Now if you know the slightest about basic SEO practices, you would know that it is not advisable since the widgets are duplicated to all your Wordpress pages. This would create several duplicate h2 tags on all your pages, which is very bad for SEO.

I personally use the Wordpress Twenty-Twenty theme, but the following issue might be available on many of your pages. So, let’s start.

What are header tags?

Header tags can be thought of as title tags, which define what the page or paragraph is about. There are 6 header tags (h1, h2, h3, h4, h5 and h6) and according to best SEO practices, you should only have one h1 tag, while you can have multiple header tags that are h2-h6.

Think of the H1 tag as the main title tag. For example, the title of this post is the H1 tag, while all other subsections, such as the above “What are header tags?” is a h2 tag, since they are smaller parts of the H1 tag.

I don’t know why but Wordpress used the H2 tag for all their widgets in their twenty twenty theme (and maybe others as well), which is not at all a good SEO practise.

How do I check the header tags of my page?

To check which header tags your page is using, you can either view the page source (Ctrl+U) and search for “<h1>” or <h2>” (using Ctrl+F shortcut). This will show you the respective header tags along with the text that they contain.

A simpler alternative to this:- you can download a chrome extension that shows you all your header tags in their order. The extension is called SEO Meta in 1 CLICK and is available in the chrome web store.

By using this extension, you can see the SEO related details of any page simply by clicking on the extension icon. It can show you the page’s title, meta description, meta keywords, headers and a lot more. This is how it looks:

Now we’re looking for the header information for the page, so we can check if the headers are arranged properly. To check it, simply click on the header tab of the widget as shown in the image above.

An ideal arrangement of header tags

Though there is no defined rule for how you should categorize your headings, there are some general rules you can follow:

• The title of your post/page should always be H1.
• It is adviseable to only have one H1 header tag on a page.
• The headings that are next in importance to the H1 tag should be H2.
• Other less important headings, or widget headings which repeat on every page, should be h3 or below.

This is how the header tags look for a post on Digital Bazaari:

As you can see from the image above, all the widgets that appear in the footer of my blog have a header tag of <h4>. Earlier, they were <h2>, which made it look like they were one of the headings of the post. This could have caused some serious issues if Google bot crawled the page. Go and check for yourself, if your widget header tags are displaying as <h2>, then scroll down for a simple trick to fix this. Otherwise, you’re good.

How to change header tags of your widgets in Wordpress?

If your blog also suffers from the issue described above, then here is what you should do.

Step 1: Go to your theme editor.

Log in to your Wordpress dashboard, and navigate to Appearance > Theme editor.

Step 2: Edit the functions.php file

We will be adding a special function to change the header tags. This will help our Wordpress retain the setting even if the theme is updated at a later time. To do this, we need to edit the functions.php file in the theme editor.

Click on the functions.php tab to edit the file.

Step 3: Add the following code in the file.

Scroll down the text editor, and add the following snippet of code anywhere:

add_action( 'after_setup_theme', function() { 
	add_action( 'register_sidebar', function( $sidebar )
	{
    	global $wp_registered_sidebars;
	
	    $id = $sidebar[ 'id' ];
	    $sidebar[ 'before_title' ] = '<h4 class="widget-title subheading heading-size-3">';
	    $sidebar[ 'after_title' ] = '</h4>';

	    $wp_registered_sidebars[ $id ] = $sidebar;
	});
});

Note that this code changes the header tags to H4. If you want to change them to any other header tag, simply edit the code and change h4 to h5 or h6 respectively. This should look like this now:

Just click on the “Update file” button after adding the code.

Step 4: Bask in the glory of your SEO win

Congrats, you just level upped the SEO game of your blog. You might be feeling like a bit of a geeky coder after doing this that’s for sure.

Keep checking our blog for more SEO tips and tricks. If you experience any issues with this method, just leave a comment below and let us know.

How to automatically ping multiple services when you post a blog in Wordpress