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

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

<custom>
  <h1>Hey, this title is important</h1>
</custom>

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

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

<h2>{{title}}</h2>

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

<h2 ng-bind="title"></h2>

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

Обновление май 2014

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

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

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

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

Используйте PushState и Precomposition

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

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

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

Precomposition

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

1. Через PushState, где пользователь нажимает ссылку PushState и содержимое AJAXed.
2. Нажав на ссылку напрямую.

Первоначальное попадание на сайт будет заключаться в прямом обращении к 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.

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

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 о поддержке красивых URL-адресов PushState от марта 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

Это будет в сочетании с метатегом, как это:

<meta name="fragment" content="!">

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

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

domain.com/path/to/resource

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

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

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

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

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

Генерация PushState URL в Angular

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

$locationProvider.html5Mode(true);

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

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

Карта сайта

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

В любом случае, хорошая идея иметь карту сайта.

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

Pushstate работает в IE10. В старых браузерах Angular автоматически использует URL-адреса в стиле хэширования.

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

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

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, то есть там, где у нас есть ссылки без префикса хеша, мы можем реализовать эту же функцию, посмотрев на User Agentзаголовок в нашем бэкэнде).

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

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

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

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

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

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

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

<meta name="fragment" content="!">

Напоминание, мы можем установить html5Mode()с $locationсервисом:

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

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

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

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

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

С платным сервисом

Самый простой и быстрый способ получения контента в поисковой системе , чтобы воспользоваться услугой 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-дружественного сайта AngularJS в год блога moo. Он проведет вас через все шаги, описанные в документации 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

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

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

РЕДАКТИРОВАТЬ : я понимаю, что это может действительно запутать ваш REST API, и я не рекомендую делать это вне очень простых случаев использования, где это может быть естественной подгонки.

Вместо этого вы можете использовать совершенно другой набор маршрутов и контроллеров для своего дружественного роботу контента. Но затем вы дублируете все ваши маршруты и контроллеры AngularJS в Node / 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 году.

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

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

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

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

К вашему сведению, это решение также содержит жестко закодированные резервные теги на случай, если сканер не обнаружит 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.

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

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

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

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

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

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

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

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

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

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

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

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