Resoved Elementor Table of Contents SEO Friendly URL Issue

Resolved Elementor Table of Contents SEO Friendly URL Issue

Table of Contents

Introduction

Search Engine Optimization (SEO) is a critical aspect of any website, and small details can make a significant impact on how search engines perceive your content. One such detail that has been causing concerns for Elementor users is the lack of proper URL formatting in the Table of Contents widget. This issue can have negative implications for SEO, as the URLs generated for heading texts are not SEO-friendly. In this blog post, we’ll explore the problem and provide a PHP script solution that can be integrated into the WordPress theme’s functions.php file.

Solved Elementor Table of Contents SEO Friendly URL Issue

The Problem

When utilizing Elementor’s TOC widget, the HTML it generates includes anchor links like “#elementor-toc__heading-anchor-0.” This isn’t aesthetically pleasing, and more importantly, it doesn’t contribute positively to SEO. Search engines prefer URLs that are descriptive and reflect the content they point to. The lack of meaningful keywords in these generated URLs can result in lower search engine rankings.

The Solution

To address this issue and improve SEO, we’ve created a custom PHP script that you can add to your WordPress theme’s functions.php file. This script automatically replaces the generic anchor links with more SEO-friendly URLs derived from the heading text.

function auto_id_headings( $content ) {
    $content = preg_replace_callback( '/(\<h[1-3](.*?))\>(.*)(<\/h[1-3]>)/i', function( $matches ) {
        if ( ! stripos( $matches[0], 'id=' ) ) :
            $matches[0] = $matches[1] . $matches[2] . ' id="' . sanitize_title( $matches[3] ) . '">' . $matches[3] . $matches[4];
        endif;
        return $matches[0];
    }, $content );
    return $content;
}
add_filter( 'the_content', 'auto_id_headings' );

Explanation of the Script

This PHP script utilizes the preg_replace_callback function to find and modify heading tags (h1 to h3) in the content. It checks whether the heading already has an “id” attribute and, if not, adds one using the sanitized version of the heading text. This ensures that the heading text becomes a part of the URL.

Implementation

  1. Copy the provided PHP script.
  2. Open your WordPress theme’s functions.php file.
  3. Paste the script at the end of the file.
  4. Save the changes.

Benefits

  1. Improved SEO: The modified URLs now contain relevant keywords from the heading text, contributing positively to search engine rankings.
  2. User-Friendly URLs: Visitors will see cleaner, more descriptive URLs, enhancing the overall user experience.
  3. Customization: You have the flexibility to customize the script further to suit your specific needs.

Conclusion

In the ever-evolving landscape of SEO, attention to detail is crucial. By addressing the URL issue in Elementor’s TOC widget using this custom PHP script, you can enhance both the SEO and user experience of your WordPress website. Stay proactive in optimizing your site, and you’ll reap the benefits of improved visibility in search engine results.

Tags
What do you think?

What do you think?

5 Comments:
November 18, 2023

FAIL: DOES NOT WORK – Only works on the first TOC item, not the following. Also grabs a TON of the text, not JUST the heading…
WordPress 6.3.2 running Hello Elementor theme

November 19, 2023

Hey Ira,
Script is working fine on our website’s Table of Contents section; you can check it out. If you’re experiencing any issues, please connect with us through our Contact Us page, and we’ll respond within 24 hours.

December 15, 2023

Hi, I am using the WP code plugin, where should I paste the code, header, body or footer? Thank you!

December 18, 2023

Hi Giorgio,
You have to add the script in your WordPress theme’s functions.php file.

January 31, 2024

I’m getting the same issue. It is grabbing the content here> but also grabbing a whole bunch of text afterwards for ids that are hundreds of characters long. It is also not getting each one. Some ToC elements are processed okay, others long, and others are #elementor_anchors

Thanks for putting this script together. Any chance there an update with a fix?

Leave a Reply

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

What to read next