Руководство разработчика по SEO для веб-приложений AngularJS

До 23 мая 2014 года, если бы вы попросили меня создать для вас веб-сайт JavaScript, который можно было бы сканировать с помощью поисковых машин, я бы постарался вас отговорить. Теперь, если вы спросите меня, я скажу вам, что это путь.
Почти все JavaScript MVC-фреймворки, включая AngularJS, изменяют внутреннее содержимое вашей HTML-структуры. Это делало предварительно проиндексированный HTML сложным для индексации поисковыми системами. Однако с развитием технологий, Google и другие поисковые системы лучше понимать веб-страницы , Сканирование с помощью JavaScript-ботов, а точнее просто JS, больше не является серьезной проблемой, и контент все большего числа веб-приложений индексируется поисковыми системами.
Это потрясающая новость для веб-мастеров, однако сам Google советует быть осторожным.

«Всегда хорошая идея, чтобы ваш сайт изящно ухудшался. Это поможет пользователям наслаждаться вашим контентом, даже если их браузер не имеет совместимых реализаций JavaScript. Это также поможет посетителям с отключенным или отключенным JavaScript, а также поисковым системам, которые еще не могут выполнить JavaScript ». Google.

Так что еще не пришло время отказаться от старых уловок по оптимизации поискового движка в JavaScript. Есть много способов, которые старые веб-мастера используют для полной поддержки SEO для AngularJS и других приложений. Но, по моему мнению, лучший способ сделать JS SEO дружественным - это использовать специальную маршрутизацию URL-адресов и создать автономный браузер для автоматического извлечения HTML-кода.

Индексирование ваших приложений AngularJS

Хотя Google индексирует ваш контент автоматически, вы можете настроить свойства отображения контента таким образом, чтобы боты Google индексировали ваш контент именно так, как вы хотите. Один из самых простых способов добиться этого, обслуживая ваш контент Angular JS через пользовательский внутренний сервер.

URL современных поисковых систем и клиентских приложений

Чтобы упростить работу по индексированию контента веб-приложений, Google и другие поисковые системы предоставили веб-мастерам функцию формата URL-адреса hashbang . Всякий раз, когда поисковая система встречает URL-адрес хэш-мешка, то есть URL-адрес, содержащий #! ' он преобразует его в ? _escaped_fragment_ = URL, где он найдет полностью обработанный HTML-контент, готовый для индексации.

Так, например, Google превратит URL-адрес hashbang из: http://www.example.com/#!/page/content в URL: http://www.example.com/?_escaped_fragment_=/page/content

По второму URL, который, кстати, изначально не отображается для посетителей сайта, поисковая система найдет не-JS контент, который будет легко проиндексировать.
Теперь следующий шаг - сделать ваше приложение достаточно интеллектуальным, чтобы при поиске роботом второй страницы URL-адрес вашего сервера возвращал необходимые HTML-снимки страницы. Таким образом, вам нужно настроить следующий специальный URL-адрес перенаправления / переписывания для вашего приложения.

RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /? (. *) $ RewriteRule ^ (. *) $ / Snapshots /% 1? [NC, L]

Здесь вы заметите, что мы настроили специальный каталог моментальных снимков в качестве URL перенаправления. Этот каталог будет содержать ваши снимки HTML соответствующих страниц приложения. Вы можете настроить свой собственный каталог и внести соответствующие изменения.

Следующая проблема, которую нужно решить, - дать AngularJS команду использовать hashbangs. Angular по умолчанию производит URL-адреса только с # вместо #! , Чтобы сделать это в Angular, просто добавьте следующий модуль в качестве зависимости с основными модулями Angular.

angular.module ('HashBangURLs', []). config (['$ locationProvider', function ($ location) {$ location.hashPrefix ('!');}]);

Создание режимов маршрутизации HTML5 вместо Hashbangs

Мы упомянули, что HTML5 потрясающий? Ну, это так. Таким образом, наряду с техникой Hashbang, о которой мы упоминали выше, комбинация HTML5 и AngularJS дает нам еще один хак, чтобы обманом заставить поисковые системы разбирать URL-адреса _escaped_fragment_ , фактически не используя URL-адреса Hashbang.
Для этого сначала вы должны указать Google, что мы на самом деле используем контент AJAX, и бот должен посетить тот же URL-адрес, используя синтаксис _escaped_fragment_. Вы можете сделать это, включив следующую мету в свой HTML-код.

Затем мы должны были бы настроить AngularJS так, чтобы он использовал URL-адреса HTML5 всякий раз, когда и где бы он ни обрабатывал URL-адреса и маршрутизацию. Вы можете сделать это, добавив следующий модуль AnglarJS в ваш код

angular.module ('HTML5ModeURLs', []). config (['$ routeProvider', function ($ route) {$ route.html5Mode (true);}]);

Обработка SEO со стороны сервера с использованием ExpressJS

В наших предыдущих постах мы говорили об удивительности ExpressJS как наш серверный JavaScript / nodeJS фреймворк , Ну, вы также можете использовать ExpressJS для нашего перенаправления на стороне сервера вместо Apache.
Чтобы ваша инфраструктура ExpressJS доставляла статический HTML, нам сначала нужно будет установить промежуточное ПО, которое будет искать _escaped_fragment_ в наших входных URL-адресах. Как только он будет найден, он мгновенно предоставит снимки HTML.

// В нашей конфигурации app.js app.use (function (req, res, next) {var фрагмент = req.query._escaped_fragment_; // Если в параметрах запроса нет фрагмента //, то мы не обслуживаем сканер if (! фрагмент) return next (); // если фрагмент пустой, обслуживаем // страницу индекса if (фрагмент === "" || фрагмент === "/") фрагмент = "/index.html "; // Если фрагмент не начинается с '/' // добавляем его к нашему фрагменту if (фрагмент.charAt (0)! ==" / ") фрагмент = '/' + фрагмент; // Если фрагмент не заканчивается с помощью .html // добавляем его к фрагменту if (фрагмент.indexOf ('. html') == -1) фрагмент + = ".html"; // подаем статический снимок html try {var file = __dirname + "/ snapshots" + фрагмент; res.sendfile (файл);} catch (err) {res.send (404);}});

Еще раз мы настроили наши снимки в каталоге верхнего уровня с именем / snapshot . В ExpressJS также учитывается возможность того, что URL, отображаемый бот-поисковиком, не имеет простых синтаксических функций, таких как «/» или «.html» , и, таким образом, обеспечивает правильную часть для бота.

Делая снимки, используя Node.JS

На рынке доступно множество инструментов, которые вы можете использовать для создания снимков HTML вашего веб-приложения, из которых: Zombie.JS а также Phantom.JS являются наиболее используемыми. Эти снимки - это то, что мы возвращаем, когда Google запрашивает URL с запросом _escaped_fragment_ .

Идея, стоящая за PhantomJS и даже ZombieJS, состоит в том, чтобы создать автономный браузер, который обращается к обычному URL-адресу страницы вашего веб-приложения, захватывает отображаемый HTML-контент, когда он полностью выполняется, и затем возвращает окончательный HTML-код во временный файл.
Существует множество ресурсов, которые помогут вам сделать это сами, например:

Поэтому мы не будем вдаваться в подробности по этому вопросу. Тем не менее, мы бы хотели выделить инструмент с открытым исходным кодом, который вы используете для создания снимков HTML, Prerender.IO , Вы можете использовать его в качестве службы или установить на своем собственном сервере, так как проект с открытым исходным кодом и доступен на GitHub

Однако, что еще проще, это инструмент под названием Grunt-html-snapshot, и угадайте, где его можно найти, Node.JS.

NodeJS поставляется с инструментом Grunt, и вы можете легко использовать его для создания собственных скриншотов без проблем. Вот шаги, чтобы настроить инструмент grunt и начать производить HTML

Сначала установите NodeJS. Вы можете скачать его с http://nodejs.org , Вместе с узлом также установите npm (менеджер пакетов узла). Для пользователей Mac и Windows NodeJS поставляется в виде клика и установки приложений. Пользователи Ubuntu должны извлечь файл tar.gz, а затем установить его из командного терминала. Те, у кого установлена последняя версия Ubuntu, также могут установить с помощью команды sudo apt-get install nodejs nodejs-dev npm . Npm оснащен Grunt
Откройте командную консоль и перейдите в папку вашего проекта.
Чтобы установить инструмент Grunt глобально, выполните команду: npm install -g grunt-cli
Вы также можете установить локальную копию Grunt и его важную функцию HTML-снимка с помощью команды npm install grunt-html-snapshot –save-dev
Следующим шагом будет создание собственного файла JavaScript grunt Gruntfile.js. Файл JS будет иметь следующий код

module.exports = function (grunt) {grunt.loadNpmTasks ('grunt-html-snapshot'); grunt.initConfig ({htmlSnapshot: {all: {options: {snapshotPath: '/ project / snapshots /', sitePath: 'http://example.com/my-website/', URL: ['#! / page1' , '#! / page2', '#! / page3'] sanitize: function (requestUri) {// возвращает «index.html», если URL-адрес «/», в противном случае префикс if (// $ /. test ( requestUri)) {return 'index.html';} else {return requestUri.replace (/// g, 'prefix-');}}, // если вы не хотите хранить теги сценария в снимках html // установите для `removeScripts` значение true. По умолчанию оно равно false removeScripts: true,}}}}); grunt.registerTask ('default', ['htmlSnapshot']); };

Сделав это, вы можете запустить задачу с помощью команды grunt htmlSnapshot

У инструмента Grunt есть еще несколько функций, которые мы здесь пропустили. Вы можете узнать о них больше на Грунт-HTML-снимок стр. Вы также заметите, что в задаче мы указываем путь к странице веб-приложения, поэтому для ее правильной работы необходимо сначала настроить свой веб-сайт на сервере, а затем указать задачу на правильные URL-адреса. Также снимок здесь автоматически сохраняется по пути / project / snapshots / , вы можете изменить его в соответствии с вашими требованиями.

Карты сайта также важны

Для более точного контроля над тем, как роботы поисковых систем получают доступ к вашему сайту, вам также необходимо настроить карту своего сайта. Всякий раз, когда бот поисковой системы находит example.com/sitemap.xml, он следует по ссылкам, указанным в карте сайта, прежде чем вслепую следовать всем ссылкам сайта. Это лучший способ, если вы хотите проиндексировать страницу, которая не связана ни с какой другой страницей, например с целевыми страницами кампании почтовой рассылки, хотя эта практика не одобряется.
Для содержимого AJAX лучше всего перечислить все страницы / URL-адреса, которые генерирует ваше приложение, чтобы поисковые системы правильно их индексировали, даже если ваше приложение представляет собой одностраничное приложение. Вот пример карты сайта

</voprosy/rukovodstvo/ru/urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9"> ... </voprosy/rukovodstvo/ru/url> <loc> http://www.yourwebsite.com/#!/page1 </ loc> < changefreq> daily </ changefreq> <priority> 1.0 </ priority> </ /voprosy/rukovodstvo/ru/url> </voprosy/rukovodstvo/ru/url> <loc> http://www.yourwebsite.com/#!/page2 </ loc> <changefreq> daily </ changefreq > <priority> 1.0 </ priority> </ /voprosy/rukovodstvo/ru/url> </voprosy/rukovodstvo/ru/url> <loc> http://www.yourwebsite.com/#!/page3 </ loc> <changefreq> daily </ changefreq> <priority> 1.0 < / priority> </ /voprosy/rukovodstvo/ru/url> ... </ /voprosy/rukovodstvo/ru/urlset>

AngularJS Awesomeness

Из-за препятствий, связанных с неиндексируемостью, нет никаких причин, по которым вы не можете создавать целые веб-страницы с помощью JavaScript. Люди уже в значительной степени полагаются на JS, и эта тенденция не остановится. Ранее основной проблемой был HTML, но теперь с решением индексированного контента AJAX вы можете делать практически все. Go Fly.

Следующие две вкладки изменяют содержимое ниже.

Rachit является лидером по развитию бизнеса мобильности, стратегии мобильности и практики консалтинга в Algoworks. Он является экспертом по всем мобильным технологиям и имеет опыт управления командами, занимающимися разработкой пользовательских приложений для iPhone / iPad / Android.

Есть ли у них поддержка, необходимая для создания контента сайта, который хорошо оптимизирован для поисковых систем?
Есть ли у них поддержка, необходимая для создания контента сайта, который хорошо оптимизирован для поисковых систем? Скорее всего, ответ «нет». Вот тут-то и приходит наша команда. В одном случае мы работали с компанией по франчайзингу в сфере изоляции, чтобы создать оптимизированный веб-контент для своих десятков мест по всей стране, что дало каждому филиалу шанс доминировать в органической отрасли. Поле поиска для своих рынков. Локальный SEO для франшиз Как франшиза,

Как я могу оптимизировать свой блог для современных поисковых систем?
Как я могу оптимизировать свой блог для современных поисковых систем? Сегодня я расскажу о том, как оптимизировать ваш блог для поисковых систем в 2017 году. Я собираюсь поделиться тем, почему я считаю, что SEO сегодня важнее, чем когда-либо. Послушайте этот эпизод Но я также расскажу, как убедиться, что вы делаете то, что вам нужно, когда дело доходит до SEO. Сначала я расскажу о некоторых основах, но потом я расскажу о некоторых новых вещах, о

Как эта статья о том, что такое SEO на странице и SEO вне страницы, и как они могут быть важны для вашего электронная коммерция ?
Как я могу оптимизировать свой блог для современных поисковых систем? Сегодня я расскажу о том, как оптимизировать ваш блог для поисковых систем в 2017 году. Я собираюсь поделиться тем, почему я считаю, что SEO сегодня важнее, чем когда-либо. Послушайте этот эпизод Но я также расскажу, как убедиться, что вы делаете то, что вам нужно, когда дело доходит до SEO. Сначала я расскажу о некоторых основах, но потом я расскажу о некоторых новых вещах, о

Существуют ли конкретные условия для каких поисковых терминов, какая страница вашего сайта должна и когда и где в Google и, возможно, в других поисковых системах?
Существуют ли конкретные условия для каких поисковых терминов, какая страница вашего сайта должна и когда и где в Google и, возможно, в других поисковых системах? Обязательно напишите цели в договоре. Есть даже несколько агентств, которые работают исключительно на основе успеха, то есть они хотят получать вознаграждение только после достижения обещанного рейтинга. 2. «Молодежь лучше знакома с интернетом» Вы хотели бы, чтобы кто-то еще позаботился о вашем сайте,

Почему малые инструменты SEO важны?
Почему малые инструменты SEO важны? Он предлагает лучшие и качественные инструменты SEO людям бесплатно и легко в использовании. Первый шаг в жизни веб-сайта - это подбор ключевых слов, и это тяжелая работа. Правильные идеи ключевых слов можно назвать сильной основой веб-страницы. Короче говоря, Small SEO tools является источником советов и рекомендаций по оптимизации сайта, которые могут помочь всем начинающим и SEO-экспертам. Какие

Не знаете, как адаптироваться к новым вызовам поисковых систем?
Не знаете, как адаптироваться к новым вызовам поисковых систем? Просто спросите Каттса. Если вам повезло и ваш вопрос действительно интересен, он предложит вам ответ в видео размещено на YouTube. 2) Рэнд Фишкин: он является генеральным директором Мос и широко уважаемый эксперт SEO. Блог Moz - один из самых популярных SEO-блогов в Интернете, за которым следят тысячи

Как начать работу со стратегией SEO?
Как начать работу со стратегией SEO? Есть так много факторов, которые все складываются, чтобы повлиять на ваш рейтинг SEO. Но в этом выпуске мы поможем вам осветить некоторые из основных и существенных факторов, которые помогут вам подняться по этой поисковой лестнице. Письменный контент Лучший способ начать оптимизацию контента для поисковых систем - это сначала написать контент для людей. Если вы создаете высококачественную запись в блоге, которая полностью

Знаете ли вы, что видео вашего колледжа или университета на YouTube можно оптимизировать для поисковых систем?
Знаете ли вы, что видео вашего колледжа или университета на YouTube можно оптимизировать для поисковых систем? Является ли видео частью стратегии SEO вашего колледжа или университета? Ранее в этом году мы говорили о как продвигается видео маркетинг в высшем образовании. Все больше и больше потенциальных учеников пытаются почувствовать ваш колледж или университет, прежде чем они физически

Вы пришли к выводу, что является плагином WordPress SEO для вашего сайта?
Вы пришли к выводу, что является плагином WordPress SEO для вашего сайта? Есть много других вариантов, но мой любимый - Yoast SEO. WordPress SEO от Yoast - самый популярный плагин для SEO на WordPress. Это можно увидеть в примерно 2000 обзорах с общим рейтингом 4 из 5 звезд.

Но в большинстве случаев говорят, что во всей стране есть ряд институтов, которые предлагают SEO и ассоциированные курсы, тогда зачем человеку искать и изучать учебный институт SEO в Лахоре?
Но в большинстве случаев говорят, что во всей стране есть ряд институтов, которые предлагают SEO и ассоциированные курсы, тогда зачем человеку искать и изучать учебный институт SEO в Лахоре? Ответ прост: у Лахора есть лучшие технологические школы, и он намного более продвинут в области интернета по сравнению с другими крупными городами страны, поэтому цель обучения SEO в Лахоре - стать лучшим профессионалом в этой области. поле с максимальной экспозицией. Лучшее SEO обучение с квалифицированным

Каковы сильные и слабые стороны и возможности сайта?
Каковы сильные и слабые стороны и возможности сайта? Насколько длительным должен быть перезапуск? - Все чаще важна концептуальная работа, для которой нужны не только знания SEO, но и маркетинговые знания. Главный вопрос заключается в том, какие целевые группы следует адресовать на странице, как они общаются в Интернете и какой контент они ожидают. Для дизайна контента и оптимизации ключевых слов целевых страниц правильные ответы имеют решающее значение для успеха. Конечно, веб-аналитика

Com/?
RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /?
RewriteRule ^ (. *) $ / Snapshots /% 1?
Это видно (позиционирование)?
Каковы его сильные стороны?
Что нуждается в улучшении?
Надоело получать очень низкий трафик на ваш сайт или блог?
Что такое SEO?
Есть ли у них поддержка, необходимая для создания контента сайта, который хорошо оптимизирован для поисковых систем?
Как я могу оптимизировать свой блог для современных поисковых систем?