如何使用html5 pushstate方法将动态页面索引到Google？

Question

我正在构建一个完全由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");
            }
          }
        }); 
}

Ajax函数返回以json格式构建页面所需的所有数据，然后初始化使用该json数据构建页面的自定义插件。

正如您在本“ 实时示例”中所看到的那样，所有这些工作都很好，包括浏览器历史记录（前进和后退）。 但是这是我的问题...当页面完全加载时，当我查看页面源代码时，主容器仍然为空。 当我尝试以Google bot的身份获取网页时，它也是空的，我很确定这两个是相关的。

正如您在该示例中看到的那样，使用与我几乎相同的代码，单击链接时源已更改，它也更改了页面内容，但是没有重新加载页面。 我的问题是，我在这里想念的是什么？如何实现同样的效果？ 我是否缺少一些php代码或什么？ 在过去的几天里，我一直在为此苦苦挣扎，我已经尝试了所有方法，但无法使其正常工作。

注意：目前只有首页和项目链接正在工作...

非常感谢您的所有回复！

Answer 1

pushState您使用Ajax更新页面内容时， pushState允许您更改URI的本地部分。

对于以这种方式创建的每个URI，允许服务器构建相同的页面而不依赖于JavaScript。

这将：

• 访客通过深层链接进入网站时可获得更好的性能
• 允许网站在不使用JavaScript的情况下工作（包括对于搜索引擎机器人而言）

Answer 2

为了补充@Quentin的答案，您需要在PHP中标识是否通过ajax加载了内容。 如果不是，则必须显示所请求页面的完整内容，包括页眉，页脚和页面内容。