Duplicate h1 tag in sidebar

The sidebar contains the header with the site title, menu, etc. so it should come before the main content. It’s also a requirement to introduce the heading tags in order – an h2 must come after an h1. This is why there is an h1 in the sidebar and h2 elements used for the widget titles.

As an alternative solution, you can remove the h1 from the sidebar and all h2s from the widgets so that the heading structure does not begin until the main content, but it is semantically incorrect to begin with an h2.

but it is semantically incorrect to begin with an h2.

True,

but you could define the sidebar after the content. It just needs a bit of CSS to still be on the left.

I mean, those seo things aren’t without any background. When I think of ppl with screen readers, it perfectly makes sense.

The sidebar contains the header with the site title, menu, etc. so it should come before the main content.

That would be broken in my proposal. Hmm.
On the other hand, if you look at other ppls sites (like seo yoast.com), it looks like this:
view-source:https://yoast.com/software/yoast-seo-configuration/

first thing is h1 with post title
… some other h2-4 for the content
h2 recent posts
h3 recent post 1
…

the site title is actually not echoed anywhere else (exccept actual title html tag and some javascript).

Since the sidebar needs to come first, I think the only solution to use remove all heading tags from the sidebar.

You can copy the content/archive-header.php from Author into a content directory in a child theme and then replace the h1 on line 4 with a span tag instead.

As for the widget titles, this function can be added to a child theme’s functions.php file:

function ct_author_register_widget_areas() {

		// after post content
		register_sidebar( array(
			'name'          => esc_html__( 'Primary Sidebar', 'author' ),
			'id'            => 'primary',
			'description'   => esc_html__( 'Widgets in this area will be shown in the sidebar', 'author' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>'
		) );
	}

The before_title and after_title parameter values can be switched to spans or divs. With these two changes, all heading changes will be removed from the sidebar.

Since the sidebar needs to come first

I’ve seen pages, where a sidebar is displayed left of the main content, but the main content comes first in HTML.

So, just being curious, why do you think the main content needs to come after that sidebar stuff? I’m still thinking of blind people using a screen reader. They need to skip all that stuff.

I meant that the sidebar needs to come first in the HTML. The sidebar contains the <header> which is meant for introductory content and it contains the main navigation as well. I suppose it could come after the main content, but that seems unusual.

On websites without sidebars, the header and navigation still come before the main content, so this is quite standard for visitors to skip over that content. Author has a “skip” link that appears the first time the “tab” key is pressed that will take them straight to the main content as well: https://pics.competethemes.com/nShW

Thanks for your input. I wonder how to have a nice solution to both screen readers, seo AND html ordering.

For the time being, I’ll just remove the headers and replace them with anchors.

Thanks for your input.

PS: Do you know of any other seo-optimized site with that “problem”? I wonder how others do it. I have no idea left…