UX Friendly HTML anchors through the Table of Contents

[xbor17]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

The Table of contents widget from Elementor Pro does not create HTML anchors that are based on the header itself and that Google can use to identify the different sections of a page. At the moment I have to use a third-party plugin and add it through a shortcode on the blog posts template in order to get a table of contents that has actual HTML anchors with a URL friendly format. HTML anchors are used by Google since 2009 to identify the different sections of a piece of content: https://developers.google.com/search/blog/2009/09/using-named-anchors-to-identify

Describe the solution you'd like.

I would love if the Table of Contents from Elementor would create HTML anchors that are URL friendly. At the moment the table of contents from Elementor creates the anchors like https://example.com/example-post/#elementor-toc__heading-1 but this is not friendly for Google, neither gives a context about what the section of the page is about. The HTML should be the actual title itself, like Wikipedia or other WP plugins do.

Describe alternatives you've considered.

At the moment I have to install a third-party Table of Contents plugin to be able to have a system that creates HTML anchors that have a UX friendly URL. I introduce this plugin through a shortcode.

Additional context

Any article from Wikipedia introduces HTML anchors based on the actual heading they are pointing to, like https://en.wikipedia.org/wiki/Europe#Definition or https://en.wikipedia.org/wiki/Europe#Demographics or https://en.wikipedia.org/wiki/Europe#Major_cities_and_urban_areas

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.

[anatshecodes]

Hi, FWIW see if this gives you the answer:
if you put a css id in the header it changes the link created by the TOC table.
Although it is not possible to give a CSS ID when the post content is not edited using Elementor, but it is possible to insert the id into the code.
More explanation here:
#10052 (comment)