AngularJS SEO с Prerender.io

  1. Эта проблема
  2. Решение
  3. Что мы будем строить
  4. Как это устроено
  5. О компании Prerender.io
  6. Настройка узла package.json
  7. Настройка узла server.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 и все его друзья (бот Bing). Таким образом, мы не столкнемся с проблемой, показанной на картинке выше. Мы получим хорошие результаты поиска, как и ожидают от нас наши пользователи.

[ ] [2]

Как это устроено

  • Когда поисковый движок посещает ваше приложение и видит <meta name = "фрагмент" 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 - это право, а не привилегия, и они проделали большую работу, расширив свое решение, добавив множество настраиваемых функций и плагинов.

Настройка узла package.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.

Настройка узла server.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- узел '). set (' prerenderToken ',' YOUR-TOKEN-HERE ')); app.use (express.static ("public")); app.use (app.router);}); // Это гарантирует, что вся маршрутизация будет передана AngularJS app.get ('*', function (req, res) {res.sendfile ('./ public / index.html');}); app.listen (8081); console.log («Go Prerender Go!»);

Главная страница index.html

Главная страница тоже довольно стандартная. Напишите свой код, как обычно. Большим изменением здесь будет просто добавление <meta name = "фрагмент" content = "!"> К <head> вашей страницы. Этот метатег сообщит сканерам поисковых систем, что это веб-сайт с динамическим содержимым JavaScript, который необходимо сканировать.

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

Это оно! Пожалуйста, смотрите код ниже для дополнительных комментариев.

<! - index.html -> <! doctype html> <! - Мы создадим mainController и свяжем его с HTML, который даст нам доступ ко всему DOM -> <html ng-app = "prerender- tutorial "ng-controller =" mainController "> <head> <meta name =" фрагмент "content ="! "> <! - Мы определяем переменные SEO, которые хотим динамически обновлять -> <title> Scotch Tutorial | {{seo.pageTitle}} </ title> <meta name = "description" content = "{{seo.metaDescription}}"> <! - CSS -> <link rel = "stylesheet" type = "text / css "href =" / assets / bootstrap.min.css "> <style> body {margin-top: 60px; } </ style> <! - JS -> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </ script> < 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 navbar-default navbar-fixed- 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 </ 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 (function ($ routeProvider, $ locationProvider) {$ routeProvider.when ('/', {templateUrl: 'views /homeView.html ', controller:' homeController '}) $ routeProvider.when (' / about ', {templateUrl:' /views/aboutView.html ', controller:' aboutController '}) $ routeProvider.when (' / features ', {templateUrl:' /views/featuresView.html ', controller:' 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: 'Добро пожаловать в наш учебник по индексированию сайтов и приложений AngularJS от Google.' }; } function aboutController ($ scope) {$ scope. $ parent.seo = {pageTitle: 'About', pageDescripton: 'Мы являемся веб-сайтом с большим содержанием, поэтому мы должны быть проиндексированы.' }; } function featuresController ($ scope) {$ scope. $ parent.seo = {pageTitle: 'Features', pageDescripton: 'Проверьте некоторые из наших замечательных функций!' }; }

В приведенном выше коде вы можете увидеть, как мы обрабатываем угловую маршрутизацию, а также наши разные pageTitle и pageDescription для страниц. Они будут переданы сканерам для SEO-готовой страницы!

Так что же происходит?

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

Служба Prerender проверит и увидит, есть ли у него снимок или уже отрендеренная страница для этого URL, если он это сделает, то отправит ее сканеру, если нет, то сделает моментальный снимок и отправит отрендеренный HTML. сканеру для правильной индексации.

Убедиться, что это сработало

Prerender предоставляет панель инструментов для просмотра различных страниц, которые были обработаны и просканированы ботами. Это отличный инструмент, чтобы увидеть, как работают ваши SEO страницы.

Предостережения

Недавно я получил возможность пообщаться с создателем Prerender.io и попросил его дать несколько советов по индексированию вашего одностраничного приложения. Вот что он должен был сказать:

  • Служите сканерам предварительно обработанным HTML, а не JavaScript,
  • Не отправляйте мягкие 404-е
  • Если вы придерживаетесь # для своих URL, убедитесь, что установили hashPrefix ('!'), Чтобы URL переписывались как #!
  • Если у вас много страниц и контента, обязательно добавьте sitemap.xml и robots.txt
  • Google сканирует только определенное количество страниц в день, что зависит от вашего PageRank. Включение файла sitemap.xml позволит вам определить, какие страницы индексируются.
  • При тестировании, чтобы увидеть, как ваши страницы AngularJS отображаются в Google Webmaster Tools, обязательно добавьте #! или? _escaped_fragment_ = в нужном месте, так как ручные инструменты не ведут себя точно так же, как фактические сканеры.

Заключение

Надеюсь, вы не позволите недостатку SEO приложений Angular удержать вас от использования этого замечательного инструмента. Существуют такие сервисы, как Prerender и способы сканирования содержимого AJAX. Обязательно посмотрите на Руководство по сканированию AJAX для веб-мастеров Google и получайте удовольствие, создавая свои дружественные для SEO приложения Angular!

Quot;>, Он добавляет тег?
Так что же происходит?
Home, URL-адрес преобразуется в http: // localhost: 3000 /?
Кроме того, если вы используете режим HTML5, когда сканер заходит на вашу страницу по адресу http: // localhost: 3000 / home, URL-адрес будет преобразован в http: // localhost: 3000 / home /?
Или?