Angularjs против SEO против pushState

Прочитав этот поток, я решил использовать pushstate api в моем приложении angularjs, который полностью основан на API (независимый интерфейс и независимый бэкэнд).

Вот мой тестовый сайт: http://huyaks.com/index.html

Я создал карту сайта и загрузился в инструменты Google для веб-мастеров.

Из того, что я вижу:

Google проиндексировала главную страницу, указала динамическую навигацию (круто!), но не указала любой из динамических URL-адресов. Пожалуйста, посмотрите.

Я рассмотрел пример сайта, указанный в соответствующем потоке:

http://html5.gingerhost.com/london

Насколько я вижу, когда я напрямую обращаюсь к определенной странице, содержимое, которое считается динамическим, возвращается сервером, поэтому оно индексируется. Но это невозможно в моем случае, так как мое приложение полностью динамично.

Не могли бы вы посоветовать, какая проблема в моем конкретном случае и как ее исправить?

Спасибо заранее.

Примечание: этот вопрос касается способа pushState. Пожалуйста, не советуйте мне использовать скрытый фрагмент или 3-сторонние партийные услуги, такие как prerender.io. Я хотел бы выяснить, как использовать этот подход.

ОТВЕТЫ

Ответ 1

Очевидно, Квентин не читал сообщение, о котором вы говорите. Весь смысл http://html5.gingerhost.com/london заключается в том, что он использует pushState и доказывает, что для пауков не требуется статический html.

"Этот сайт использует HTML5 wizrdry [sic] для загрузки" фактического содержимого "asynchronusly [sic] в остальную часть кода: это делает его более быстрым для пользователей, но он все еще полностью индексируется поисковыми системами".

Извращенная орфография в стороне, эта демонстрация показывает, что асинхронно загруженное содержимое индексируется.

Ответ 2

Насколько я могу видеть, когда я напрямую обращаюсь к определенной странице, содержимое, которое считается динамическим, возвращается сервером

Это не так. Вы загружаете пустую страницу с помощью некоторого JavaScript, и что JavaScript сразу загружает контент, который должен отображаться для этого URL-адреса.

Вам нужно, чтобы сервер создавал HTML-код, который вы получаете после запуска JavaScript, и не зависит от JS.

Ответ 3

Google интерпретирует страницы Angular, как вы можете видеть на этой быстрой демонстрационной странице, где название и мета-описание отображаются правильно в результат поиска.

Весьма вероятно, что если они вообще интерпретируют JS, они интерпретируют это достаточно для тщательного анализа ссылок.

Тот факт, что некоторые страницы не индексируются, объясняется тем, что Google не индексирует каждую страницу, которую они анализируют, даже если вы ее добавите на карту сайта или отправить ее для индексирования в средствах для веб-мастеров. На демонстрационной странице как регулярная, так и связанная с областью ссылка в настоящее время не индексируются.

Обновление: поэтому, чтобы ответить на вопрос конкретно, нет проблемы с pushState на тестовом сайте. Эти страницы просто не содержат добавочного контента для Google. (См. Общие общие рекомендации).

Ответ 4

Срей, недавно я открыл тот же вопрос в другом потоке, и мне сообщили, что роботы Googlebot и Bingbot индексируют SPA, которые используют pushState. Я не видел примера, который гарантирует мою уверенность, но это то, что мне говорят. Чтобы затем закрыть ваши базы в отношении Facebook, используйте открытые метатеги.

Я все еще не уверен в продвижении без отправки фрагментов HTML ботам, но, как и вы, я не нашел учебника, рассказывающего, как это сделать, используя pushState или даже предлагая его. Но вот, как я думаю, он будет работать с Symfony2...

  • Используйте prerender или другую службу для создания статических фрагментов всех ваших страниц. Храните их в любом месте, доступном вашему маршрутизатору.

  • В вашем файле маршрутизации Symfony2 создайте маршрут, соответствующий вашему SPA. У меня есть тестовый SPA, работающий на localhost.com/ng-test/, поэтому мой маршрут будет выглядеть следующим образом:

    # Adding a trailing / to this route breaks it. Not sure why.
    # This is also not formatting correctly in StackOverflow. This is yaml.
    NgTestReroute:
    ----path: /ng-test/{one}/{two}/{three}/{four}
    ----defaults:
    --------_controller: DriverSideSiteBundle:NgTest:ngTestReroute
    --------'one': null
    --------'two': null
    --------'three': null
    --------'four': null
    ----methods: [GET]

  • В вашем контроллере Symfony2 проверьте пользовательский агент, чтобы узнать, является ли он googlebot или bingbot. Вы должны сделать это с помощью приведенного ниже кода, а затем использовать этот список для целевых ботов, которые вас интересуют (http://www.searchenginedictionary.com/spider-names.shtml)...

    if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), "googlebot"))
    {
      // what to do
    }

  • Если ваш контроллер обнаружит совпадение с ботом, отправьте ему фрагмент HTML. В противном случае, как и в случае с моим приложением AngularJS, просто отправьте пользователя на индексную страницу, а Angular будет делать все остальное.

Кроме того, на ваш вопрос был дан ответ? Если у вас есть, выберите один, чтобы я и другие могли рассказать, что сработало для вас.

HTML-фрагменты для приложения AngularJS, использующего pushState?