如何索引动态页面谷歌使用HTML5 pushState的方法?(How to index dynam

2019-08-03 06:50发布

我建立一个全面的jQuery驱动的网站,所以我加载的所有页面动态地使用Ajax实现页面之间的过渡看中并最大化的用户体验。 这里是我的javascript代码:

$(function() {

    var path = _.compact(location.pathname.split("/"));
    if(path.length<2){
        path = 'home' 
    }else{
        path = path[path.length-1];
    }
    activepage = path;

    $('.nav a').click(function(e) {
        href = $(this).attr("href");            
        loadContent(href);      
        // HISTORY.PUSHSTATE
        window.history.pushState('', 'New URL: '+href, href);   
        e.preventDefault();                     
    });

    // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
    window.onpopstate = function(event) {
        var path = _.compact(location.pathname.split("/"));
        if(path.length<2){
            path = 'home' 
        }else{
            path = path[path.length-1];
        }           
        loadContent(path);
    };

});



function loadContent(url){  
        // USES JQUERY TO LOAD THE CONTENT
        var adresa = absurl + "ajax/get_content";       
        $.ajax({
          url: adresa,
          contentType: 'application/json',
          data: { url: url },
          success: function(data) {
            switch(url)
            {
                case "projects": $.projects({ data : data }); $.projects.init();
                break;
                case "home": $.homePage({ data : data }); $.homePage.init();
                break;
                default: console.log("nista");
            }
          }
        }); 
}

阿贾克斯函数返回打造JSON格式网页所需的所有数据,然后我初始化它建立使用JSON数据的页面我的自定义插件。

你可以在此看到所有这些工作完全正常活生生的例子 ,包括浏览器历史记录(向后和向前)。 但这里是我的问题......当页面完全加载当我看网页的源主容器保持为空。 此外它的空当我尝试抓取网页的谷歌机器人,我敢肯定,这两个是相关的。

正如你可以看到在这个例子与几乎相同的代码像我有,当你点击链接的源被改变,它改变了页面内容为好,但没有重新加载页面。 我的问题是,我在这里失踪,以及如何达到同样的效果? 我失去了一些PHP代码还是什么? 我与这在过去几天里挣扎,我用尽了一切,我不能使它发挥作用。

注意:只有家庭和项目链接的工作现在...

非常感谢所有答复!

Answer 1:

pushState允许您更改URI的本地部分,当你Ajax更新页面内容。

对于每一个URI您创建的方式,让服务器建立在同一页上没有任何JavaScript的依赖。

这将:

  • 提供更好的性能,当访问者通过以下深层链接进入网站
  • 允许网站没有JavaScript的工作(包括搜索引擎机器人)


Answer 2:

补充@昆汀的答案,你需要的,如果内容被通过AJAX或没有加载在PHP来识别。 如果不是,你必须显示被请求的网页的全部内容,包括页眉,页脚和页面的内容。



文章来源: How to index dynamic pages to google using html5 pushstate method?