- Хочете завантажити ці інструкції та весь код у форматі PDF?
- AngularJS і SEO: Проблема
- AngularJS і SEO: Рішення
- Крок перший: Створення знімків
- Крок 2: Установка сервера
- 1 - Встановіть NPM і NodeJS
- 2 - Встановити назавжди
- 3 - Встановіть і запустіть Prerender.io
- 4 - Встановіть сервер Redis
- 5 - Зробити Prerender використанням сервера Redis для кешування знімків
- Крок 3: Конфігурація сервера
- Крок 4: Конфігурація програми
- Крок 5. Протестуйте сервер Prerender
- Крок 6. Додайте файл Sitemap
- Висновок
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 і:
- переконайтеся, що ви маєте <base href = ”/”> перед </head>
- додати <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!)
Висновок
Переконайтеся, що пошукові системи та - за допомогою пошукових запитів - користувачі можуть знайти вашу програму або веб-сайт. Стратегія, представлена на цій посаді, швидко реалізовується, масштабована і проста в обслуговуванні, і, якщо вона використовується, повинна допомогти вам зробити необхідні з'єднання і виграти потрібних користувачів.
Хочете завантажити ці інструкції та весь код у форматі PDF?Але як саме створюються ці знімки?
А як розробник може переконатися, що їхня програма AngularJS або веб-сайт правильно і повністю індексовані компанією Google?
Хочете завантажити ці інструкції та весь код у форматі PDF?
Отже, як ви генеруєте знімки, і як ви працюєте з ними, щоб переконатися, що ви проіндексовані?
Com?
Як ви працюєте на практиці?
Com/directory/page?