AngularJS: Індекс і Supercharge Ваш SEO

1. Хочете завантажити ці інструкції та весь код у форматі PDF?
2. AngularJS і SEO: Проблема
3. AngularJS і SEO: Рішення
4. Крок перший: Створення знімків
5. Крок 2: Установка сервера
6. 1 - Встановіть NPM і NodeJS
7. 2 - Встановити назавжди
8. 3 - Встановіть і запустіть Prerender.io
9. 4 - Встановіть сервер Redis
10. 5 - Зробити Prerender використанням сервера Redis для кешування знімків
11. Крок 3: Конфігурація сервера
12. Крок 4: Конфігурація програми
13. Крок 5. Протестуйте сервер Prerender
14. Крок 6. Додайте файл Sitemap
15. Висновок

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

Але є одна проблема, з якою стикається кожен розробник, коли натискає свій продукт AngularJS: оптимізація пошукових систем або SEO.

Якість SEO означає отримання знайдених серед усього шуму в Інтернеті. Коли сайт або додаток оптимізовано для пошуку, більш ймовірно, що їх знайдуть потенційні користувачі. Якщо він не оптимізований, то розробник може також кричати на вітер - ніякої експозиції і жодного користувача майже не гарантує.

Зараз найпоширенішою методикою пом'якшення цієї проблеми є створення окремих версій програми або веб-сайту для пошукових систем, або попередня візуалізація сторінок на сервері. Проблема з цими рішеннями, однак, полягає в тому, що ви повинні підтримувати дві окремі системи: одну для ваших користувачів і іншу для Google і інші пошукові системи.

Хоча Google намагався допомогти розробникам, покращивши його здатність індексувати JavaScript і CSS, але навіть якщо Зусилля Google щодо індексування JavaScript починаючи з 2014 року, це не означає, що ваша програма буде індексована належним чином. Дійсно, Google все ще рекомендує створення знімків зробити сканування AJAX-додатка .

Але як саме створюються ці знімки? А як розробник може переконатися, що їхня програма AngularJS або веб-сайт правильно і повністю індексовані компанією Google?

У цій посаді ми представляємо безкоштовне самостійне рішення для створення знімків і переконайтеся, що ваш веб-сайт або програма AngularJS сканується, індексується та оптимізовано для Google.

Хочете завантажити ці інструкції та весь код у форматі PDF?

Введіть свою електронну пошту та отримайте її безкоштовно!

AngularJS і SEO: Проблема

Сканери пошукових систем спочатку були розроблені для індексування вмісту HTML веб-сторінок.

Сьогодні, однак, JavaScript та інші фреймворки, такі як AngularJS і BackboneJS, відіграють провідну роль у веб-розробці та створенні контенту та додатків в Інтернеті.

На жаль, сканери та інші механізми індексації, що стоять за пошуковими системами, залишаються рішуче недружелюбними до сайтів, керованих JavaScript

AngularJS і SEO: Рішення

Подолання проблеми індексації не складно, коли розробники охоплюють так звані «знімки».

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

Важлива примітка: індексація JavaScript наразі застосовується лише до сканера Google. Інші сканери пошуку (наприклад, з пошукової системи Microsoft Bing) ще не підтримують сканування програм JavaScript. Крім того, незважаючи на те, що веб-контент все частіше поширюється на соціальні мережі, такі як Facebook і Twitter, більшість сканерів соціальних мереж також не працюють з JavaScript.

Отже, як ви генеруєте знімки, і як ви працюєте з ними, щоб переконатися, що ви проіндексовані?

Читайте далі для покрокового керівництва.

Крок перший: Створення знімків

Першим кроком є ​​створення самих знімків.

Для цього нам потрібен доступ до сервера знімків на основі a безголовий браузер такі як PhantomJS або ZombieJS. У цьому прикладі ми будемо використовувати проміжне програмне забезпечення з відкритим вихідним кодом Prerender що вже пакує PhantomJS і готовий обробляти наші спеціальні запити гусениць і обслуговувати знімки HTML.

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

Крок 2: Установка сервера

У цьому прикладі ми будемо використовувати сервер Apache, який працює на Ubuntu 14.04.2 LTS.

Існує п'ять кроків для роботи.

1 - Встановіть NPM і NodeJS

sudo apt-get update sudo apt-get встановити nodejs npm ln -s / usr / bin / nodejs / usr / bin / node

2 - Встановити назавжди

npm install forever -g

3 - Встановіть і запустіть Prerender.io

git clone https://github.com/prerender/prerender.git cd prerender npm install

Переконайтеся, що сервер запускається на 4001, а PhantomJS - на 4002.

Цей файл можна редагувати, якщо потрібно змінити порт:

/lib/index.js

Поверніться до папки Prerender і запустіть сервер за допомогою назавжди - це допоможе запустити сервер безперервно у фоновому режимі.

назавжди запустіть server.js

4 - Встановіть сервер Redis

Додайте сховища Dotdeb до джерел APT. Для цього створіть новий файл списку в /etc/apt/sources.list.d/ та заповніть його таким вмістом:

# /etc/apt/sources.list.d/dotdeb.org.list deb http://packages.dotdeb.org стиснути все deb-src http://packages.dotdeb.org стиснути все

Потім потрібно перевірити автентифікацію цих сховищ за допомогою відкритого ключа:

wget -q -O - http://www.dotdeb.org/dotdeb.gpg | sudo apt-key add -

Далі встановіть Redis за допомогою apt-get:

sudo apt-get update sudo apt-get встановлення redis-сервера

Потім увімкніть службу Redis для запуску під час завантаження:

sudo сервіс redis_6379 запуску служби sudo redis_6379 зупинка

Потім слід перевірити статус Redis:

$ redis-cli ping

Ви отримаєте “PONG”, якщо все нормально.

5 - Зробити Prerender використанням сервера Redis для кешування знімків

Prerender має модуль з відкритим вихідним кодом, Prerender-Redis-Cache , що полегшує виконання цього завдання.

У вашому локальному проекті prerender (prerender / server.js) виконайте:

$ npm install prerender-redis-cache --зберегти

Потім додайте ці два рядки в prerender / server.js:

process.env.PAGE_TTL = 3600 * 24 * 5; // змінюємо на 0, якщо хочете весь час кеша server.use (require ('prerender-redis-cache'));

Перезапустити Prerender:

назавжди stopall назавжди запустити server.js

А якщо потрібно очистити весь кеш REDIS, можна скористатися:

redis-cli -p 6379 flushall

Крок 3: Конфігурація сервера

Тепер ми перенаправляємо сканери до локального сервера Prerender, використовуючи простий файл .htaccess.

Цей файл htaccess містить усі конфігурації перенаправлення. Зверніть увагу, що файл .htaccess повинен бути в тому ж каталозі з вашим основним файлом AngularJS index.html.

<IfModule mod_rewrite.c> RewriteEngine On Options + FollowSymLinks # перенаправити не www до www RewriteCond% {HTTP_HOST}! ^ Www \ t RewriteRule ^ (. *) $ Http: //www.% {HTTP_HOST} / $ 1 [R = 301, L] # Не переписуйте файли або каталоги RewriteCond% {REQUEST_FILENAME} -f [OR] RewriteCond% {REQUEST_FILENAME} - d RewriteRule ^ - [L] # Список усіх сканерів і бота, до яких можна додати більше RewriteCond% {HTTP_USER_AGENT} Googlebot | bingbot | Googlebot-Mobile | Baiduspider | Yahoo | YahooSeeker | DoCoMo | Twitter | | Ezotom | MSNBot | Exabot | MJ12bot | sogou | ExBLanguage | Crawler | AddThis.com | aiHitBot | Spinn3r | BingPreview | GrapeshotCrawler | CareerBot | ZumBot | ShopWiki | bixocrawler | uMBot | sistrix | linkdexbot | | Plukkie | yacybot | trendictionbot | UASlinkChecker | Blekkobot | Wotbox | YioopBot | середньодобовий | TinEye | LuminateBot | FyberSpider | Infohelfer | linkdex.com | Цікавий \ t ss | ichiro | MojeekBot | SBSearch | WebThumbnail | socialbm_bot | SemrushBot | Ведма | alexa sitei sudit | [NC, OR] RewriteCond% {QUERY_STRING} _escaped_fragment_ # Тільки проксі запит до Prerender, якщо це запит на HTML RewriteRule ^ (?!. *? (js | CSS | XML | jpeg | gif | pdf | doc | TX | ISO | rss |. zip | mp3 | rar | exe | wmv | doc | avi | ppp | mpg | mpeg | tif | wav | mov | xls | mp4 | m4a | swf | dat | dmg | .iso | flv | m4v | . *) http://www.mydomain.com:4001/http://www.mydomain.com/$2 [P, L] # Перепишіть все інше на index.html, щоб дозволити посилання на html5 RewriteRule ^ index.html [ L] </IfModule>

Тепер ви закінчили всі завдання встановлення на стороні сервера, тому настав час налаштувати програму AngularJS App.

Крок 4: Конфігурація програми

Спочатку відкрийте файл Angularjs index.html і:

1. переконайтеся, що ви маєте <base href = ”/”> перед </head>
2. додати <meta name = ”фрагмент” content = ”!”> між <head> </head> (додавши цей тег на сторінку www.example.com, сканер тимчасово пов'яже цю URL-адресу з www.example.com? _escaped_fragment_ = і запитуватиме це з вашого сервера)

По-друге, активуйте режим HTML5.

У файлі config.js додайте:

$ locationProvider.html5Mode (true);

Це дозволить вашій програмі використовувати формат URL-адреси HTML5.

Як правило, URL-адреси виглядають так http://www.example.com/directory/page . За замовчуванням елементи AngularJS матимуть URL-адреси, подібні до цього: http://www.example.com/#!/directory/page

var app = angular.module ('app') .config (['$ httpProvider', '$ locationProvider', функція ($ httpProvider, $ locationProvider) {// використання API історії HTML5 $ locationProvider.html5Mode (true);…

По-третє, вам потрібно керувати мета-тегами.

Щоб покращити SEO вашої програми або веб-сайту, потрібно мати унікальну назву та опис для кожної сторінки. Модуль AngularJS називається AngularJS-View-Head вже існує для вирішення цієї проблеми. Цей модуль допоможе нам змінити HTML-заголовок і елементи елемента на основі перегляду.

Як ви працюєте на практиці?

Почніть з установки цього модуля за допомогою bower.

Далі, оголосити модуль як залежність вашої програми:

var app = angular.module ('myApp', ['ng', 'viewhead']);

Це робить доступними директиви, описані у вашому HTML-шаблоні.

Нарешті додайте мета-теги до шаблону.

<view-title> {{artist.title}} </view-title> <meta view-head name = "опис" content = "{{'SEO.ARTIST.DESCRIPTION' | translate: {виконавець: artist.name, artist_ar: artist.name_ar}}} "/> <! - Відкрити дані графіка ---> <meta view-head властивість =" og: назва "content =" {{artist.name}} "/> <meta view -head property = "og: type" content = "article" /> <meta view-head властивість = "og: url" content = "http://www.example.com/artist/{{artist.slug}} "/> <meta view-head властивість =" og: зображення "content =" {{artist.photo}} "/> <meta view-head властивість =" og: опис "content =" {{artist.description}} "/>

Крок 5. Протестуйте сервер Prerender

Якщо ви виконали всі кроки, речі повинні добре працювати. Але, краще безпечно, ніж шкода, прийшов час перевірити.

Порівняйте джерело однієї зі сторінок з і без _escaped_fragment_ в URL-адресі.

Ви можете перевірити конкретні маршрути у вашому браузері та порівняти:

http://www.example.com/directory/page
http://www.example.com/directory/page?_escaped_fragment_=

Крок 6. Додайте файл Sitemap

Останнім кроком у вашій SEO-стратегії AngularJS є розробка карти сайту.

Щоб допомогти пошуковим системам сканувати вашу програму або веб-сайт і переконатися, що сторінки індексуються швидко, потрібно створити карту сайту для всіх своїх маршрутів. Це звучить важко зробити, однак, з належними процесами побудови це можна автоматизувати за допомогою інструменту типу Grunt.

(Heads up: ми скоро публікуємо інший пост, пояснюючи, як автоматизувати карту сайту за допомогою Grunt!)

Висновок

Переконайтеся, що пошукові системи та - за допомогою пошукових запитів - користувачі можуть знайти вашу програму або веб-сайт. Стратегія, представлена ​​на цій посаді, швидко реалізовується, масштабована і проста в обслуговуванні, і, якщо вона використовується, повинна допомогти вам зробити необхідні з'єднання і виграти потрібних користувачів.