Change <h1> Tags in TinyMCE Link Modal to <span> or Lesser Header Tags to Prevent Potential SEO Issues

[bohdansmaha]

Description:

In the current implementation of the TinyMCE editor used within WordPress, the link modal (which appears when users click to insert/edit links) is titled using an <h1> tag. This is semantically inappropriate for a modal header and could potentially lead to SEO issues, particularly through the generation of multiple <h1> tags on pages where the editor is used multiple times or alongside other content that correctly uses <h1> tags.

Existing Code Example:

<h1 id="link-modal-title">Insert/edit link</h1>

Problem:

Automated SEO tools and accessibility checks often flag pages with multiple <h1> tags as having potential structure issues, which can mislead users about the importance and hierarchy of content. Since <h1> tags are typically reserved for primary page titles, their use in a modal for editing links can be seen as overemphasizing the importance of the modal's content.

Suggested Solution:

It would be more appropriate to use either <span> tags or a lesser header tag such as <h2>, <h3>, etc., for the headers within these modals. This change would prevent the TinyMCE link modal from inadvertently affecting the semantic structure of the page and improve compatibility with SEO best practices and accessibility guidelines.

Benefits:

• SEO Compliance: Reduces the risk of SEO penalties from search engines that expect a single <h1> per page or semantic clarity in content hierarchy.
• Accessibility: Improves content accessibility by maintaining a clear and logical hierarchy in document structure, as modal titles do not typically constitute a top-level heading on a page.
• Editor Consistency: Aligns the use of header tags within WordPress admin tools with best web practices, reinforcing WordPress's commitment to producing semantically correct and accessible content.

I suggest modifying the TinyMCE initialization or configuration files where these modal titles are defined to change the tag from <h1> to a <span> or an appropriate heading level that reflects the modal's purpose without conflicting with the primary page content.

[swissspidy]

Hi there and welcome to Trac!

This appears to be a duplicate of #46918

Also, if you aren‘t using the editor on the frontend, I don‘t seee how something that‘s only displayed in the admin could affect search engines.

[bohdansmaha]

Replying to swissspidy:

Hi there and welcome to Trac!

This appears to be a duplicate of #46918

Also, if you aren‘t using the editor on the frontend, I don‘t seee how something that‘s only displayed in the admin could affect search engines.

We are in fact using the editor on the front end. In this particular case it is a gravity form with Rich Text Editor enabled on the paragraph fields, but I can see the other case scenarios as well. @afercia argument on the other ticket make sense to me. Seems more of a accessibility and seo audit tools issue.