SEO и AngularJS: сканирование, индексация и рендеринг

1. предпосылка
2. Основы SEO с AngularJS
3. Что меняется относительно обычной HTML-страницы?
4. Основы: что мы знаем о GoogleBot и JavaScript
5. Перенаправления, ссылки и время выполнения JavaScript
6. 1. Googlebot следит за редиректом в JavaScript
7. 2. Googlebot переходит по ссылкам в JavaScript
8. 3. Динамически генерируемый контент
9. 4. Googlebot не выполняет все события
10. 5. Googlebot имеет максимальное время ожидания для выполнения JavaScript
11. Старая схема сканирования AJAX (устарела)
12. Процесс и объяснение
13. Серверная сторона рендеринга является обязательной
14. 4 разных подхода к SEO с AngularJS
15. 1. Предварительный рендеринг с PhantomJS - самый элегантный метод
16. 2. Продолжите со старой директивой по сканированию
17. Phantom.js и Prerender.io
18. Хэшбан или нет?
19. Канонический тег
20. Настройте среду AngularJS
21. Протестируйте и подтвердите реализации
22. супер секрет
23. Ресурсы и идеи

предпосылка

В сентябре, когда я был в море в полной релаксации, Роберто позвонил мне, другу, с которым я работаю:

Это была первая реакция на AngularJS: D

Мой подход был очень осторожным, я не чувствовал себя готовым. Инфраструктура, которую я должен был проанализировать, была сложной, клиенту требовался более высокий уровень рекомендаций, чем то, что я мог предложить на AngularJS (как говорится в эссе, чем больше вы знаете и тем больше понимаете, что не знаете). С энтузиазмом и самоотдачей я начал читать, чтобы ответить на все сомнения, я потратил два месяца на заполнение пробелов, изучая примеры внедрения и оптимизации с AngularJS. Как только я углубил навыки, в которых я нуждался, я сделал SEO аудит веб-сайта, и вместе с командой разработчиков мы исправили и исправили все технические проблемы, которые мешали правильной индексации сайта.

На следующем изображении показано увеличение показов в Google после технической оптимизации: раздел сайта, разработанный в AngularJS, вырос с 1800 показов в день до почти 14 000 . С хорошей работой вы можете получить важные результаты даже с AngularJS.

Это руководство является результатом опыта, полученного при работе над этим проектом в AngularJS 1.0, и завершает выступление, которое я провел в Search Marketing Connect 2016

Технологии для разработки приложений и сайтов, таких как угловатый (технология, управляемая Google), реагировать (технология, управляемая Facebook) е Angular 2.0 они медленно размножаются. С точки зрения SEO, понимание того, как поисковые системы взаимодействуют с этими технологиями, позволяет вам работать над новыми и интересными проектами .

Вы SEO консультант ? Вам нужно оптимизировать сайт, разработанный на AngularJS, и не знаете с чего начать? Есть несколько способов получить индексируемый сайт. Продолжайте читать это руководство, и, в конце концов, у вас могут появиться немного более четкие идеи.

Основы SEO с AngularJS

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

Совет, который вы нашли в рекомендациях Google для веб-мастеров, состоял в том, чтобы сделать контент масштабируемым, доступным для поисковых систем, избегая только контента JavaScript . Эта точка зрения изменилась, Google пытается отображать сайты, которые широко используют JavaScript. Однако результаты не всегда являются желаемыми.

Что меняется относительно обычной HTML-страницы?

Подумайте о классической HTML-странице, похожей на ту, которую вы сейчас читаете. HTML-код, который вы просматриваете, представляет собой шаблон, созданный и настроенный некоторыми функциями файлов PHP и поисками в базе данных mySQL. HTML-код был скомпилирован на веб-сервере, когда вы запросили страницу, а затем был предоставлен вам через HTTP (S).

При наличии уровней кэша, если кто-то еще запрашивал эту страницу перед вами, вполне вероятно, что вы читаете кэшированную копию, созданную службой CDN, прежде чем попасть на эту страницу. Прямо сейчас вы читаете веб-страницу, которая по сути является HTML-файлом, который обслуживается веб-сервером. Он был доставлен после того, как вы отправили HTTP-запрос GET, и теперь он на вашем ПК. Если вы хотите увидеть другую веб-страницу, мой веб-сервер будет рад сделать ее и отправить вам. Если вы хотите взаимодействовать со страницей, возможно, заполнив форму, вы отправите запрос POST. Вот как работает интернет.

Это не совсем то, что происходит, когда вы попадаете на веб-страницу, интегрированную в JS-фреймворк, такой как AngularJS . По сути, когда вы делаете запрос к сайту в AngularJS, содержимое, которое вы видите, является результатом манипулирования DOM с помощью Javascript, которое произошло в вашем браузере . Конечно, между клиентом и сервером есть несколько HTTP-вызовов (с использованием службы http $ от AngularJS), но большую часть тяжелой работы выполняет именно клиент.

• Браузер отправляет HTTP-запрос
• База данных контактов веб-сервера
• Веб-сервер компилирует HTML
• Веб-сервер предоставляет HTML + CSS

Вызов страницы AJAX

• Браузер отправляет вызов Javascript
• Ajax Engine интерпретирует вызов и отправляет HTTP-запрос
• База данных контактов веб-сервера
• Веб-сервер предоставляет JavaScript
• Ajax Engine интерпретирует ответ JavaScript
• Создать HTML + CSS
• Изменить DOM

Рендеринг страниц на стороне клиента, асинхронный обмен данными, обновления содержимого без обновления страницы, создание шаблона HTML - все это полезные вещи, которые привели эти платформы в JS. По этой причине многие разработчики выступают за его использование СРЕДНИЙ стек (Mongo, Express, Angular, Node), относительно просто и быстро разрабатывать прототипы расширенных приложений. Однако, если вы хотите получать органический трафик, важно с помощью этих технологий создать структуру, доступную для поисковых систем.

Меня поражает то, что некоторые веб-разработчики настаивают на разработке веб-сайтов на AngularJS, даже если в этом нет необходимости , например, для брошюр и веб-сайтов с одностраничными страницами (часто задаваемые вопросы, целевые страницы и т. Д.).

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

посмотреть этот сайт или это , оба разработаны в AngularJS. Содержимое, которое вы видите, отображается в Javascript, и по этой причине, если вы посмотрите на исходный код (CTRL + U в Google Chrome), вы увидите необычно небольшое количество HTML, намного меньше, чем вы ожидаете от просмотра отображаемого результата. Вот пример:

Это весь контент, который предоставляется паукам на сайте в AngularJS, иногда вы найдете еще меньше. Вот почему вы получаете пустую страницу при посещении сайта с отключенным JavaScript в браузере. Тег ng-app, который вы обнаруживаете, открывая HTML-страницу, создает магию: он говорит AngularJs манипулировать DOM.

ng-App: директива в модуле AngularJS ng, которая указывает платформе, какой элемент DOM должен будет использовать в качестве root для нашего приложения. В показанном выше случае тег ng-App действует на всю страницу (тег html), но в более общем случае его можно вставить внутри тега или даже внутри одного элемента div.

Основы: что мы знаем о GoogleBot и JavaScript

В прошлом году Google добилась прогресса, улучшив свои возможности по сканированию веб-страниц и сайтов, разработанных в Javascript. По сути Googlebot отображает веб-страницы, как если бы это был браузер ,

И тогда мы также делаем визуализация контента , И это то, о чем Google много говорил в последние пару лет. Это новое для нас за последние несколько лет. JavaScript и CSS очень важны для нас. 28 , 29 , 30 , 31 , 32 , 33 ] на ваших страницах.

Как работает Google - Пол Хаар (Инженер-программист в Google) на SMX, апрель 2016 г.

В цитате есть ссылки на некоторые подробные статьи, в ссылке № 29 Адам Одетт описывает тесты индексации в Google, выполненные с помощью перенаправлений и ссылок в JavaScript. В проектах, которые произошли со мной, я смог подтвердить его соображения, получив те же результаты, которые я опишу в следующем абзаце.

Перенаправления, ссылки и время выполнения JavaScript

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

1. Googlebot следит за редиректом в JavaScript

Робот Googlebot рассматривает перенаправления JavaScript с помощью функции window.location так же, как перенаправление 301 с точки зрения индексации, с абсолютным или относительным URL.

2. Googlebot переходит по ссылкам в JavaScript

Сюда входят URL-адреса, связанные с атрибутом href и вставленные в классический тег «a», а в некоторых случаях даже внешние по отношению к тегу «a».

Также в углубленной статье № 29 - Автор говорит, что Googlebot сканировал URL-адреса, которые были сгенерированы системой только после обработчика события onchange, в данном случае это было движение мыши (onmousedown и onmouseout). В том же тесте автор утверждает, что заметил, что робот Google следит за URL-адресами, сгенерированными при выполнении переменных в JavaScript. В этом примере он объединял строку символов, которая генерировала URL-адрес только после его выполнения.

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

3. Динамически генерируемый контент

Googlebot может индексировать метатеги (заголовок и описание), изображения и текстовое содержимое, динамически вставляемое в HTML-страницу (функция document.writeIn), независимо от того, находится ли содержимое на той же HTML-странице или во внешнем файле JavaScript. Важно не блокировать эти файлы с помощью robots.txt.

4. Googlebot не выполняет все события

Несмотря на очевидные улучшения Google в сканировании страниц в JavaScript, все еще необходимо манипулировать URL-адресами, чтобы превратить их в реальные ссылки внутри тега a . Google может интерпретировать элементы макета и общие элементы веб-страницы, но он не пытается запускать события в JavaScript, чтобы увидеть, что происходит. Для управления URL-адресами вам необходимо предоставить роботу Google «классическую» ссылку, по которой нужно следовать. Используя другие методы, вы рискуете, что робот Googlebot проигнорирует эти элементы или даже вообще прекратит сканирование страницы.

5. Googlebot имеет максимальное время ожидания для выполнения JavaScript

Похоже, что робот Googlebot не индексирует содержимое, для визуализации которого требуется более 4 секунд , или содержимое, для которого требуется выполнение события через внешнюю ссылку на тег a (см. Предыдущий пункт).

Старая схема сканирования AJAX (устарела)

14 октября 2015 Google объявил, что схема сканирования, которую робот Googlebot использовал с AJAX, устарела, и они устарели в старой «Директиве по сканированию AJAX». Затем было отмечено, что, несмотря на это объявление, Google по-прежнему уважает старую директиву по сей день.

Процесс и объяснение

Пример URL

Важно: если вы работаете на сайте, который использует параметр? _escaped_fragment_ =, убедитесь, что функциональность рендеринга работает хорошо.

Как видно из диаграммы, старая директива сканирования требовала предварительного рендеринга страниц. Сейчас Google в основном говорит, что мы также можем обойтись без него.

Можем ли мы оставаться спокойными тогда? Нет, я бы не сказал. Предварительный рендеринг, на мой взгляд, нам нужен по разным причинам .

Серверная сторона рендеринга является обязательной

На мой взгляд, предоставление паукам поисковых систем HTML-снимков для предварительного рендеринга страниц - лучший выбор на дату, когда я пишу. Я часто ссылаюсь на сегодняшний день - декабрь 2016 года, потому что завтра МО будет гораздо более эффективным в этой области.

Может ли Google отображать и сканировать сайты JS? Да или хотя бы попробуй. Это, однако, не является гарантией того, что результат будет оптимизирован для SEO или идеально оптимизирован. Требуется техническая экспертиза SEO, особенно во время тестов реализации. Это гарантирует, что сайт правильно сканируется роботом Googlebot, имеет правильную структуру и что содержимое написано с правильными ключевыми словами. Финансы компании будут вам благодарны, на самом деле затраты будут ниже по сравнению с пробегом для покрытия.

Могут ли другие поисковые системы отображать и сканировать сайты JS? Я мог бы сказать NI, но я предпочитаю сказать НЕТ. Ваш целевой рынок - Россия и вы живете на яндекс трафике? Рендер или умереть. Ценен ли трафик с Baidu для ва��? Рендер или умереть. Bing? Уже лучше, но не на уровне Google, сделать или умереть.

Я отображаю свои страницы или нет? Чтобы избежать проблем с индексацией, я считаю, что лучше сохранять полный контроль над тем, что «отображается», обслуживая HTML-снимки Google , которые представляют собой предварительно обработанную и скомпилированную версию ваших страниц . Таким образом, вы сможете применять все классические правила SEO, и вам будет легче обнаруживать и диагностировать проблемы во время тестов. Также помните, что в этой статье мы говорим о Google, самой продвинутой поисковой системе, другие поисковые системы получают значительно меньшие результаты в рендеринге JS.

А потом ... Я часто смотрю, как другие, "хорошие", и большинство наиболее важных веб-сайтов, разработанных с AngularJS (я не говорю, что все они не кажутся тривиальными, но делаю, как я это сказал), они используют функцию рендеринга на стороне сервера , давайте зададим себе вопрос и дадим нам ответ .

Преимущества предварительного рендеринга:

• Лучше иметь полный контроль над тем, что «отображается», предоставляя Google снимки HTML
• На SNAPSHOT HTML мы работаем над SEO классическим способом
• Должно быть легче обнаруживать и диагностировать проблемы во время SEO-тестов.
• Помните: у Google есть потенциал для рендеринга JS, но другие MoR борются

4 разных подхода к SEO с AngularJS

Для оптимизации сканирования и индексации веб-сайта, разработанного с помощью AngularJS, есть 4 альтернативы, я объясняю их в порядке от самого элегантного до самого простого.

1. Предварительный рендеринг с PhantomJS - самый элегантный метод

• Создавайте снимки ваших страниц, используя PhantomJS (безголовый браузер) и создает пользовательский уровень кэша
• Не используйте #! в URL
• Не используйте escaped_fragment в URL
• Убедитесь, что на каждой странице есть дружественный URL с HTML5 History API (так что без #!)
• Введите все дружественные URL-адреса в sitemap.xml и отправьте их в GSC
• Вместо того, чтобы обслуживать снимки, когда параметр? _escaped_fragment_ = включен в запрошенный URL-адрес, вы предоставляете снимок HTML, когда дружественный URL-адрес (канонический) страницы запрашивается пользовательским агентом поисковой системы, таким как GoogleBot
• Пользователи (браузеры) получают страницу без предварительного рендеринга
• Реализовать канонический тег rel

Веб-сайт redbullsoundselect.com следует этой технике на дату, которую я пишу.

2. Продолжите со старой директивой по сканированию

• Вы держите параметр? _escaped_fragment_ = для предоставления визуализированных снимков. Робот Google все еще обрабатывает запросы по этому параметру
• Пользователи (браузеры) получают страницу без предварительного рендеринга на Pretty URL (с hashbang )
• Предоставьте в Google Search Console файл sitemap.xml со всеми красивыми URL-адресами (с hashbang )
• Реализуйте канонический тег rel правильно (с помощью hashbang )

3. Пусть гугл рендер - метод "надежда на БОГА"

• Сделайте рендеринг AngularJS от Google без какого-либо предварительного рендеринга и посмотрите, что получится. Другие поисковые системы будут сожалеть
• Используйте API истории HTML5, чтобы удалить хэш-банг из URL-адреса, видимого в браузере, и предоставьте Google Search Console файл sitemap.xml со всеми дружественными URL-адресами (канонами). Большинство разработчиков сходятся во мнении, что иметь хэш-банг в URL - не самый лучший вариант , это усложняет SEO сайта.
• Если вы не хотите использовать URL-адреса hashbang, но хотите сообщить Google, что ваш сайт содержит AJAX, вам нужно использовать директиву AngularJS ng-app

4. Anglar 2.0

• Не разрабатывайте ничего в AngularJS 1.x
• Переключитесь прямо на Angular 2.0. Angular 2.0 изначально содержит функции рендеринга сервера, результаты которых аналогичны результатам, полученным с помощью React
• Чтобы узнать больше о законах это руководство

Как сделать SEO Friendly сайтом в React: для начала вы можете прочитать это руководство , Выбор остается хорошим или плохим, предоставляя предварительно обработанный контент поисковым системам и пользователям. Лично я не пробовал, но я читал, что он используется WebPack или Browserify изменить JS на модули npm и запустить его на сервере и клиенте. Альтернатива - позволить Googlebot индексировать сайт самостоятельно.

Решаете ли вы использовать? _escaped_fragment_ = или меньше, есть много других вещей, которые нужно учитывать, и работа будет долгой и сложной. По этой причине я рекомендую использовать ReactJS или Angular 2.0 Universal , поскольку в них уже включены функции рендеринга сервера . Посмотрите видео презентацию.

Phantom.js и Prerender.io

PhantomJS позволяет вам выполнять операции, которые обычно выполняются с браузером, без отображения самого браузера. На самом деле это так называемый браузер без заголовка , который позволяет манипулировать JavaScript, CSS, JSON, Ajax другими клиентскими веб-технологиями из командной строки без какой-либо визуализации на экране.

Основанный на WebKit, PhantomJS является многоплатформенным инструментом и может использоваться во всех тех контекстах, где вам нужно автоматизировать типичные действия веб-браузера, но не только. Чтобы привести некоторые примеры, его можно использовать для операций веб-очистки, для автоматизации тестов на веб-сайтах и ​​в приложениях, для мониторинга сети, а также для рендеринга в SVG, взаимодействия с веб-службами и даже для создание простого веб-сервера.

Сервер PhantomJS должен быть установлен на том же компьютере, на котором размещен веб-сервер, и работать на другом порту. В качестве альтернативы с PhantomJS существуют внешние службы рендеринга, такие как Prerender.io , Этот платный сервис (бесплатно до 250 кэшированных страниц) особенно полезен, когда веб-сервер не может управлять отображением многих страниц с приемлемым временем ответа .

Хэшбан или нет?

Для SEO очень важно понять, как это может помочь поисковым системам сканировать JavaScript-зависимые веб-сайты. Если вы достигнете этой цели, вы хороший технический SEO. Как мы видели в начале, и Google, и Bing поддерживают директиву, которая позволяет веб-разработчикам предоставлять HTML-снимки содержимого в JS через измененную структуру URL.

В частности, я имею в виду параметр hashbang, который заменяют поисковые системы? _escaped_fragment_ = в URL.

Я повторяю процесс, потому что это важно понять.

Представьте, что на вашем сайте Angular есть URL-адреса hashbang:

Паук поисковой системы распознает hashbang и автоматически запрашивает URL-адрес на веб-сервере? _escaped_fragment_ =:

Распознает ли веб-сервер запрос поисковой системы, поскольку только им требуются URL-адреса? _escaped_fragment_ = и предоставляет предварительно обработанный снимок страницы, предварительно скомпилированный файл HTML. Очевидно, вы должны убедиться, что предварительный рендеринг работает правильно на вашем веб-сервере, и это обычно не происходит случайно;)

Большинство разработчиков, с которыми я имел дело, используют PhantomJS для рендеринга страниц в AngularJS.

Если вы можете правильно отобразить ваши страницы в формате HTML, единственное, что вам нужно проверить, это то, что все запросы содержат? _escaped_fragment_ = перенаправляются в каталог кэша вашего веб-сервера. Этот процесс очень технический, я предлагаю вам прочитать это руководство ,

Я не хочу использовать hashbang на моем сайте Angular
Посмотрите в заголовке тега сайта Redbull, на который я ссылался выше - https://www.redbullsoundselect.com/, вы увидите новый метатег, неизвестный тем, кто никогда не работал с Angular, фундаментальный метатег, если вы не используете hashbang .

Прокрутите другие метатеги, не думаете ли вы, что со всеми этими скобками это скорее катастрофа, чем что-либо еще? Вы ошибаетесь, эти скобки будут заполнены JS кодом HTML. Разработчик этого сайта был очень хорош, он установил URL без хэш-бенга , и чтобы предупредить поисковые системы, он вставил «мета-фрагмент» в тег head. Предлагает ли тег фрагмента спайдерам поисковой системы запросить снимок HTML в URL с параметром? _escaped_fragment_ =.

Примечание. Для создания дружественного URL-адреса (URL-адреса без hashbang ) используйте службу определения местоположения AngularJS $ и API истории HTML5.

Канонический тег

Всегда следует вводить тег Canonical rel, любую техническую настройку, которую вы выберете. Важно то, что если вы решите использовать этот тег, убедитесь, что он правильный. Указание неверного URL-адреса в теге Canonical может повлиять на индексацию всего сайта.

В теге Canonical rel введите Pretty URL или URL-адреса, используемые пользователями и видимые на сайте.
Помните: красивые URL - это адреса с:

• hashbang
• Дружественный URL, если вы использовали API истории HTML5 для перезаписи URL без #!

Никогда не вводите URL ��? _escaped_fragment_ = в теге relical Canonical и в файле Sitemap.xml. Другая распространенная ошибка, которую следует избегать, - всегда указывать домашнюю страницу в теге Canonical.

Настройте среду AngularJS

Для настройки среды разработки вы можете использовать Yeoman, инструмент для создания приложений лесов , которое является универсальным решением для разработки и тестирования приложений AngularJS. Откройте терминал и введите:

Примечание: я использовал имя «testangular» для папки, но вы можете назначить имя, которое вы предпочитаете.

Дождитесь начала процесса установки, ответьте на различные вопросы, которые предлагает система, выберите, следует ли включить Bootstrap и любой другой модуль AngularJS. После завершения процесса у вас будет настроенная среда разработки. С терминала типа grunt сервер и браузер должны открыться с шаблоном Yeoman по умолчанию. Отсюда вы можете начать создавать SPA (одностраничное приложение), но давайте продолжим создавать HTML-снимок страницы AngularJS.

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

В папке вы найдете два важных файла:

• angular-seo.js , который должен быть помещен в папку "/ testangular / app"
• angular-seo-server.js , который должен быть расположен в папке "/ testangular" или в корне вашего приложения (папка, содержащая файл Gruntfile.js )

Примечание: В репозитории GitHub вы найдете полные инструкции.

Установка должна гарантировать, что система использует два порта:

• Порт приложения: для управления приложением
• Порт снимка: для управления экземпляром приложения на PhantomJS

Запросы от не-ботов обслуживаются портом приложения (независимо от того, что), в то время как запросы от ботов и поисковых систем обслуживаются в предварительно отрендеренном HTML-портом через моментальный снимок. Следующие шаги:

• сообщить приложению о включении индексации по паукам
• включить модуль SEO
• сказать приложение, чтобы предупредить вас, когда он закончил рендеринг
• установить и запустить PhantomJS
• уведомить поисковые системы, введя метатег фрагмента на странице index.html см выше , пауки будут искать снимок HTML в URL ��? _escaped_fragment_ =

Теперь откройте файл app.js и найдите включение модуля в объявление. В любом случае, вам нужно включить модуль SEO, вставленный в файл angular-seo.js (который мы включили в папку testangular / app. Например, выражение выглядит так:

Теперь вам нужно определить, как будет отображаться HTML, вызывая функцию $ scope.htmlReady (), в тот момент, когда вы знаете, что HTML-страница закончила загрузку. Это зависит от того, как вы организовали свои контроллеры, но обычно это делается в конце основного контроллера. Например, с контроллером, включенным в Yeoman , файл main.js выглядит следующим образом:

Наконец, вы должны включить файл angular-seo.js в свой файл index.html, вниз, где правильно вставить контроллеры:

Вы завершили настройку приложения, теперь установите и настройте PhantomJS .

В командной строке введите npm install phantomjs. После завершения процесса установки перейдите в корневой каталог (каталог, содержащий файлы angular-seo.js и angular-seo-server.js ) и выполните эту команду:
phantomjs --disk-cache = no angular-seo-server.js 9090 http://127.0.0.1:9000

Команда активирует сервер PhantomJS без кэширования на диске (пока что он установлен ^^), активен на порту 9090. Порт, используемый PhantomJS, должен обязательно отличаться от порта, используемого вашим приложением. Дверь установлена ​​в родном "хрюканье" Йомана. Другими словами, yo angular предлагает возможность запустить сервер grunt, который устанавливает веб-сервер на localhost для тестирования приложения на порту 9000.

• PhantomJS работает на порту 9000 и прослушивает запросы на порту 9000
• если в запросах вместо хештега содержится? _escaped_fragment =, PhantomJS предварительно отображает страницу и передает ее запрашивающему, который является сканером .
• когда запросы содержат URL с хэш-бэнгом, это означает, что запросчик является человеком (браузером) и затем обходит PhantomJS.

Теперь, когда PhantomJS активен, он запускает сервер разработки grunt server.

• Сервер разработки имеет адрес 127.0.0.1 с портом 9000 (или localhost в зависимости от того, как вы предпочитаете его называть)
• Второй веб-сервер с портом 9090

URL-запросы ��? _escaped_fragment_ = чтобы они были включены в PhantomJS. URL ��? _escaped_fragment_ = не должен обслуживаться главным сервером, прослушивающим порт 80. Su Nginx Вы можете использовать это правило:
if ($ args ~ escaped_fragment) {# Прокси для экземпляра PhantomJS здесь}

Протестируйте и подтвердите реализации

После того, как вы протестировали и проверили предварительный рендеринг с помощью сканера, вы можете переключиться в «классический SEO» режим, оптимизируя обычные аспекты HTML-сайта, который мы уже знаем. Но сначала нужно убедиться, что предварительный рендеринг работает отлично. Для теста вы можете использовать командную строку и запустить (если вы локальный):

curl 'http: // localhost: 9090 /? _escaped_fragment_ =

Веб-сервер должен показать вам снимок HTML домашней страницы (адрес «/»). Или же найдите сканер и установите консоль поиска Google. Необходимых инструментов мало, но они фундаментальны:

• Используйте Fetch As Google
• Проверьте кеш Google
• Используйте консоль поиска Google
• Сканирование сайта с помощью JS дружественного сканера

Как я всегда говорю: «К счастью, есть Screaming Frog», сканер, способный сканировать страницы в AJAX. Искатель AJAX соответствует рекомендациям AJAX, это означает, что всякий раз, когда он находит хэш-банг , он запрашивает URL ��? _escaped_fragment_ = - от Pretty URL до Ugly URL, чтобы получить страницу, отображаемую веб-сервером. Для сканирования сайта с помощью Screaming Frog загрузите sitemap.xml ( как мне это найти ) и введите его в режиме списка. Сканер эмулирует поведение поисковых пауков: он находит hasbang и требует, чтобы версия Ugly URL имела предварительную визуализацию HTML-страницы веб-сервером.

Для полного руководства на итальянском языке Screaming Frog я отсылаю вас здесь ,

Убедитесь, что вы URL ��? _escaped_fragment_ = ответить код состояния 200. Как упомянуто выше, основной проблемой этой платформы является управление функциональностью предварительного рендеринга.

супер секрет

Техническое SEO - это еще не все. Теперь, когда у вас есть веб-сайт, разработанный на AngularJS, который идеально оптимизирован для поисковых систем, вам нужно наполнить его уникальным качественным контентом. Технически совершенный сайт без контента похож на гоночный автомобиль без бензина!

Ресурсы и идеи

Это руководство заняло много времени для написания и здесь для вас бесплатно. Если вы думаете, что это может быть полезно для ваших коллег или друзей, поделиться им в социальных сетях и оставить комментарий. Автору спасибо;)

Похожие

Комментарии