Як зробити AngularJS дивним з SEO

  1. Hashbangs #!
  2. Додати hashbang в конфігурацію AngularJS
  3. Поради PhantomJS
  4. Розкажіть своєму безголовому браузеру, коли він буде готовий
  5. Плагіни, що змінюють DOM
  6. Підтвердити результат
  7. Заключні думки

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

Я вперше зіткнувся з цією проблемою, коли я випустив свій перший сайт AngularJS DingScore Я помітив, що Google або Bing взагалі не індексували мої підсторінки, навіть з XML-мапи сайту. Коренева сторінка з'явилася як {{title}} і не дивно, що вона дійсно була такою в HTML.

Отже, перед нами стоять два головних питання

  1. Пошукові системи, здається, не знають, що це насправді дві різні сторінки. http://dingscore.com/#/livescore/livenow http://dingscore.com/#/livescore/International/13
  2. Від сканерів немає виконання Javascript, тому, якщо у вашому HTML є <title> {{title}} </title>, вони побачать його так. Не результат ми хотіли б

Для демонстрації я зробив захоплення екрану
Для демонстрації я зробив захоплення екрану

На цьому сайті є близько 150 унікальних URL-адрес, і я додав їх усі в інструментах для веб-майстрів для Google, думаючи, що цього буде достатньо, але ні.

Hashbangs #!

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

Отже, два попередні URL-адреси тепер будуть

http://dingscore.com/#!/livescore/livenow http://dingscore.com/#!/livescore/International/13

Google і Bing перетворять ці два URL-адреси на спеціально розроблену URL-адресу, яка може бути доступна серверу. Натомість сканери відвідують перетворені URL-адреси.

Таким чином, два спеціальних перетворених URL, які Google і Bing буде сканувати є

http://dingscore.com/?_escaped_fragment_=/livescore/livenow http://dingscore.com/?_escaped_fragment_=/livescore/International/13

Так що тепер ви бачите, що у вас є щось, що ви могли б працювати з боку сервера, і ви можете почати генерувати ваші відтворені знімки HTML. Що я зробив, це створити правило перезапису в .htaccess і я використовував PhanthomJS для створення знімків.

Ось мій приклад з mod_rewrite з Apache:

RewriteEngine On Options + FollowSymLinks RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /? (. *) $ RewriteRule ^ (. *) $ / Snapshots /% 1? [NC, L]

Коли сканер перетворює ваш hashbang (#!) У? _Escaped_fragment_ =, ви повинні переконатися, що знімок існує. Я отримав cronjob сканування мого сайту кожні 2 години і оновлення знімків з PhantomJS.

Додати hashbang в конфігурацію AngularJS

Все, що вам потрібно зробити, це доручити AngularJS використовувати їх замість звичайного хеша. Просто додайте один рядок коду в конфігурацію маршрутизації

.config (['$ routeProvider', '$ locationProvider', функція ($ routeProvider, $ location) {$ location.hashPrefix ('!'); ....

Поради PhantomJS

Блокування Analytics

Одна річ, яку я помітив, коли почав сканувати мій сайт за допомогою PhantomJS, це те, що мій Google Analyics зійшов з розуму від трафіку. Очевидно, що це не дивно, тому що виконання всіх видів Javascript, щоб захопити ваш вміст AJAX також буде ініціювати вашу статистику, в моєму випадку Google Analytics. Тому я додав request.abort () на весь трафік analytics.js у сценарії.

page.onResourceRequested = function (requestData, request) {if ((/analytics.js/gi).test(requestData['url ']))) {request.abort (); }};

Розкажіть своєму безголовому браузеру, коли він буде готовий

Вам також потрібно повідомити скрипт, коли сторінка готова до знімка, PhantomJS не буде знати, коли завантажується весь ваш вміст AJAX або коли DOM є остаточним. Тому потрібно встановити прапор і оновити прапор, коли всі ваші запити XHR завершили роботу.

<body data-status = "{{status}}"> </body>

А потім додайте щось подібне до ваших контролерів, коли ви очікуєте, що сторінка буде готова

$ scope.status = "ready";

Плагіни, що змінюють DOM

Перше, що приходить на мій погляд, це популярний Javascript шрифт для заміни плагіна Cufon . Не напевно, скільки їх ще використовують, але ви отримаєте ідею. Всі плагіни, що змінюють DOM, найкраще вимикати, коли ви робите знімки.

<h1> SEO заголовок </h1>

І cufon повністю змінити DOM і зіпсувати ваші результати SEO

<h1> <cufon class = "cufon cufon-canvas" alt = "SEO" стиль = "ширина: 92px; висота: 32px;"> <ширина полотна = "117" height = "37" style = "ширина: 117px; висота: 37px; верхня: -4px; ліва: -2px; "> </canvas> <cufontext> SEO </cufontext> </cufon> <cufon class =" cufon cufon-canvas " width: 93px; height: 32px; "> <ширина полотна =" 111 "height =" 37 "style =" ширина: 111px; висота: 37px; top: -4px; left: -2px; "> </canvas> < cufontext> Назва </cufontext> </cufon> </h1>

Підтвердити результат

Після того, як я зробив все це, я помітив, що через 2 дні мої сторінки правильно скануються

Адреса вебсайту:
http://dingscore.com/#!/livescore/livenow
URL-адреса сканування:
http://dingscore.com/?_escaped_fragment_=/livescore/livenow
URL-адреса знімка:
http://dingscore.com/snapshots/livescore/livenow.html

Заключні думки

Моя остання думка полягає в тому, якщо AngularJS (розроблений Google) веб-сайт буде мати кращий вплив, коли справа доходить до рейтингу, то, наприклад, блог WordPress з подібним контентом і SEO роботи?

Com/?
Com/?
RewriteRule ^ (. *) $ / Snapshots /% 1?
Com/?