Я бачу дві проблеми із програмою 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) спосіб зробити це за допомогою методу JavaScript pushState.

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

Коли клацніть вкладки, використовуйте pushState для оновлення URL-адреси в адресному рядку. Коли сторінка відображається, використовуйте значення в адресному рядку, щоб визначити, яку вкладку відображати. Кутова маршрутизація зробить це автоматично для вас.

Попередній склад

Є два способи потрапити на додаток PushState Single Page (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/precomposition-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 (включаючи кутовий) виконується.

Бінг

Ось повідомлення 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.

Якщо ви хочете використовувати URL-адреси PushState (а ви, мабуть, і так), вийміть всі старі URL-адреси та метатеги стилю хешу та просто увімкніть режим HTML5 у своєму конфігураційному блоці.

Тестування вашого сайту

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

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

Генерування PushState URL-адрес у кутовій формі

Щоб генерувати реальні URL-адреси в кутових, а не # префіксованих, встановіть режим HTML5 у вашому об’єкті $ locationProvider.

$locationProvider.html5Mode(true);

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

Оскільки ви використовуєте реальні URL-адреси, вам потрібно буде забезпечити, щоб той самий шаблон (плюс деякий попередньо створений вміст) надсилався вашим сервером для всіх дійсних URL-адрес. Як це зробити, буде залежати від архітектури вашого сервера.

Карта сайту

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

Це все-таки добре мати мапу сайту.

Підтримка браузера

Pushstate працює в IE10. У старих браузерах Angular автоматично повернеться до URL-адрес стилів хешу

Демонстраційна сторінка

Наступний вміст виводиться за допомогою URL-адреси push з попередньою композицією:

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

Ми можемо встановити хеш-префікс наших кутових програм за допомогою вбудованого методу від 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-книги: Повна книга про 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.html5Мод (вірно); ви налаштовані.

Немає більше рендерингу сторінок.

З моменту цього питання все змінилося досить сильно. Зараз є варіанти дозволити Google індексувати ваш сайт AngularJS. Найпростіший варіант, який я знайшов, - це користуватися безкоштовним сервісом http://prerender.io, який генерує для вас зручні сторінки та обслуговуватиме їх у пошукових системах. Він підтримується майже на всіх веб-платформах на стороні сервера. Я нещодавно почав їх використовувати, і підтримка також відмінна.

Я не маю з ними ніякої приналежності, це йде від щасливого користувача.

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

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

Єдине, що ваші кутові маршрути повинні відповідати 1: 1 вашому REST API.

EDIT : Я усвідомлюю, що це може по-справжньому замутити ваші 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 році.

Спеціалізація Ajax від Google, про яку можна сканувати, як згадується в інших відповідях тут, в основному є відповіддю.

Якщо вас цікавить, як інші пошукові системи та соціальні боти вирішують ті самі проблеми, я написав тут сучасний стан: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Я працюю в https://ajaxsnapshots.com , компанії, яка реалізує Spec Specla Ajax як послугу - інформація в цьому звіті базується на спостереженнях з наших журналів.

Я знайшов елегантне рішення, яке охоплювало б більшість ваших баз. Я писав про це спочатку тут і відповів на інше подібне запитання StackOverflow тут яке посилається.

FYI це рішення також включає жорсткі коди резервних тегів у випадку, якщо сканер не підхопить JavaScript. Я цього не чітко окреслював, але варто згадати, що для належної підтримки URL-адреси вам слід активувати режим HTML5.

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

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>

Це має суттєво допомогти у більшості випадків використання пошукових систем. Якщо ви хочете отримати повністю динамічну візуалізацію для сканерів соціальних мереж (які є iffy на підтримці Javascript), вам все одно доведеться скористатися однією з послуг попереднього рендерінгу, згаданих у деяких інших відповідях.

Сподіваюся, це допомагає!

Використовуючи щось на кшталт PreRender, це робить статичні сторінки вашого сайту, щоб пошукові системи могли його індексувати.

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

Завдяки Angular Universal ви можете генерувати цільові сторінки для програми, які виглядають як повне додаток, а потім завантажувати ваш кутовий додаток за ним.
Angular Universal генерує чистий HTML, що означає відсутність javascript-сторінок на стороні сервера, і обслуговувати їх користувачам, не затримуючи. Таким чином, ви можете мати справу з будь-яким сканером, ботом та користувачем (які вже мають низьку частоту процесора та швидкості мережі). Це рішення рекомендується офіційним сайтом. -Докладніше про SEO та Angular Universal-

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

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

Сканерам не потрібні багаті представлені досить стильні гуї, вони хочуть лише бачити вміст , тому вам не потрібно давати їм знімок сторінки, створеної для людей.

Моє рішення: дати сканеру те, що шукає :

Ви повинні подумати, чого хоче сканер, і дати йому лише це.

Підказка не возиться зі спиною. Просто додайте невеликий серверний вид спереду за допомогою того ж API