Как поисковые системы работают с приложениями AngularJS?

Я вижу два вопроса с приложением AngularJS относительно поисковых систем и SEO:

1) Что происходит с пользовательскими тегами? Не игнорируют ли поисковые системы весь контент в этих тегах? т.е. предположим, что у меня есть

 

Hey, this title is important

был бы индексирован

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

2) Есть ли способ избежать того, чтобы поисковые системы индексирования {{}} связывались буквально? т.е.

 

{{title}}

Я знаю, что могу сделать что-то вроде

 

но что, если я хочу, чтобы на самом деле позволял сканеру «видеть» название? Единственное решение для серверной части?

    Обновление мая 2014 года

    Google crawlers теперь выполняют javascript – вы можете использовать Инструменты Google для веб-мастеров, чтобы лучше понять, как ваши сайты отображаются Google.

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

    Если это вариант, я бы рекомендовал прочитать эту статью о том, как сделать SEO для Angular с рендерингом на стороне сервера.

    Я не уверен, что делает сканер, когда он сталкивается с пользовательскими тегами.

    Использовать PushState и Precomposition

    Текущий (2015) способ сделать это – использовать метод pushState JavaScript.

    PushState изменяет URL-адрес в верхней строке браузера без перезагрузки страницы. Скажем, у вас есть страница с вкладками. Вкладки скрывают и отображают содержимое, а содержимое вставляется динамически, либо используя AJAX, либо просто устанавливая отображение: none и display: блок, чтобы скрыть и показать правильное содержимое вкладки.

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

    Precomposition

    Существует два способа попасть в одностраничное приложение PushState (SPA)

    1. Через PushState, где пользователь щелкает ссылку PushState, а содержимое – AJAXed.
    2. Путем прямого URL-адреса.

    Первоначальный хит на сайте будет включать прямой URL-адрес. Последующие хиты будут просто AJAX в содержимом, поскольку PushState обновляет URL.

    Сканеры собирают ссылки со страницы, а затем добавляют их в очередь для последующей обработки. Это означает, что для искателя каждое попадание на сервер является прямым ударом, они не перемещаются через Pushstate.

    Предкомпозиция связывает исходную полезную нагрузку с первым ответом с сервера, возможно, как объект JSON. Это позволяет поисковой системе отображать страницу без выполнения вызова AJAX.

    Существуют некоторые доказательства того, что Google может не выполнять запросы AJAX. Подробнее об этом здесь:

    https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

    Поисковые системы могут читать и выполнять JavaScript

    Google смог разобрать JavaScript уже некоторое время, поэтому они изначально разработали Chrome, чтобы выступать в качестве полнофункционального браузера без браузера для паука Google. Если ссылка имеет действительный атрибут href, новый URL-адрес может быть проиндексирован. Больше нечего делать.

    Если нажатие ссылки дополнительно вызывает вызов pushState, сайт может быть перемещен пользователем через PushState.

    Поддержка поисковых систем для URL PushState

    PushState в настоящее время поддерживается Google и Bing.

    Google

    Вот Мэтт Каттс отвечает на вопрос Пола Ирриша о PushState для SEO:

    http://youtu.be/yiAF9VdvRPw

    Здесь Google объявляет полную поддержку JavaScript для паука:

    http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

    В результате Google поддерживает PushState и индексирует URL PushState.

    См. Также инструменты Google для веб-мастеров, как Googlebot. Вы увидите, что ваш JavaScript (включая Angular) выполнен.

    Bing

    Вот объявление Bing о поддержке довольно PushState URL-адресов от марта 2013 года:

    http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

    Не используйте HashBangs #!

    URL-адреса Hashbang были уродливой остановкой, требующей от разработчика предоставить предварительно подготовленную версию сайта в специальном месте. Они все еще работают, но вам не нужно их использовать.

    URL-адреса Hashbang выглядят следующим образом:

    domain.com/#!path/to/resource

    Это будет сопряжено с метатагом:

    Google не будет индексировать их в этой форме, но вместо этого вытащит статическую версию сайта из URL-адреса _escaped_fragments_ и проиндексирует это.

    URL-адреса Pushstate выглядят как обычный URL-адрес:

    domain.com/path/to/resource

    Разница в том, что Angular обрабатывает их для вас, перехватывая изменение document.location, связанное с ним в JavaScript.

    Если вы хотите использовать URL-адреса PushState (и, вероятно, вы это сделаете), вытащите все старые URL-адреса и метаtags в стиле hash-стиля и просто включите режим HTML5 в своем блоке конфигурации.

    Тестирование вашего сайта

    Инструменты Google для веб-мастеров теперь содержат инструмент, который позволит вам получать URL-адрес в качестве google и отображать JavaScript, как это делает Google.

    https://www.google.com/webmasters/tools/googlebot-fetch

    Создание URL PushState в Угловом

    Чтобы генерировать реальные URL-адреса в Angular, а не # с префиксом, установите режим HTML5 на объект $ locationProvider.

     $locationProvider.html5Mode(true); 

    Серверная сторона

    Поскольку вы используете реальные URL-адреса, вам нужно будет обеспечить, чтобы один и тот же шаблон (плюс некоторое предварительно настроенное содержимое) отправлялся сервером для всех допустимых URL-адресов. Как вы это сделаете, это зависит от вашей архитектуры сервера.

    Карта сайта

    Ваше приложение может использовать необычные формы навигации, например, наведение или прокрутка. Чтобы Google мог управлять вашим приложением, я бы предложил создать файл Sitemap, простой список всех URL-адресов, на которые реагирует ваше приложение. Вы можете поместить это по умолчанию (/ sitemap или /sitemap.xml) или сообщить об этом Google с помощью инструментов для веб-мастеров.

    В любом случае неплохо иметь карту сайта.

    Поддержка браузера

    Pushstate работает в IE10. В старых браузерах Angular автоматически возвращается к URL-адресам в стиле hashа

    Демо-страница

    Следующий контент отображается с использованием URL-адреса pushstate с предкомпозицией:

    http://html5.gingerhost.com/london

    Как можно проверить, по этой ссылке контент индексируется и появляется в Google.

    Обслуживание 404 и 301 Кодов состояния заголовка

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

    Давайте окончательно определим AngularJS и SEO

    Google, Yahoo, Bing и другие поисковые системы сканируют сеть традиционными способами, используя традиционные сканеры. Они запускают роботы, которые сканируют HTML на веб-страницах, собирая информацию на этом пути. Они содержат интересные слова и ищут другие ссылки на другие страницы (эти ссылки, количество их и количество их вступают в игру с SEO).

    Так почему же поисковые системы не занимаются сайтами javascript?

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

    Что можно сделать по этому поводу?

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

    Если мы изменим hashPrefix на #! вместо просто # , то современные поисковые системы изменят запрос на использование _escaped_fragment_ вместо #! , (В режиме HTML5, т.е. где у нас есть ссылки без префикса hashа, мы можем реализовать эту же функцию, посмотрев заголовок User Agent в нашем бэкэнд).

    То есть вместо запроса от обычного браузера, который выглядит так:

    http://www.ng-newsletter.com/#!/signup/page

    Поисковая система будет искать страницу с помощью:

    http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

    Мы можем установить префикс хеша наших угловых приложений, используя встроенный метод из ngRoute :

     angular.module('myApp', []) .config(['$location', function($location) { $location.hashPrefix('!'); }]); 

    И, если мы используем html5Mode , нам нужно реализовать это с помощью метатега:

      

    Напоминаем, мы можем установить html5Mode() с помощью службы определения $location :

     angular.module('myApp', []) .config(['$location', function($location) { $location.html5Mode(true); }]); 

    Обработка поисковой системы

    У нас есть много возможностей определить, как мы будем заниматься доставкой контента в поисковые системы как статическим HTML. Мы можем разместить бэкэнд самостоятельно, мы можем использовать сервис для размещения для нас фоновых функций, мы можем использовать прокси для доставки контента и т. Д. Давайте рассмотрим несколько вариантов:

    Самопринятый

    Мы можем написать службу для обработки обхода собственного сайта с помощью браузера без браузера, например phantomjs или zombiejs, с помощью моментального снимка страницы с визуализированными данными и ее хранения в виде HTML. Всякий раз, когда мы видим строку запроса ?_escaped_fragment_ в ?_escaped_fragment_ на поиск, мы можем доставить статический снимок HTML, который мы взяли на странице, а не на предварительно отрисованную страницу только через JS. Это требует от нас наличия бэкэнд, который поставляет наши страницы с условной логикой посередине. Мы можем использовать что-то вроде бэкэнда prerender.io в качестве отправной точки для запуска этого сами. Конечно, нам все равно нужно обрабатывать проксирование и обработку fragmentов, но это хороший старт.

    С платной услугой

    Самый простой и быстрый способ получить контент в поисковой системе – использовать службы Brombone , seo.js , seo4ajax и prerender.io , являются хорошими примерами этих, которые будут размещать для вас вышеупомянутый контент-рендеринг. Это хороший вариант времени, когда мы не хотим иметь дело с запуском сервера / прокси. Кроме того, это, как правило, очень быстро.

    Для получения дополнительной информации о Angular и SEO мы написали обширный учебник по этому поводу в http://www.ng-newsletter.com/posts/serious-angular-seo.html, и мы подробно рассказали об этом в нашей книге ng-book: Полная книга по AngularJS . Проверьте это на ng-book.com .

    Вы должны действительно проверить учебник по созданию SEO-friendly сайта AngularJS в год блога му. Он проведет вас по всем шагам, изложенным в документации Angular. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

    Используя этот метод, поисковая система видит расширенный HTML вместо пользовательских тегов.

    Это резко изменилось.

    http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

    Если вы используете: $ locationProvider.html5Mode (true); вы настроены.

    Больше страниц рендеринга.

    С тех пор, как этот вопрос был задан, ситуация немного изменилась. Теперь есть варианты, позволяющие Google индексировать ваш сайт AngularJS. Самый простой вариант, который я нашел, заключался в том, чтобы использовать бесплатную службу http://prerender.io , которая создаст для вас страницы для кривизны и будет служить в поисковых системах. Он поддерживается практически на всех серверных веб-платформах. Я недавно начал использовать их, и поддержка тоже прекрасна.

    У меня нет никакой связи с ними, это происходит от счастливого пользователя.

    Собственный веб-сайт Angular предлагает упрощенный контент для поисковых систем: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

    Скажем, ваше приложение «Угловое» потребляет JSON api Node.js / Express, например /api/path/to/resource . Возможно, вы можете перенаправить любые запросы с помощью ?_escaped_fragment_ в /api/path/to/resource.html и использовать согласование содержимого для отображения HTML-шаблона контента, а не возвращать данные JSON.

    Единственное, ваши угловые маршруты должны соответствовать 1: 1 с вашим REST API.

    EDIT : Я понимаю, что это потенциально может испортить ваш REST api, и я не рекомендую делать это за пределами очень простых случаев использования, где это может быть естественным.

    Вместо этого вы можете использовать совершенно другой набор маршрутов и controllerов для вашего удобного для робота контента. Но тогда вы дублируете все свои маршруты и controllerы AngularJS в узле / Express.

    Я решил создать моментальные снимки без браузера, хотя я чувствую, что это немного меньше, чем идеальный.

    Хорошую практику можно найти здесь:

    http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag

    На данный момент Google изменил предложение AJAX для сканирования.

    Времена изменились. Сегодня, пока вы не блокируете робота Googlebot от сканирования ваших файлов JavaScript или CSS, мы, как правило, можем отображать и понимать ваши веб-страницы, такие как современные браузеры.

    tl; dr: [Google] больше не рекомендуют предложение об отклонении AJAX [Google] в 2009 году.

    Google Crawlable Ajax Spec, как указано в других ответах здесь, в основном является ответом.

    Если вас интересуют, как другие поисковые системы и социальные боты справляются с теми же проблемами, я написал состояние дел здесь: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

    Я работаю в https://ajaxsnapshots.com , компании, которая реализует Crawlable Ajax Spec как услугу – информация в этом отчете основана на наблюдениях наших журналов.

    Я нашел элегантное решение, которое будет охватывать большинство ваших баз. Я написал об этом здесь и ответил на другой аналогичный вопрос StackOverflow, который ссылается на него.

    FYI это решение также включает в себя жестко закодированные резервные tags в случае, если Javascript не подхвачен искателем. Я не указал его явно, но стоит упомянуть, что вы должны активировать режим HTML5 для правильной поддержки URL.

    Также обратите внимание: это не полные файлы, а только важные части тех, которые актуальны. Если вам нужна помощь в написании шаблона для директив, служб и т. Д., Которые можно найти в другом месте. В любом случае, здесь идет …

    app.js

    Здесь вы указываете пользовательские метаданные для каждого из ваших маршрутов (название, описание и т. Д.),

     $routeProvider .when('/', { templateUrl: 'views/homepage.html', controller: 'HomepageCtrl', metadata: { title: 'The Base Page Title', description: 'The Base Page Description' } }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl', metadata: { title: 'The About Page Title', description: 'The About Page Description' } }) 

    metadata-service.js (услуга)

    Устанавливает параметры пользовательских метаданных или использует значения по умолчанию в качестве резервных копий.

     var self = this; // Set custom options or use provided fallback (default) options self.loadMetadata = function(metadata) { self.title = document.title = metadata.title || 'Fallback Title'; self.description = metadata.description || 'Fallback Description'; self.url = metadata.url || $location.absUrl(); self.image = metadata.image || 'fallbackimage.jpg'; self.ogpType = metadata.ogpType || 'website'; self.twitterCard = metadata.twitterCard || 'summary_large_image'; self.twitterSite = metadata.twitterSite || '@fallback_handle'; }; // Route change handler, sets the route's defined metadata $rootScope.$on('$routeChangeSuccess', function (event, newRoute) { self.loadMetadata(newRoute.metadata); }); 

    metaproperty.js (директива)

    Упаковывает результаты службы метаданных для представления.

     return { restrict: 'A', scope: { metaproperty: '@' }, link: function postLink(scope, element, attrs) { scope.default = element.attr('content'); scope.metadata = metadataService; // Watch for metadata changes and set content scope.$watch('metadata', function (newVal, oldVal) { setContent(newVal); }, true); // Set the content attribute with new metadataService value or back to the default function setContent(metadata) { var content = metadata[scope.metaproperty] || scope.default; element.attr('content', content); } setContent(scope.metadata); } }; 

    index.html

    В комплекте с жестко закодированными тегами возврата, упомянутыми ранее, для искателей, которые не могут поднять любой Javascript.

      Fallback Title               

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

    Надеюсь это поможет!

    Используйте что-то вроде PreRender, оно делает статические страницы вашего сайта, чтобы поисковые системы могли его индексировать.

    Здесь вы можете узнать, какие платформы доступны: https://prerender.io/documentation/install-middleware#asp-net

    С помощью Angular Universal вы можете создавать целевые страницы для приложения, которые выглядят как полное приложение, а затем загружать приложение Angular.
    Угловой универсальный генерирует чистый HTML-код, который означает не-javascript-страницы на стороне сервера и обслуживает их без задержки. Таким образом, вы можете иметь дело с любым искателем, ботом и пользователем (у которых уже есть низкая скорость процессора и скорость сети). Затем вы можете перенаправить их по ссылкам / кнопкам на свое фактическое угловое приложение, которое уже загружено за ним. Это решение рекомендуется на официальном сайте. -Подробнее о SEO и Angular Universal-

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

    Некоторые разработчики создают базовые html-страницы с реальными данными и обслуживают эти страницы со стороны сервера во время обхода. Мы можем отображать одни и те же страницы с помощью PhantomJS на стороне _escaped_fragment_ которая имеет _escaped_fragment_ (поскольку Google ищет #! В наших URL- _escaped_fragment_ сайта, а затем берет все после #! И добавляет его в параметр _escaped_fragment_ query). Для более подробной информации, пожалуйста, прочитайте этот блог .

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

    Мое решение: дать сканеру, чего хочет искатель :

    Вы должны думать о том, чего хочет искатель, и дать ему только это.

    СОВЕТ не путается со спиной. Просто добавьте немного серверного фронтального просмотра, используя тот же API

    Interesting Posts

    Как предотвратить мой провайдер от размещения каждого веб-сайта в кадре?

    Передача параметров в область видимого компонента в JSF

    Как использовать / Включить (объект RegExp) Регулярное выражение с использованием VBA (MACRO) в слове

    Как я могу применить ограничение количества к * ngFor?

    XPath: Как выбрать узел с некоторым атрибутом по индексу?

    Предотвратить чтение пользователями моих пользователей

    Использовать строковые методы для поиска и подсчета гласных в строке?

    Сделать jackson интерпретировать единственный объект JSON как массив с одним элементом

    Операционная система из HTTP-заголовка User-Agent

    Найти первый повторный символ в строке

    count vs length vs size в коллекции

    Отладчик Visual Studio – отображение целочисленных значений в шестнадцатеричном виде

    Почему это регулярное выражение позволяет каретку?

    Работа с HTTP-контентом на HTTPS-страницах

    Как защитить пароль .tgz-файла с помощью tar в Unix?

    Давайте будем гением компьютера.