Categories
Blog

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

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.

header tags from h1 to h6
The hierarchy of header tags

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:

SEO Meta in 1 click chrome extension
This is how the extension 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:

Header tags on digital bazaari
Header tags 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.

Wordpress theme editor
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.

functions.php file editor for wordpress
Edit the functions.php file

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:

new code added
Added new code

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.

Another cool blogging tip for WordPress

2 replies on “How to change your WordPress widget’s header tags to H3 or below”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.