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

  1. Индексирование ваших приложений AngularJS
  2. URL современных поисковых систем и клиентских приложений
  3. Создание режимов маршрутизации HTML5 вместо Hashbangs
  4. Обработка SEO со стороны сервера с использованием ExpressJS
  5. Делая снимки, используя Node.JS
  6. Карты сайта также важны

До 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-код.

<meta name = "фрагмент" content = "!">

Затем мы должны были бы настроить 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-адреса, которые генерирует ваше приложение, чтобы поисковые системы правильно их индексировали, даже если ваше приложение представляет собой одностраничное приложение. Вот пример карты сайта

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

AngularJS Awesomeness

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

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

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

Com/?
RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /?
RewriteRule ^ (. *) $ / Snapshots /% 1?
Меню сайта
Новости
Ошибка Открытия Драйвера Казаки
Ошибка Microsoft Visual C++ Runtime Library. Как исправить? Здравствуйте. Не так давно помогал одному хорошему знакомому с настройкой компьютера: у него при запуске любой игры выскакивала ошибка Microsoft

Волчья сотня | Si vis pacem, para bellum!
02/06/2012 Волчья сотня «Волчья сотня» — неофициальное название 2-й сотни 2-го Аргунского полка Забайкальского казачьего войска в Русско-японскую войну 1904—1905 годов. Казаки-аргунцы,

Обаяние мужественности и профессионализма Андрей Казаков
Обаяние мужественности и профессионализма Имя Андрея Казакова долгое время было хорошо известно лишь столичным любителям театра. Актер и режиссер, удостоенный звания Заслуженного артиста и нескольких

Тайна "Тихого Дона" Шолохова: своровал или нет?
Несколько поколений литературоведов и историков спорили о том, мог ли полуграмотный казак Михаил Шолохов написать "Тихий Дон", да ещё в 23 года, не имея необходимого для романа-эпопеи жизненного опыта.

Андрей Казаков / Andrei Kazakov
Детство и юность Андрея Казакова Путь к сцене Андрея Казакова был долгим и причудливым. Молодой человек попробовал себя в нескольких профессиях и только потом решил стать актером. Андрей родился в семье

Взятие Азова донскими казаками в 1637 году
Автор: А. Пивоваров Источник: "Донские казаки". Краткій сборникъ разсказовъ изъ военной жизни Донцовъ, о ихъ храбрости, находчивости въ бою, преданности долгу и проч.Новочеркасская типография. 1892

Василий Иванович Баженов (1737–1799)
Один из основоположников русского классицизма. Учился в "архитектурной команде" Г. В. Ухтомского и в Академии художеств с момента се основания. Проектировал Большой Кремлевский дворец в Москве.

КИРИЛЛ КОЗАКОВ ВИКИПЕДИЯ - Кирилл Козаков биография актера, фото, личная жизнь
Школьные годы Михаил Козаков вспоминает с неохотой. Актер театра и кино, сын известного советского актера Михаила Козакова. Михаил Козаков родился 14 октября 1934 года в Ленинграде. Описание отчество

Все ответы на игру Угадай слово по подсказке
Нас уже на самом деле давно просили сделать ответы для этой игры, но из-за большого количества уровней на это ушло колоссальное количество времени. Но наконец-то мы их сделали и рады вам сказать, что

Атака казаков. Фильм Тихий Дон.avi
( 5 г. назад ) эпизод из сериала Девять жизней Нестора Махно 6 серия ( 8 г. назад ) 29 апреля 1648 год Желтые воды ( 12 мес.

Реклама