Как индексировать динамические страницы в Google, используя метод pushstate html5?

Я создаю полностью веб-сайт с поддержкой 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, и я почти уверен, что эти два связаны.

Как вы можете видеть в этом примере с почти таким же кодом, как у меня, источник изменяется при нажатии на ссылки, а также меняет содержимое страницы, но без перезагрузки страницы. У меня вопрос, что мне здесь не хватает и как добиться того же эффекта? Я пропускаю какой-то код php или что? Я боролся с этим в течение последних нескольких дней, я попробовал все, и я не мог заставить это работать.

Примечание: пока работают только домашние и проектные ссылки...

Большое спасибо за все ответы!

Источник

2 ответа

Решение

pushState позволяет изменить локальную часть URI при обновлении содержимого страницы с помощью Ajax.

Для каждого URI, который вы создаете таким образом, разрешите серверу создавать одну и ту же страницу без какой-либо зависимости от JavaScript.

Это будет:

  • Повышайте эффективность, когда посетители заходят на сайт, переходя по глубокой ссылке
  • Разрешить сайту работать без JavaScript (в том числе для роботов поисковых систем)
Источник

В дополнение к ответу @Quentin вам нужно определить в PHP, загружается ли контент через ajax или нет. Если это не так, вы должны отобразить полное содержимое запрашиваемой страницы, включая верхний и нижний колонтитулы и содержимое страницы.

Источник
Другие вопросы по тегам