search

Crocoblock / suggestions

The suggestions for CrocoBlock project
195 stars 78 forks source link

Bug - Pagination is not SEO friendly and wrong Canonical meta + missing link rel prev #4594

Open hicham1989s opened 2 years ago

hicham1989s commented 2 years ago

Dear Crocoblock staff,

Your pagination widget is not following SEO best practises and can have severe consequences for customers using it.

My settings for the pagination widget are as follows (as attached)

Critical issue The following code is then added to source code, for page 6 as an example.

source

I highly advice you to review this and read about SEO best practises for pagination tags, for example here: https://www.contentkingapp.com/academy/pagination/#best-practices-for-the-pagination-attributes

Non urgent but highly advisable

limacon12 commented 1 year ago

+1

DuinDigital commented 4 months ago

Please can you guys review/fix this issue? My client has SEO issues because of this.

Leadsquad commented 6 days ago

Same here

Leadsquad commented 5 days ago

for everyone who's looking the solution, i have added links to the pagination with js right after pagination loading, add it to child theme functions.php

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'custom-pagination',
        get_stylesheet_directory_uri() . '/custom-pagination.js',
        array('jquery', 'jet-smart-filters'),
        '1.0.0',
        true
    );
}, 20);

and in child theme create "custom-pagination.js"

with:

jQuery(document).ready(function($) {
    if ($('.jet-filters-pagination').length) {
        var currentPage = 1; // Default to page 1
        var totalPages = 1; // Will be updated later
        var pageNumbers = [];

        $('.jet-filters-pagination__item[data-value]').each(function() {
            var $item = $(this);
            var dataValue = $item.attr('data-value');
            if ($.isNumeric(dataValue)) {
                var pageNum = parseInt(dataValue);
                pageNumbers.push(pageNum);

                var baseUrl = window.location.href.split('?')[0];
                var href = baseUrl + '?jsf=jet-data-table&pagenum=' + pageNum;
                var text = $item.find('.jet-filters-pagination__link').text();

                var link = $('<a>', {
                    href: href,
                    class: 'jet-filters-pagination__link',
                    text: text
                });

                $item.find('.jet-filters-pagination__link').replaceWith(link);

                if ($item.hasClass('jet-filters-pagination__current')) {
                    currentPage = pageNum;
                }
            }
        });

        // Determine total pages
        if (pageNumbers.length > 0) {
            totalPages = Math.max.apply(null, pageNumbers);
        }

        // Update <link rel="next"> and <link rel="prev"> in the <head> section
        var head = $('head');

        // Remove existing rel="next" and rel="prev" links
        head.find('link[rel="next"]').remove();
        head.find('link[rel="prev"]').remove();

        var baseUrl = window.location.href.split('?')[0];

        // Add rel="next" link if not on the last page
        if (currentPage < totalPages) {
            var nextPageNum = currentPage + 1;
            var nextHref = baseUrl + '?jsf=jet-data-table&pagenum=' + nextPageNum;
            $('<link>', {
                rel: 'next',
                href: nextHref
            }).appendTo(head);
        }

        // Add rel="prev" link if not on the first page
        if (currentPage > 1) {
            var prevPageNum = currentPage - 1;
            var prevHref = baseUrl + '?jsf=jet-data-table&pagenum=' + prevPageNum;
            $('<link>', {
                rel: 'prev',
                href: prevHref
            }).appendTo(head);
        }
    }
});

and instead of 

<div class="jet-filters-pagination__item" data-value="2">
    <div class="jet-filters-pagination__link">2</div>
</div>

you will have 

<div class="jet-filters-pagination">
    <div class="jet-filters-pagination__item jet-filters-pagination__current" data-value="2">
        <a href="https://example.com/?jsf=jet-data-table&amp;pagenum=2" class="jet-filters-pagination__link">2</a>
    </div>
</div>

also it updates rel="next" and rel="prev" to correct

Which definitely better for seo and can be crawled by bots, that's not ideal solution, but doesn't requires to change the original plugin