Resoved Elementor Table of Contents SEO Friendly URL Issue

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.

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.