HTML5 pushstate and SEO link

0 votes

I try to implement pushstate history on my website in order to load content from a single.php page inside a index.php container.

My website have two main page : index.php and single.php .

On the index.php there are links that call pushstate script:

<a class="phplink" href="/Formlabs-3D-printer" title="Formlabs 3D printer">Post 12</a> 
<a class="phplink" href="/Minimal-Bumper-for-iPhone-5" title="Minimal Bumper for iPhone 5">Post 11</a>

On my single.php page I use isset get method to dynamically load content that correspond to clicked link on index.php:

<?php
if (isset($_GET["page"])) { 
//I do some stuff in order to echo content
?>

In my .htaccess file I rewrite the url link

Options +FollowSymLinks
RewriteEngine on
RewriteRule /([a-zA-Z0-9\-]+)$ /index.php 
RewriteRule /([a-zA-Z0-9\-]+)$ /single.php?page=$1 [L]

And here my pushstate script:

$.ajaxSetup({cache:false});
$(".phplink").click(function(){
    var $post_link = $(this);
    load_content($post_link.attr('title'),$post_link.attr('href'));
    return false;
}); 

window.onpopstate = function(event) {
    if (event.state) {
        load_content(event.state.title, window.location.pathname, true);
    } else {
        var stateObj = {
        title: document.title,
        url: window.location.pathname,
        };
    url = window.location.pathname;
    load_content(url,url);
    }
}  

function load_content(title,url,skipHistory) {
    $.get(url,function (data) {
        document.title = title;
        var stateObj = {
            title: title,
            url: url
            };
        if (!skipHistory) {
            if (typeof window.history.pushState == 'function') {
                window.history.pushState(stateObj,title,url);
            }
        }
        if(url.substring(1) != '') {
            $("#ajaxify_container").html("loading...");
            $("#ajaxify_container").load('single.php?page='+url.substring(1)+' #container-2');  
        } 
        else {
            $("#ajaxify_container").html('');   
        }
    });
}

My pushstate script works to load content on link click (on .phplink click). It works also for back/forward button.

1st PROBLEM : When I refresh the browser (with an pushstate link in the url) it works on google chrome (load content from single.php to index.php container) but no in IE10 (nothing is loaded, it stay on index.php page).

2nd PROBLEM : If I disable javascript to see what's happen for googlebot (for SEO). I can't load/reach the single.php page, it always stay on index.php. So single.php page can't be crawled by search engine (I suppose, but I'm not sure about this) . This behaviour is normal because I set in my .htaccess file, that "all this links" will be redirect to index.php .

I do this trick because without it pushstate loads single.php page when I refresh. And I don't want this behaviour. I want when I refresh it just load content from single.php into index.php container.

So my main problem (problem 2) is: I don't know how to write my script or my links in my php page in order to load content in my index.php file when I click, I refresh and I back/forward.

In normal behavior of pushstate, does on browser refresh, onpopstate can load content from a page into a container of an other page (load content from single.php into a container of index.php) ?

I hope that someone can help me and explain how it works. I have some difficulty to understand how it work with links.

Feb 19 in Others by Kichu
• 16,850 points
15 views

1 answer to this question.

0 votes
self.name= window.location.pathname;
window.location.replace(".");

Script for pushstate and hashbang fallback:

if(self.name){
    refreshdocumenttitle = document.title;
    refrestitle = self.name;
    refreshurl = self.name; 
    if (typeof(window.history.pushState) == 'function') {
        refrestitle = self.name.substring(1).replace(/-/g," ");
        refreshurl = self.name.replace("#!", "");
    }else {
        window.location.hash = '#!' + refreshurl.substring(1);
    }
    load_content(refrestitle, refreshurl);
}

$(document).on('click','.link', function(){
     link= $(this);
     if (!link.hasClass('current')) {
        $(".link").removeClass('current');
        link.addClass('current');
        $post_link = link;
        load_content($post_link.attr('title'),$post_link.attr('href'));
        return false;
    }
        return false;
}); 

window.onpopstate = function(event) {   
    $(".link").removeClass('current');
    url = window.location.hash;
    if (url != '') {    
            title = url.substring(2).replace(/-/g," ");
            url = "/" + url.replace("#!", "");
            load_content(title,url);
    }
    if (event.state) {
 load_content(event.state.title, window.location.pathname, true);
    } else {
        if (!self.name) {

            if (typeof refrestitle !== 'undefined') {
                pathname = window.location.pathname;
                    if (pathname == "/") {
                        document.title = refreshdocumenttitle;
                    }
            }           
            var stateObj = {
                title: document.title,
                url: window.location.pathname,
                };
            window.history.replaceState(stateObj,document.title,window.location.pathname);
            load_content(document.title, window.location.pathname, true);
        }       
    }   
    self.name= '';
}

$(window).on('hashchange', function() {
    if (typeof(window.history.pushState) !== 'function') {
        var hash = "/" + location.hash.replace("#!", "");
        if(window.location.hash) {
            load_content(hash.substring(1).replace(/-/g," "), hash);
        } else {
            load_content("", "")
        }
    self.name= '';
    }   
})
$(window).trigger('hashchange');

function load_content(title,url,skipHistory) {
    $.get(url,function (data) {
        document.title = title;
        var stateObj = {
            title: title,
            url: url
        };
        if (!skipHistory) {
            if (typeof(window.history.pushState) == 'function') {
                window.history.pushState(stateObj,title.replace(/-/g," "),url);
            }else {
                if( url != "") {
                    window.location.hash = '#!' + url.substring(1);
                }
            }
        }
        if(  window.location.hash != "" ||  window.location.pathname != "/" ) {
            $("#ajaxify_container").html("loading...");
            $("#ajaxify_container").load('single.php?page='+url.substring(1)+' #container-2');      
        } 
        else {
            $("#ajaxify_container").html("");       
        }
    });
}


use this code as a reference i found this code working 

answered Feb 20 by narikkadan
• 7,860 points

Related Questions In Others

0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
340 views
0 votes
1 answer

Yoast Seo breadcrumbs: How to add custom text to category and tag name

use this code  add_filter('wpseo_breadcrumb_single_link', 'filter_breadcrumbs_for_h1', 10, 2); function filter_breadcrumbs_for_h1($link_output, ...READ MORE

answered Feb 12 in Others by narikkadan
• 7,860 points
58 views
0 votes
1 answer

Create an seo and web accessibility analyzer

there are some tools which  are already ...READ MORE

answered Feb 12 in Others by narikkadan
• 7,860 points
49 views
0 votes
1 answer

AngularJS SEO - Once and for all

java script cant be or wont be ...READ MORE

answered Feb 14 in Others by narikkadan
• 7,860 points
21 views
0 votes
1 answer

What are the important meta tags I must put in my website? [closed]

Regular meta info <title>{{pageTitle}}</title> <meta charset="utf-8"><!-- html5 version ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
22 views
0 votes
2 answers

What is most SEO optimized image HTML code for?

What is most SEO optimized image HTML ...READ MORE

answered Feb 12 in Others by gdxxfgoidt
142 views
0 votes
1 answer

What is the max length of page titles for SEO?

google displays only 50-60 words of a ...READ MORE

answered Feb 14 in Others by narikkadan
• 7,860 points
21 views
0 votes
0 answers

SEO META Tags - HTML

i have registered my sited with google ...READ MORE

Feb 14 in Others by Kichu
• 16,850 points
15 views
0 votes
1 answer

What are canonical URLs and how do they affect your SEO?

canonical URLs are distinct URL used to ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
31 views
0 votes
1 answer

Yoast SEO remove og description and twitter description on certain page

try this out it wil help ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
41 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP