How to change the H2 of Astra theme widget headings to improve SEO

If you use the Astra theme you will already be enjoying its many virtues, but like all themes, it is not perfect, and personally I think there is a major mistake that can negatively affect your SEO.

I mean that, by default, Astra assigns the HTML H2 tag to the widget headings, which would give them the same hierarchical SEO weight as the post titles in the blog view and the content headings when you view a post or page.

Normally widget headings should have a lower SEO hierarchy, using H3 at most, as they usually have very generic titles that are not very relevant to the SEO of your website, such as “File”, “Last entries”, you know what I mean.

So, according to the structure and SEO hierarchy of your website it doesn’t make sense for these headings to have an H2, I propose to change it, and assign them a title tag of lower hierarchy.

Fortunately, you don’t have to modify all the theme code, something that would be counterproductive for updates, you just have to add some code at the end of the functions.php file of Astra’s child theme (which you should already have active).

How to change the title tag in the footer widgets

In the case of footer widgets, the complete code would look like this:

// Footer Widget 1
add_filter( 'astra_advanced_footer_widget_1_args', 'widget_title_footer_1_tag', 10, 1 );
function widget_title_footer_1_tag( $atts ) {
$atts['before_title'] = '<h1 class="widget-title">';
$atts['after_title'] = '</h1>';
return $atts;
}
// Footer Widget 2
add_filter( 'astra_advanced_footer_widget_2_args', 'widget_title_footer_2_tag', 10, 1 );
function widget_title_footer_2_tag( $atts ) {
$atts['before_title'] = '<h3 class="widget-title">';
$atts['after_title'] = '</h3>';
return $atts;
}
// Footer Widget 3
add_filter( 'astra_advanced_footer_widget_3_args', 'widget_title_footer_3_tag', 10, 1 );
function widget_title_footer_3_tag( $atts ) {
$atts['before_title'] = '<h4 class="widget-title">';
$atts['after_title'] = '</h4>';
return $atts;
}
// Footer Widget 4
add_filter( 'astra_advanced_footer_widget_4_args', 'widget_title_footer_4_tag', 10, 1 );
function widget_title_footer_4_tag( $atts ) {
$atts['before_title'] = '<p class="widget-title">';
$atts['after_title'] = '</p>';
return $atts;
}
// Footer Widget 5
add_filter( 'astra_advanced_footer_widget_5_args', 'widget_title_footer_5_tag', 10, 1 );
function widget_title_footer_5_tag( $atts ) {
$atts['before_title'] = '<div class="widget-title">';
$atts['after_title'] = '</div>';
return $atts;
}Code language: PHP (php)

You must not copy the code as it is, because I have taken the opportunity to put, for each widget, a different HTML tag, so you can see several options, so you must choose the one you want to use.

In the previous example the changes would be these:

• Widget 1 in the footer: H1
• Widget 2 in the footer: H3
• Widget 3 in the footer: H4
• Widget 4 in the footer: p (normal paragraph)
• Widget 5 in the footer: div

So, the most logical thing to do is to choose an HTML tag and assign it to all the widgets, for example, H3 to all of them, as in this example:

// Footer Widget 1
add_filter( 'astra_advanced_footer_widget_1_args', 'widget_title_footer_1_tag', 10, 1 );
function widget_title_footer_1_tag( $atts ) {
$atts['before_title'] = '<h3 class="widget-title">';
$atts['after_title'] = '</h3>';
return $atts;
}
// Footer Widget 2
add_filter( 'astra_advanced_footer_widget_2_args', 'widget_title_footer_2_tag', 10, 1 );
function widget_title_footer_2_tag( $atts ) {
$atts['before_title'] = '<h3 class="widget-title">';
$atts['after_title'] = '</h3>';
return $atts;
}
// Footer Widget 3
add_filter( 'astra_advanced_footer_widget_3_args', 'widget_title_footer_3_tag', 10, 1 );
function widget_title_footer_3_tag( $atts ) {
$atts['before_title'] = '<h3 class="widget-title">';
$atts['after_title'] = '</h3>';
return $atts;
}
// Footer Widget 4
add_filter( 'astra_advanced_footer_widget_4_args', 'widget_title_footer_4_tag', 10, 1 );
function widget_title_footer_4_tag( $atts ) {
$atts['before_title'] = '<h3 class="widget-title">';
$atts['after_title'] = '</h3>';
return $atts;
}
// Footer Widget 5
add_filter( 'astra_advanced_footer_widget_5_args', 'widget_title_footer_5_tag', 10, 1 );
function widget_title_footer_5_tag( $atts ) {
$atts['before_title'] = '<h3 class="widget-title">';
$atts['after_title'] = '</h3>';
return $atts;
}Code language: PHP (php)

Do you just want to change the HTML tag for a title heading of footer widgets? No problem, add to your functions.php only the corresponding code and apply the chosen tag to it.

For example:

// Change HTML tag on heading of footer Widget 3
add_filter( 'astra_advanced_footer_widget_3_args', 'widget_title_footer_3_tag', 10, 1 );
function widget_title_footer_3_tag( $atts ) {
$atts['before_title'] = '<h5 class="widget-title">';
$atts['after_title'] = '</h5>';
return $atts;
}Code language: PHP (php)

In this case I have decided that the headings of the titles of the widget 3 in the footer should be in H5.

How to change the title tag in sidebar widgets

The same problem we have in the headers of the sidebar widgets, which are also applied an H2 by default, and also the same solution, in this case with some changes in the code.

// Change HTML tag on heading Sidebar Widget 
add_filter( 'astra_widgets_init', 'widget_title_tag', 10, 1 );
function widget_title_tag( $atts ) {
$atts['before_title'] = '<h3 class="widget-title">';
$atts['after_title'] = '</h3>';
return $atts;
}Code language: PHP (php)

In the example I have changed the headings of the sidebar widgets so that they are all H3. As before, you decide, put what best fits your SEO hierarchy.

One last point to add, thanks to one of our readers, is that if you have used the header or footer builder then the code changes:

// Footer Widget 1
add_filter( 'astra_footer_widget_1args', 'widget_title_footer_1_tag', 10, 1 );
function widget_title_footer_1_tag( $atts ) {
    $atts['before_title'] = '<h3 class="widget-title">';
    $atts['after_title'] = '</h3>';
    return $atts;
}
// Footer Widget 2
add_filter( 'astra_footer_widget_2args', 'widget_title_footer_2_tag', 10, 1 );
function widget_title_footer_2_tag( $atts ) {
    $atts['before_title'] = '<h3 class="widget-title">';
    $atts['after_title'] = '</h3>';
    return $atts;
}
// Footer Widget 3
add_filter( 'astra_footer_widget_3args', 'widget_title_footer_3_tag', 10, 1 );
function widget_title_footer_3_tag( $atts ) {
    $atts['before_title'] = '<h3 class="widget-title">';
    $atts['after_title'] = '</h3>';
    return $atts;
}
// Footer Widget 4
add_filter( 'astra_footer_widget_4args', 'widget_title_footer_4_tag', 10, 1 );
function widget_title_footer_4_tag( $atts ) {
    $atts['before_title'] = '<h3 class="widget-title">';
    $atts['after_title'] = '</h3>';
    return $atts;
}
// Footer Widget 5
add_filter( 'astra_footer_widget_5args', 'widget_title_footer_5_tag', 10, 1 );
function widget_title_footer_5_tag( $atts ) {
    $atts['before_title'] = '<h3 class="widget-title">';
    $atts['after_title'] = '</h3>';
    return $atts;
}Code language: PHP (php)

But it is also true that lately the footer builder allows to add complete blocks so it is easier to change the heading of your widgets.

Like this:

And that would be it. Try it and let me now if it was useful.

Read this post in Spanish: Cómo cambiar el H2 de los encabezados de los widgets del tema Astra para mejorar el SEO #SemanaAstra