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

Я решаю, безопасно ли разрабатывать мое клиентское приложение в AngularJS с помощью pushState.

Я читал, что при использовании pushState в приложении AngularJS нам не нужно беспокоиться о Googlebot, потому что теперь он может выполнить достаточно JS для создания фрагмента HTML для себя. Но потом я задаюсь вопросом о Bing, Facebook и других ботах и ​​скребках. Учебники, которые я видел для создания AngularJS SEO-friendly, имеют дело с приложениями, использующими hashbangs (#!). Они не относятся ко мне, так как я не использую hashbangs.

Есть ли у кого-нибудь понимание этой проблемы? Каковы некоторые методы для обеспечения приложения AngularJS , использующего pushState, SEO-friendly и Social-scraper-friendly? Если вы пользуетесь услугами, такими как Seo4Ajax или prerender.io, я буду благодарен вам за ваши мысли.

Примечание.. Насколько я понимаю, при разработке одностраничных приложений за последние пару лет было необходимо отправить фрагменты HTML в поисковые роботы. Это было достигнуто за счет использования hashbangs и метатега, которые позволяют Google, Bing и Facebook знать, что при выполнении запроса необходимо заменить bang (!) На _escaped_string. На сервере, который вы указали для запросов с _escaped_string и доставляете соответствующий фрагмент HTML, используя инструмент для генерации фрагментов HTML, таких как phantomJS.

Теперь, когда у нас есть pushState, я не вижу, как мы указываем javascript-less ботам какую часть URL-адреса переписываем с помощью _escaped_string или даже если это необходимо. У меня возникли проблемы с поиском любой информации за пределами "у вас будет сайт с Google" ).

Вот некоторые другие вопросы SO, которые похожи, но остались без ответа.
Angularjs против SEO против pushState
.htaccess для ботов SEO, сканирующих одностраничные приложения без hashbangs

Вот решение, которое я разместил в этом вопросе и рассматриваю для себя в случае, если я хочу отправить фрагменты HTML в боты. Это было бы решением для бэкэнд 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 будет делать все остальное.

Ответы