AngularJS SEO з Prerender.io

  1. Проблема
  2. Рішення
  3. Що ми будемо будувати
  4. Як це працює
  5. Про Prerender.io
  6. Пакет установки вузла .json
  7. Сервер установки вузла.js
  8. Головна сторінка index.html
  9. Налаштування кутових app.js
  10. Що відбувається?
  11. Переконайтеся, що він працював
  12. Застереження
  13. Висновок

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

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

Проблема

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

[ ] [1]

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

Рішення

Будьте впевнені, Google дійсно має спосіб індексації додатків AJAX, а додаток AngularJS можна сканувати , індексувати та відображатиметься в результатах пошуку, як і будь-який інший веб-сайт. Є кілька застережень і додаткових кроків, які потрібно виконати, але ці методи повністю підтримуються Google. Щоб дізнатися більше про керівні принципи Google щодо відвідування вмісту AJAX, який можна сканувати Правила сканування AJAX для веб-майстрів Google .

Що ми будемо будувати

Наше додаток зможе відтворити Google bot і всі його друзі (Bing bot). Таким чином, ми не зіткнемося з проблемою, наведеною на малюнку вище. Ми отримаємо хороші результати пошуку, які очікують від нас користувачі.

[ ] [2]

Як це працює

  • Коли сканер пошукової системи відвідує вашу програму та бачить <meta name = "fragment" content = "!&quot;> Він додасть тег? _Escaped_fragment_ = до вашої URL-адреси.

  • Ваш сервер перехопить цей запит і надішле його до проміжного програмного забезпечення, яке буде обробляти спеціальний запит сканера. Для цієї статті ми вибрали Prerender.io, так що наступний крок є специфічним для Prerender.io.

  • Prerender.io перевірятиме, чи запитана сторінка має наявний знімок (або кешована сторінка), якщо це відбудеться, вона буде обслуговувати цю сторінку сканеру, якщо це не так, то Prerender здійснить виклик PhantomJS, який відобразить Сторінку в цілому і покажіть її сканеру.

  • Сторінки, що не кешуються, для яких потрібно зателефонувати до PhantomJS, займе більше часу, щоб привести до набагато більш тривалого часу відповіді, тому дуже добре кешувати сторінки часто.
  • Є додаткові способи зробити це!
Альтернативи :
  • Налаштуйте власну службу Prerender за допомогою відкритого вихідного коду Prerender.io
  • Використовуйте іншу існуючу послугу, наприклад BromBone , Seo.js або SEO4AJAX
  • Створіть свій власний сервіс для рендерингу та обслуговування знімків у пошукових системах

Про Prerender.io

Prerender.io це послуга, яка сумісна з різними платформами, включаючи Node, PHP і Ruby. Послуга повністю відкритого джерела, але вони пропонують розміщення рішення, якщо ви не хочете йти через клопоту створення власного сервера для SEO. Люди в Prerender вважають, що SEO є правом, а не привілеєм, і вони зробили велику роботу, розширюючи своє рішення, додаючи багато настроюваних функцій і плагінів.

Пакет установки вузла .json

Ми будемо будувати просте додаток Node / AngularJS, що має кілька сторінок з динамічним вмістом, що протікає по всьому. Ми будемо використовувати Node.js як сервер нашого сервера з Express. Перегляньте файл Node package.json нижче, щоб побачити всі наші залежності для цього підручника. Після того, як ви готові, зареєструйтеся безкоштовно prerender.io обліковий запис і отримати свій маркер.

// package.json {"name": "Angular-SEO-Prerender", "description": "...", "version": "0.0.1", "private": "true", "dependencies": {"express": "latest", "prerender-node": "latest"}}

Тепер, коли у нас є готовий до роботи package.json, давайте встановимо наші залежності Node за допомогою npm install.

Сервер установки вузла.js

Налаштування тут досить стандартне. У нашому файлі server.js ми вимагатимемо службу Prerender і підключаємося до неї за допомогою нашого маркера prerender.

// server.js var express = require ('express'); var app = module.exports = express (); app.configure (function () {// Тут потрібне проміжне програмне забезпечення prerender, яке буде обробляти запити з пошукових сканерів // Ми встановлюємо маркер, тільки якщо ми використовуємо службу Prerender.io app.use (require ('prerender- node '). set (' prerenderToken ',' YOUR-TOKEN-HERE ')); app.use (express.static ("public")); app.use (app.router);}); // Це забезпечить передачу всієї маршрутизації до програми AngularJS app.get ('*', функція (req, res) {res.sendfile ('./ public / index.html');}); app.listen (8081); console.log ("Go Prerender Go!");

Головна сторінка index.html

Основна сторінка також є досить стандартною. Напишіть свій код, як звичайно. Велика зміна тут буде просто додати <meta name = "fragment" content = "!"> До <head> вашої сторінки. Цей мета-тег сканує сканерам пошукових систем, що це веб-сайт із динамічним вмістом JavaScript, який потрібно сканувати.

Окрім того, якщо ваша сторінка не кешує належним чином або вона відсутня, можна додати такий фрагмент сценарію: window.prerenderReady = false; які скажуть службі Prerender, що очікують, поки ваша сторінка повністю відобразиться, перш ніж робити знімок. Вам потрібно встановити window.prerenderReady = true, коли ви впевнені, що ваш вміст завершив завантаження. Існує велика ймовірність, що вам не потрібно буде включати цей фрагмент, але опція існує, якщо вона вам потрібна.

Це воно! Додаткові коментарі див. У коді нижче.

<! - index.html -> <! doctype html> <! - Ми створимо головний контролер і прив'яжемо його до HTML, який дасть нам доступ до всього DOM -> <html ng-app = "prerender- Підручник "ng-controller =" mainController "> <head> <meta name =" fragment "content ="! "> <! - Ми визначаємо змінні SEO, які ми хочемо динамічно оновлювати -> <title> Scotch Tutorial | {{seo.pageTitle}} </title> <meta name = "опис" content = "{{seo.metaDescription}}"> <! - CSS -> <link rel = "stylesheet" type = "text / css "href =" / assets / bootstrap.min.css "> <style> тіло {margin-top: 60px; } </style> <! - JS -> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script> < скрипт src = "http://code.angularjs.org/1.2.10/angular-route.min.js"> </script> <script src = "/ app.js"> </script> </head> <body> <div class = "container"> <! - НАВІГАЦІЙНИЙ БАР -> <div class = "bs-example bs-navbar-top-example"> <nav class = "навігатор навігаційної панелі Navbar за умовчанням top "> <div class =" navbar-header "> <a class="navbar-brand" href="/"> Посібник із кутової SEO-обробки </a> </div> <ul class =" nav navbar-nav " > <li> <a href="/"> Домашня сторінка </a> </li> <li> <a href="/about"> Про </a> </li> <li> <a href = " / features "> Особливості </a> </li> </ul> </nav> </div> <h1 class =" text-center "> Ласкаво просимо до підручника Angular SEO Prerender </h1> <! - де ми будемо вводити наші шаблонні дані -> <div ng-view> </div> </div> </body> </html>

Налаштування кутових app.js

У нашій app.js, сторінці, де ми визначаємо наш код AngularJS, нам потрібно буде додати цей код до наших конфігурацій для маршрутів: $ locationProvider.hashPrefix ('!') ;. Цей метод змінить спосіб запису URL-адрес.

Якщо ви використовуєте html5Mode, ви не побачите ніякої різниці, інакше ваш URL буде виглядати як http: // localhost: 3000 / #! / Home порівняно зі стандартним http: // localhost: 3000 / # / home.

Це #! у вашій URL-адресі дуже важливо, оскільки саме це сповістить сканерів про те, що у вашій програмі є вміст AJAX, і що вона повинна робити магію сканування AJAX.

// app.js var app = angular.module ('prerender-tutorial', ['ngRoute']) .config (функція ($ routeProvider, $ locationProvider) {$ routeProvider.when ('/', {templateUrl: 'переглядів /homeView.html ', контролер:' homeController '}) $ routeProvider.when (' / about ', {templateUrl:' /views/aboutView.html ', контролер:' aboutController '}) $ routeProvider.when (' / features) ', {templateUrl:' /views/featuresView.html ', контролер:' featuresController '}) $ routeProvider.otherwise ({redirectTo:' / '}); $ locationProvider.html5Mode (true); $ locationProvider.hashPrefix ('! ');}); function mainController ($ scope) {// Ми створимо змінну seo в області і визначимося, які поля ми хочемо заповнити $ scope.seo = {pageTitle: '', pageDescription: ''}; } function homeController ($ scope) {// Для цього підручника ми просто звернемося до змінної $ scope.seo з головного контролера і заповнимо його вмістом. // Крім того, ви можете створити службу для оновлення змінних SEO - але це для іншого підручника. $ scope. $ parent.seo = {pageTitle: 'AngularJS SEO Tutorial', pageDescripton: 'Ласкаво просимо до нашого підручника про індексацію Google AngularJS веб-сайтів і додатків.' }; } function aboutController ($ scope) {$ scope. $ parent.seo = {pageTitle: 'Про', pageDescripton: 'Ми є веб-сайтом, що містить важкий вміст, тому нам потрібно індексувати.' }; } function featuresController ($ scope) {$ scope. $ parent.seo = {pageTitle: 'Можливості', pageDescripton: 'Перегляньте деякі з наших чудових функцій!' }; }

У наведеному вище коді можна побачити, як ми обробляємо Angular routing і наші різні pageTitle і pageDescription для сторінок. Вони будуть надані сканерам для готової сторінки SEO!

Що відбувається?

Коли сканер відвідує вашу сторінку за адресою http: // localhost: 3000 / #! / Home, URL-адреса буде перетворена в http: // localhost: 3000 /? <em> escaped_fragment </em> = / home middleware бачить цей тип URL, він зробить виклик службі Prerender. Крім того, якщо ви використовуєте HTML5-режим, коли сканер відвідує вашу сторінку за адресою http: // localhost: 3000 / home, URL-адреса буде перетворена в http: // localhost: 3000 / home /? =.

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

Переконайтеся, що він працював

Prerender надає інформаційну панель для перегляду різних сторінок, які були переглянуті та скановані ботами. Це відмінний інструмент, щоб побачити, як працюють ваші сторінки SEO.

Застереження

Нещодавно я отримав шанс поспілкуватися з творцем Prerender.io і попросив у нього деякі поради щодо індексування вашої окремої сторінки. Ось що він сказав:

  • Обслуговування сканерів, попередньо створених HTML, а не JavaScript,
  • Не надсилайте м'які 404
  • Якщо ви дотримуєтеся # # для ваших URL-адрес, переконайтеся, що встановили hashPrefix ('!'), Щоб URL переписали як #! 'S
  • Якщо у вас багато сторінок і вмісту, обов'язково вкажіть sitemap.xml і robots.txt
  • Google сканує лише певну кількість сторінок на день, що залежить від вашого рейтингу. Включення sitemap.xml дозволить вам розставити пріоритети, які сторінки індексуються.
  • Під час тестування для перегляду сторінок AngularJS у Інструментах Google для веб-майстрів обов'язково додайте #! або? _escaped_fragment_ = у потрібному місці, оскільки ручні інструменти не ведуть себе точно так, як це роблять фактичні сканери.

Висновок

Сподіваюся, ви не дозволить SEO недолік Angular додатків тримати вас назад від використання великий інструмент. Є служби, такі як Prerender і способи сканування вмісту AJAX. Не забудьте подивитися на Правила сканування AJAX для веб-майстрів Google і весело побудуйте ваші SEO дружні програми!

Quot;> Він додасть тег?
Що відбувається?
Home, URL-адреса буде перетворена в http: // localhost: 3000 /?
Крім того, якщо ви використовуєте HTML5-режим, коли сканер відвідує вашу сторінку за адресою http: // localhost: 3000 / home, URL-адреса буде перетворена в http: // localhost: 3000 / home /?
Або?
Меню сайта
Мини-профиль

    • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости