• Товары с Алиэкспресс
  • Игрушки для мальчиков
  • Одежда
  • Игрушки ребенку
  • Ноутбуки
  • Новости
  • 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.

    Увеличение показов в Google

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

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

    В сентябре 2016 года в AngularJS было разработано почти полмиллиона сайтов. Источник: https://trends.builtwith.com/javascript/Angular-JS

    Вы 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), но большую часть тяжелой работы выполняет именно клиент.

    Различия между страницей HTML и страницей в вызове JS Simple HTML page
    • Браузер отправляет 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, намного меньше, чем вы ожидаете от просмотра отображаемого результата. Вот пример:

    <! doctype html> <html ng-app = "ebsn" lang = "it"> <head itemscope = "" itemtype = "http://schema.org/WebSite"> <title itemprop = "name"> Tigros < / title> <meta charset = "utf-8"> <meta http-equ = "content-language" content = "it"> <meta http-эквивалент = "X-UA-совместимый" content = "IE = edge, chrome = 1 "> <meta name =" description "content =" Tigros Drive - это новая услуга, которая позволяет заказывать покупки в Интернете и удобно получать их в одном из магазинов, оборудованных Tigros ">> <meta name =" ключевые слова "content =" супермаркет, шоппинг, онлайн, домохозяйка, еда, драйв, автомобиль, варез, дом, холодильник, кухня, обед, ужин, пригородные пассажиры, интернет-магазины, интернет-магазины в Варезе, инкассация, инкассация варез, драйв варез, интернет-супермаркет "> < meta name = "Author" content = "Digitelematica srl"> <meta name = "viewport" content = "width = device-width, user-scalable = no"> <meta name = "apple-itunes-app" content = " app-id = 1055600644 "> <meta name =" google-play-app "content =" app-id = en.digitelematica.ebsn.tigros "> <meta name =" фрагмент "content ="! "> <ссылка rel = "канонический" час ef = "https://www.tigros.it/ebsn-shop/index.html" itemprop = "url"> <link rel = "stylesheet" href = "assets / icomoon / style.css"> <link rel = "icon" href = "favicon.ico"> <! - [if IE]> <link rel = "ярлык" href = "favicon.png"> <! [endif] -> <link rel = "таблица стилей "href =" styles / vendor-56d25324cb.css "> <link rel =" stylesheet "href =" styles / app-d476401f4f.css "> </ head> <тело устройства-детектора =" "> <! - [ if lt IE 10]> <p class = "browsehappy"> Вы используете слишком старый браузер. Чтобы продолжить просмотр, вы можете <a href="http://browsehappy.com/"> обновить браузер </a> или воспользоваться <a href="https://www.tigros.it/ebsn/"> традиционная версия этого сайта </a>. </ p> <! [endif] -> <div ui-view = ""> </ div> <noscript class = "browsehappy"> Чтобы использовать этот сайт, необходимо включить javascript </ noscript> <script src = "scripts / vendor-890f01f39d.js"> </ script> <script src = "scripts / app-81e0eb286a.js"> </ script> </ body> </ html>

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

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

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

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

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

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

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

    Аналитик тенденций Google для веб-мастеров Гари Иллис, инженер-программист Google Пол Хаар и редактор Land Search Engine Дэнни Салливан на SMX West 2016

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

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

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

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

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

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

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

    <! - «onClick» функции вставлены в тэг «a» -> <a href= «…. Обработка on-click= «function1()"> ссылка </a> <! - Функции «javascript: window .location "внутри тега" a "-> <a href= jjavascript:function1();casts> Link </a> <! - Функции вне тега a, но вызываемые в Attribute-Value Pair href ("javascript: openlink ()") -> <div href = "javascript: function1 ();"> </ div> <div href = "http://pippo.pluto.com/aaa" on- нажмите = "funzioneCheNavigaIlLink ()"> Ссылка </ DIV>

    Также в углубленной статье № 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 по-прежнему уважает старую директиву по сей день.

    Источник: https://webmasters.googleblog.com/2009/10/proposal-for-making-ajax-crawlable.html

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

    Пример URL

    1. Stateful URL, который является форматом URL, который генерируется платформой JS без какой-либо оптимизации. Хэш, ворота, но в соответствии с Стандарт HTML указывает на внутренний якорь. http://example.it/chi-siamo.html#state 2. Google и Bing предлагают добавить FRAGMENTTOKEN (!) после хеша (#) для распознавания контента в JS и не идти вразрез со стандартом HTML. Новый созданный URL-адрес называется Pretty URL http://example.it/chi-siamo.html#!AJAX 3. Поисковые системы сопоставляют красивые URL-адреса в индексе, но на этапе сканирования требуются некрасивые URL-адреса с веб-сервера. или замените # hashbang ! ? _escaped_fragment_ = для того, чтобы получить предварительно отрендеренную страницу http://example.it/chi-siamo.html?_escaped_fragment_=AJAX 4. Когда веб-сервер получает запрос на уродливый URL, он активирует безголовый браузер который отображает страницу JS и создает полный снимок HTML для предоставления паукам (с тем же DOM, что и страница, отображаемая клиентским браузером). Поисковые системы индексируют на симпатичном URL контент, полученный с некрасивых URL http://example.com/sound.html#!AJAX

    Важно: если вы работаете на сайте, который использует параметр? _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 URLhashbang )
    • Предоставьте в 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:

    http://esempio.com/#!/1/2/3/products/content

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

    http://esempio.com/?_escaped_fragment_=/1/2/3/products/content

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

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

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

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

    <meta name = "фрагмент" содержание = "!" />

    Прокрутите другие метатеги, не думаете ли вы, что со всеми этими скобками это скорее катастрофа, чем что-либо еще? Вы ошибаетесь, эти скобки будут заполнены 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. Откройте терминал и введите:

    mkdir testangular cd testangular йо угловой

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

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

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

    git clone https://github.com/steeve/angular-seo.git

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

    • 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. Например, выражение выглядит так:

    angular.module ('myApp', ['ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'seo']) .config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl : 'views / main.html', контроллер: 'MainCtrl'}) .when ('/ about', {templateUrl: 'views / about.html', контроллер: 'MainCtrl'}) .otherwise ({redirectTo: '/ «});});

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

    «использовать строгое»; angular.module ('giovanniApp') .controller ('MainCtrl', function ($ scope) {$ scope.awesomeThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma']; // ТРЕБОВАНИЕ К SEO: // PhantomJS pre - рабочий процесс рендеринга требует, чтобы страница объявила через htmlReady (), что // мы закончили с этим контроллером. $ scope.htmlReady ();});

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

    <script src = "scripts / app.js"> </ script> <script src = "scripts / controllers / main.js"> </ script> <script src = "angular-seo.js"> </ script>

    Вы завершили настройку приложения, теперь установите и настройте 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. Необходимых инструментов мало, но они фундаментальны:

    Как я всегда говорю: «К счастью, есть 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, который идеально оптимизирован для поисковых систем, вам нужно наполнить его уникальным качественным контентом. Технически совершенный сайт без контента похож на гоночный автомобиль без бензина!

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

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

    Похожие

    SEO аудит
    ... ис SEO-аудита доступен для любого веб-сайта или интернет-магазина, который хочет получить подробные результаты для своего текущего рейтинга"> Сервис SEO-аудита доступен для любого веб-сайта или интернет-магазина, который хочет получить подробные результаты для своего текущего рейтинга. В то же время вы также получите данные о рейтинге ваших основных конкурентов. Сервис предназначен для всех, кто хочет развиваться в онлайн-бизнесе - как небольших, так и крупных сайтов.
    301 против 302 перенаправления
    ... страниц имеет жизненно важное значение, когда вы изменяете дизайн своего веб-сайта или объединяете URL-адреса, чтобы улучшить удобство использования и поисковая оптимизация в улучшить поисковый рейтинг , Вам нужно сообщить Google, что происходит, и лучше всего использовать их предпочтительный формат. Конечно, также очень важно перенаправить своих клиентов и потенциальных клиентов на правильную
    Prestashop ссылки
    Prestashop - это CMS (менеджер контента), которая позволяет быстро и легко создать сайт онлайн-продаж, то есть сайт электронной коммерции. Prestashop обязан своей большой популярностью благодаря тому,
    Yoast SEO Guide | SEO плагин | WordPress SEO Плагин | Настройки SEO
    WordPress представляет собой платформу и удобную среду, где вы можете легко создавать и создавать хорошо выглядящие профессиональные веб-сайты и блоги. Он также превосходен своими превосходными характеристиками и функциями. SEO-плагин yoast делает любой сайт более подходящим для любого рейтинга в поисковых системах. Yoast SEO - это один из лучших плагинов WordPress, который поставляется с множеством параметров конфигурации для оптимизации вашего сайта с точки зрения SEO. Он имеет встроенный
    О SEO Хакер
    Последняя проверка 23 марта 2019 года в 0:01 У хакера SEO есть три аспекта. Сначала это блог, затем школа SEO, и, наконец, наши услуги SEO. Можно сказать, что SEO Hacker разделен на три, но мы все на самом деле просто одна большая команда. SEO Хакер Блог
    Блог SEO Основы для начинающих
    ... ится? Поделиться! Эта неделя является гостевой неделей блогов! Я бы хотел поприветствовать Джен из PR Flying Penguin. Практика небольшого SEO, поисковая оптимизация, является одним из мощных способов помочь вашему блогу выделиться среди тысяч онлайн сегодня. Хотя
    Контент - король # 3: Yoast - король SEO
    ... ся одним из самых известных плагинов для WordPress SEO"> Yoast является одним из самых известных плагинов для WordPress SEO. Большинство технических аспектов SEO, которые вам нужно сделать, на самом деле описаны в Yoast. В наши дни все пытаются повысить рейтинг своего сайта в Google. Есть маркетинговые фирмы, зарабатывающие огромные деньги в связи с самым известным в наши дни цифровым термином «оптимизация SEO», но если вы проведете
    SEO и забудь
    Песочница Google - SEO Сообщение от Адам Хейс В эту эпоху «быстрого питания», «быстрого роста» и «широкополосного доступа» многие люди не осознают, что для того, чтобы выйти из песочницы, нужно время, чтобы подняться в поисковых системах. Я не знаю, является ли это просто быстрым временем,
    Дулут Миннесота SEO
    Мы любим Дулут Миннесота . Дулут - это ворота мирового класса в дикие леса Миннесоты, международный порт захода, развивающееся деловое сообщество и причудливый плавильный котел. Дулут расположен на скалистом берегу озера Верхнее. На западе лежит Железный Хребет Месаби,
    SEO мертв в 2018 году?
    ... JavaScript и динамические сайты, индикаторы социальных сетей, персонализированный контент ... список можно продолжать. Адам в настоящее время является руководителем отдела органического поиска (он же SEO) в Merkle, который ведет довольно активный блог о маркетинговых практиках.
    SEM, SEO, SEA ... что это значит?
    ... ифровывается как Search Engine Marketing и, следовательно, фактически включает SEO и SEA . Сокращение SEO расшифровывается как поисковая оптимизация, на голландском языке

    Комментарии

    Что может предложить специалист по SEO во время веб-дизайна?
    Что может предложить специалист по SEO во время веб-дизайна?" Вопреки широко распространенному мнению, работа специалиста по SEO не ограничивается установлением хороших общих методов позиционирования, применимых для любого проекта. Хотя существует такая хорошая практика, многие другие решения относительно органического позиционирования требуют тщательного анализа таких факторов, как цель сайта, предпочтения аудитории или профиль пользователя,
    Можем ли мы притворяться, что вещи не изменились и придерживаться тактики, к которой мы привыкли?
    Можем ли мы притворяться, что вещи не изменились и придерживаться тактики, к которой мы привыкли? Хорошо, может быть, они не будут работать так же хорошо, как в начале, но они все равно будут работать ... Верно? Нет, конечно нет. Теперь все по-другому. SEO отличается. И ты должен двигаться дальше. Я уверен, что вы уже сделали это с большей частью своей тактики SEO, но есть ли что-то, что вы все еще делаете в старой школе? Давайте проверим, есть ли вещи, которые удерживают вас в старой,
    Не очень гладкий процесс регистрации… Тем не менее, это было то, что мне предложила сделать справочная документация, чтобы войти в систему ?
    Не очень гладкий процесс регистрации… Тем не менее, это было то, что мне предложила сделать справочная документация, чтобы войти в систему ?? Странный! Во всяком случае, я был сейчас внутри комплекса. Все идет нормально. Миссия еще далеко не выполнена, хотя. В пользовательской области MyYoast мне также пришлось добавить свой сайт и активировать для него подписку Yoast SEO Premium. Звучит намного проще и понятнее, чем на самом деле. Затем мне пришлось выяснить,
    Достаточно ли у вашего сайта достаточно контента для ссылки или других авторитетные сайты использовать свой сайт в качестве ссылки или ссылаться на информацию, которая доступна?
    Не очень гладкий процесс регистрации… Тем не менее, это было то, что мне предложила сделать справочная документация, чтобы войти в систему ?? Странный! Во всяком случае, я был сейчас внутри комплекса. Все идет нормально. Миссия еще далеко не выполнена, хотя. В пользовательской области MyYoast мне также пришлось добавить свой сайт и активировать для него подписку Yoast SEO Premium. Звучит намного проще и понятнее, чем на самом деле. Затем мне пришлось выяснить,
    Вопрос SEO: Многие люди говорят, что пишите естественно для SEO, но что это значит?
    Вопрос SEO: Многие люди говорят, что пишите естественно для SEO, но что это значит? SEO-ответ: около полутора месяцев назад New York Times опубликовала статью Стива Лора под названием Этот скучный заголовок написан для Google , Статья не соответствует идее написания газетных статей с учетом интересов Google. Эта история получила приличное
    Подумайте об этом, вы бы наняли нас сегодня, не чувствуя себя уверенно относительно того, что мы вам доставим?
    Подумайте об этом, вы бы наняли нас сегодня, не чувствуя себя уверенно относительно того, что мы вам доставим? Если хотите, вы можете положить $ 3000 на стол для рулетки в каком-нибудь казино. Вы хотите нанять заслуживающая доверия компания что предлагает доступные SEO услуги и гарантирует ваши результаты размещения с политикой «100%
    Ты знаешь, что Linkjuice - это не то, что пьёт парень из Zelda?
    Ты знаешь, что Linkjuice - это не то, что пьёт парень из Zelda? Если вы можете ответить на большинство из этих вопросов «Да»: Поздравляю, вы знаете более 90% всех моих клиентов вместе взятых! Смотри, правда такова: Люди, которые будут вас нанимать,
    Так что все это имеет отношение к выбору агентства SEO, вы можете спросить?
    Так что все это имеет отношение к выбору агентства SEO, вы можете спросить? Любое деловое решение, в том числе выбор агентства SEO, может положительно или отрицательно повлиять на здоровье и благосостояние бизнеса, и поэтому перед подписанием контракта его следует придерживаться более высоких стандартов оценки. При исследовании и оценке поставщиков SEO большая часть процесса начинается в Интернете, и я буду обсуждать дальше, как это сделать, используя некоторые рекомендации,
    Но что, если я скажу вам, что есть способ разгрузить или даже избежать загрузки ресурсов страницы, пока они не понадобятся?
    Но что, если я скажу вам, что есть способ разгрузить или даже избежать загрузки ресурсов страницы, пока они не понадобятся? Это может дать вашему веб-сайту явное преимущество перед вашими конкурентами, потому что Google не только понравится вашим страницам, но и посетителям! Хорошей новостью является то, что для обновления вашего сайта требуется немного JavaScript и преднамеренных усилий. А также Google
    Чтобы лучше понять разницу между глобальным и локальным SEO и ответить на вопрос «на кого следует ориентироваться: локальный SEO или глобальный SEO?
    Чтобы лучше понять разницу между глобальным и локальным SEO и ответить на вопрос «на кого следует ориентироваться: локальный SEO или глобальный SEO?», Вот несколько вещей, которые вы должны помнить. Когда нацеливаться на местный SEO? Локальная поисковая оптимизация рекомендуется для небольших компаний, присутствующих только в определенном месте / районе. Но местный SEO также может быть хорошей стратегией для немного более крупных фирм, которые расположены в определенном
    Когда речь идет о стратегиях SEM - поисковом маркетинге - часто возникает вопрос: «SEO или PPC, что является наиболее эффективным»?
    Когда речь идет о стратегиях SEM - поисковом маркетинге - часто возникает вопрос: «SEO или PPC, что является наиболее эффективным»? Правда в том, что речь не идет о выборе между тем или иным. Каждая из стратегий имеет свои преимущества и цели, поэтому они не являются исключительными. Скорее, они являются дополнительными инструментами, которые в сочетании могут помочь принести наилучшие результаты поисковым системам. Исследования показывают, что от 60% до 70% интернет-пользователей

    Вам нужно оптимизировать сайт, разработанный на AngularJS, и не знаете с чего начать?
    Что меняется относительно обычной HTML-страницы?
    ??
    Html?
    Можем ли мы оставаться спокойными тогда?
    Может ли Google отображать и сканировать сайты JS?
    Могут ли другие поисковые системы отображать и сканировать сайты JS?
    Ваш целевой рынок - Россия и вы живете на яндекс трафике?
    Bing?
    Я отображаю свои страницы или нет?
    ТОП-5 лучших умных часов с Алиэкспресс
    Умные часы сравнительно недавно оказались на прилавках магазинов, тем не менее, стремительно набирают популярность среди взрослых и детей. Это и не удивительно, ведь этот аксессуар не только красиво смотрится

    Почему на алиэкспресс все дешево, можно ли покупать у них?
    6 Январь 2016       darwin             Просмотров:   2816 Хотел бы ответить на вопрос который мне поступил на почту, мол почему на алиэкспресс

    Как заработать на Алиэкспресс: основные методы
    Казалось бы, крупные торговые площадки в Интернете — это места, предназначенные для траты денег. Но на самом деле есть простые и надёжные методы, как заработать на Алиэкспресс. И воспользоваться ими могут

    Что делать если на алиэкспресс магазин перестал существовать
    Статьи Опубликовано: 18.10.2017 КАРТПЛОТТЕР (эхолот) за 25$!!! СОЗДАЮЩИЙ КАРТЫ глубин в реальном времени. Все чаще мне задают вопросы в стиле “Заказал товар, оплатил, позже зашел на страницу продавца,

    Детский размер США на русский на Алиэкспресс
    Многие из нас активно пользуются этой площадкой, и это не удивительно: здесь всегда можно найти что-то интересное по сходной цене. Детский размер США на русский на Али экспресс, таблицы сравнения – довольно

    Rock Zircon Nano - обзор наушников с АлиЭкспресс, где можно купить
    Недавно у меня сломались мои любимые наушники, и я начал подумывать о покупке новой модели. Наушники Rock Muma прослужили мне верой и правдой около двух лет, и я решил заказать их младшего брата — Rock

    Размер обуви на Алиэкспресс
    Многие считают, что приобретение обуви на торговой площадке – плохая идея, ведь велика вероятность того, что придет вовсе не тот размер, который мы заказывали. Но знаете ли вы, что в большинстве случаев

    Алиэкспресс шубы
    Всем привет. С наступлением осени меня все чаще стали спрашивать про покупку шубы с алиэкспресс, стоит оно того или нет. Поискав информацию в интернете, я кроме как  точно таких же вопросов, ничего

    Как вернуть обувь на Алиэкспресс ·. Возврат обуви на Алиэкспресс. В данной статье рассказывается о том, как делать возврат обуви на Алиэкспресс.
    Заказывая обувь на Алиэкспресс, все мы ожидаем надлежащее качество, и как же приятно когда оно соответствует нашим требованиям. Ну что можно сделать, если обувь пришла не такой какой должна

    Доставка с Алиэкспресс курьером: платная или нет?
    В данной статье мы поговорим, платная ли доставка курьером на Алиэкспресс . Курьерская доставка с Алиэкспресс нравится многим покупателям, ведь не придётся идти на почту с извещением, стоять в очереди

     

    Карта