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!

Похожие

SEO
... что вы сможете оставлять комментарии, а также статьи с основной целью защиты обратных ссылок для вашего сайта"> Xrumer - это программное обеспечение, специально разработанное для Цели SEO , Это программное обеспечение, которое гарантирует, что вы сможете оставлять комментарии, а также статьи с основной целью защиты обратных ссылок для вашего сайта. Теперь публикация на сайтах с высоким авторитетом домена поможет вашему сайту вырасти в рейтинге
SEO / Международный SEO
В цифровом мире, в котором будет более 30 миллиардов веб-страниц, кампания позиционирования на международном уровне является жизненно важным ключевым шагом для вас, чтобы найти новых клиентов за рубежом. Международная SEO
Услуги SEO компании
... это процесс « оптимизации » архитектурных аспектов веб-сайта для поисковых систем. Как сайт разработан, играет решающую роль в том, сколько органического (естественного) трафика он получит. Поисковые системы, как правило, дают « высокий рейтинг » на сайты, созданные с поисковая оптимизация в уме. Это связано с тем, что оптимизированные веб-сайты проще для поисковых систем.
SEO Доктор
SEO-врач является незаменимым инструментом как для начинающих, так и для специалистов по SEO для определения проблем, связанных с позиционированием веб-страниц. Будьте основаны на рекомендациях Google. Если вы используете Firefox, у вас есть дополнение или расширение, которое вы можете установить бесплатно и воспользоваться его преимуществами, так как оно информирует вас о том, что вы должны улучшить страницу, чтобы улучшить свое позиционирование. Консоль открытого аддона
SEO Jun-Young
3/5 Bleak Night был показан 18 июня 2011 года на Эдинбургском международном кинофестивале. После своего успеха на Международном кинофестивале в Пусане в 2010 году, где он получил премию «Новый ток», Bleak
Почувствуйте SEO - мы говорим на SEO
... что посетители попадают на сайт через результаты поиска. Это легче сказать, чем сделать. Оптимизаторы поисковых систем размещают ссылки и размещают контент на таких сайтах, которые имеют максимальное количество посетителей. Содержание должно быть достаточно интересным, чтобы привлечь посетителей. Во-вторых, количество ссылок - взаимных и невзаимных будет зависеть от эффективности сайта в поисковых системах. AdWords: объявления создаются для веб-сайта, чтобы повысить
Как должна быть целевая страница SEO?
Чтобы ответить на этот вопрос, необходимо принять во внимание некоторые аспекты и идею о том, что не существует идеальной формулы, которая позволила бы вам повторить ее влияние на разные целевые страницы SEO со 100% гарантированным успехом. Создание страницы, которая позиционирует первую, не гарантирует, что, создав другую страницу с той же структурой для других результатов поиска, на той же странице, мы получим тот же результат. Даже если соревнование «вдохновлено»,
SEO маркетинг - Position1SEO
... это обширное место, и большинство людей будут использовать поисковые системы, чтобы найти то, что они хотят, поэтому, как только вы победите, клиенты будут повсюду, не так ли? К сожалению, это не всегда так. Хотя это невероятно полезно для вас, чтобы попасть наверх страницы 1 в Google, и, несомненно, приведет к большему количеству посетителей, чем вы когда-либо имели, это не обязательно приведет к продажам. Веб-пользователи могут быть невероятно непостоянными, и даже находясь
Seo Script
vialimachicago.com - Seo Script Инструмент SEO Используйте наш БЕСПЛАТНЫЙ инструмент SEO для проведения анализа поисковой оптимизации на странице, измерения усилий SEO и выявления проблем на ваших страницах. Доступны советы и предложения о том, как повысить рейтинг веб-страниц в результатах обычного поиска. Как получить в 10 раз больше SEO-продаж. Один из лучших способов сделать это - предложить инструмент
SEO CAMPIXX 2018
SEO CAMPIXX Также в марте у нас была возможность насладиться SEO Campixx. В Берлине нас было даже трое, и мы смогли собрать много знаний и важных идей. Основные моменты: Также в этом году наш рейс был отменен! Но, к счастью, нам удалось заполучить другого, и нам не пришлось ехать шесть часов на поезде, как в прошлом году. YAY! Кроме того, многие ораторы были пойманы волной гриппа, поэтому некоторые
Санта-Барбара SEO
... что веб-дизайнеры будут осведомлены о юзабилити, и если их роль заключается в создании разметки, то они также должны быть в курсе руководящих принципов веб-доступности. Мы предоставляем лучшие SEO Санта-Барбара . Свяжитесь с нами с вашим проектом SEO Санта-Барбара.

Комментарии

За исключением случаев, если это действительно так, как мы можем объяснить Заключение Бинлинко что низкие показатели отказов связаны с более высоким рейтингом?
SEO компании Поисковая оптимизация (SEO) - это метод или инструмент, который позволяет повысить рейтинг сайта в различных поисковых системах. Поисковая оптимизация - это оптимизация технологии, контента и ссылок с других веб-сайтов, чтобы ваш веб-сайт выглядел лучше в результатах поиска различных результатов поисковых систем. Поисковая оптимизация включает в себя несколько различных форм поиска; новости, картинки, видео и география. Поисковая оптимизация может быть
Напомним, что было несколько страниц рейтинга / конкурентов с гораздо меньшей плотностью ключевых слов, чем остальные три, которые мы рассматривали, так что же мы сделали?
Напомним, что было несколько страниц рейтинга / конкурентов с гораздо меньшей плотностью ключевых слов, чем остальные три, которые мы рассматривали, так что же мы сделали? Начните с базовой линии среднего. Оказалось, 1,5% здесь . Как бы мне ни хотелось начать работу, Мари и я согласились, что 15 хорошо продуманных постов будут хорошим началом, и в зависимости от того, как рейтинг начнет сдвигаться, мы будем подгонять число выше или ниже по мере необходимости. [
Как мы можем убедиться, что мы там?
Как мы можем убедиться, что мы там? Ресурс, который все еще часто упускают из виду, Google My Business , эволюция того, что до недавнего времени было Google Places . Кто бы ни имел компанию, особенно если она небольшая, по всей вероятности, уже вступил в контакт с нами (также потому, что во многих ситуациях есть один из владельцев, который занимается практически всем, включая присутствие в Интернете); однако
Как вы думаете, со временем, когда вы опубликуете ранжирующие факторы 4, значение социальных сетей будет расти, или мы будем вспоминать это как причуду?
Как вы думаете, со временем, когда вы опубликуете ранжирующие факторы 4, значение социальных сетей будет расти, или мы будем вспоминать это как причуду? Я бы сказал, что некоторые данные социальных графов, вероятно, станут более важными как в совокупности, так и для обнаружения. Многие оптимизаторы полагают, что ссылки, которыми обмениваются такие сервисы, как Facebook и Twitter, вероятно, уже попадают в самые свежие индексы поисковых систем, и данные, касающиеся количества акций,
Но что это такое, почему это так важно и как вы можете оптимизировать его для поисковых систем?
Но что это такое, почему это так важно и как вы можете оптимизировать его для поисковых систем? Что такое бюджет обхода? Проще говоря, бюджет сканирования - это воображаемое количество страниц, которые робот Google потратит, пытаясь просканировать и проиндексировать ваш сайт. Если у вас есть веб-сайт с более чем 1000 URL-адресов и всего лишь несколькими обратными ссылками, есть вероятность, что робот Googlebot не будет сканировать весь ваш сайт на регулярной
Но что, если вы все равно обнаружите, что результаты включения вашей страницы в китайских поисковых системах, таких как Baidu, не так много, как в Google?
Но что, если вы все равно обнаружите, что результаты включения вашей страницы в китайских поисковых системах, таких как Baidu, не так много, как в Google? Если это произойдет с вами, я считаю, что ваш веб-сервер, скорее всего, будет размещен за пределами Китая. В этом случае, вы все еще можете улучшить уровень включения страницы? Ответ - да. Сначала проверьте ваш сайт в Baidu Zhanzhang инструмент (Версия Baidu для веб-мастеров).
SEO - это аббревиатура: поисковая оптимизация, что означает: поисковая оптимизация, но что это означает в конечном итоге?
SEO - это аббревиатура: поисковая оптимизация, что означает: поисковая оптимизация, но что это означает в конечном итоге? Чтобы понять лучше, это: процедура для улучшения трафика или посещений вашего сайта с помощью различных методов, которые могут помочь вашему сайту, находится на первых местах интернет-поиска, как в поисковой системе Google , Это сделает вашу веб-страницу на высоком месте или в первых местах страницы поиска Google и поможет увеличить количество посещений вашей веб-страницы,
Так что, если вы можете сделать SEO по очень дешевой цене, почему многие агентства так много взимают с вас за SEO?
Так что, если вы можете сделать SEO по очень дешевой цене, почему многие агентства так много взимают с вас за SEO? Ответ таков: SEO - это долгосрочный, хорошо спланированный, трудоемкий процесс, который не доступен по низким ценам. SEO требует много усилий, когда намеревается сделать все правильно. Успешный SEO требует много ресурсов, индивидуальных решений и интеллекта, чтобы выяснить технические проблемы веб-сайта и его потребности.
Я видел, что вселенная намного больше, чем мы предполагали, ты не возражаешь, что это происходит в X частях?
Я видел, что вселенная намного больше, чем мы предполагали, ты не возражаешь, что это происходит в X частях?» И Они, как правило, очень понимающие, поэтому проблем нет, но, да, это всегда методом проб, ошибок, иногда они застряли, а иногда из-за опыта ... Любой инструмент, чтобы рекомендовать в отношении этого внутреннего управления? Прямо сейчас я решил сосредоточить все в одном и очень просто, чтобы все знали, что это Trello Да ...?
Мы могли бы говорить о SEO весь день, но сегодня мы просто расскажем, что такое SEO вне сайта?
Мы могли бы говорить о SEO весь день, но сегодня мы просто расскажем, что такое SEO вне сайта? По сути, SEO на месте - это вся поисковая оптимизация, которую вы выполняете на своем собственном сайте, то есть на собственном контенте. Вне сайта, вы рассматриваете все, что возвращается на ваши сайты. Таким образом, весь трафик поступает, будь то гостевой блог, статьи, даже события, размещенные на других сайтах, все, что возвращается на ваш сайт и обеспечивает видимость домена с других сайтов,
Так как же SEO не хватает в кредит, и на что еще они должны смотреть?
Так как же SEO не хватает в кредит, и на что еще они должны смотреть? Органический поиск изменился Традиционно, способ, которым мы оцениваем успех кампании SEO, является ростом органического канала. По сути, чем больше посещений и сеансов, проходящих через этот канал, тем лучше. В то время как поиск стал более обширным, охватывая все от онлайн пиар в соц Эта

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