1. A - Индексирование приложений AngularJS:
2. B - URL современных поисковых систем и клиентских приложений:
3. C - Создание режимов маршрутизации HTML5 вместо хешбангов:
4. D - Обработка SEO со стороны сервера с помощью ExpressJS:
5. E - Снимки с использованием Node.JS
6. F - Важность карт сайта
7. G - AngularJS Awesomeness

Google и другие поисковые системы становятся все умнее день ото дня и, следовательно, лучше понимают веб-страницы. Bot-Crawling of JavaScript больше не является главной проблемой, поэтому поисковые системы индексируют все больше веб-приложений.

Я знаю, что это отличная новость для веб-мастеров, однако, Google советует иначе, объясняя:

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

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

A - Индексирование приложений AngularJS:

Вы должны знать, что Google индексирует ваш контент автоматически. Таким образом, вы можете настроить свойства рендеринга контента, чтобы боты Google полностью проиндексировали ваш контент так, как вы хотите. Вы можете сделать это, обслуживая AngularJS контент через пользовательский сервер Backend.

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

Здесь идет понятие hashbang. Чтобы упростить индексацию содержимого веб-приложения, Google и другие поисковые системы имеют функцию форматирования URL-адресов в хэш-банкингах . Всякий раз, когда поисковая система находит URL-адрес hashbang, то есть 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-снимки страницы. Это требует некоторого переписывания для вашего приложения.

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

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

Вы можете столкнуться с другой проблемой, которая инструктирует AngularJS использовать hashbangs. По умолчанию AngularJS производит URL-адреса только с # вместо #! , Для того, чтобы получить последний, вам просто нужно добавить нижеупомянутый модуль.

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

C - Создание режимов маршрутизации HTML5 вместо хешбангов:

Как я могу забыть сказать, что HTML5 потрясающий? Наряду с техникой Hashbang, комбинация HTML5 и AngularJS дает нам еще один хак, чтобы обмануть поисковые системы при разборе URL-адресов _escaped_fragment_ . Это на самом деле использует Hashbang URL.

Шаг 1:

Сначала вы должны указать Google, что мы на самом деле используем контент AJAX, и бот должен посетить тот же URL-адрес, используя синтаксис _escaped_fragment_. Сделайте это, включив следующую мету в свой HTML-код.

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

Шаг 2:

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

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

D - Обработка SEO со стороны сервера с помощью ExpressJS:

Мы все знаем удивительность ExpressJS. Ну, мы также можем использовать 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» , поэтому предоставляет правильную часть для бота.

E - Снимки с использованием Node.JS

Наиболее часто используемыми инструментами для создания снимков HTML вашего веб-приложения являются Zombie.JS и Phantom.JS.

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

Для справки доступны различные онлайн-ресурсы, такие как:

Давайте не будем вдаваться в подробности этого. Тем не менее, я бы хотел выделить инструмент с открытым исходным кодом Prerender.IO, который можно использовать для создания снимков экрана в формате HTML. Еще более простым средством является инструмент под названием 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 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 .

F - Важность карт сайта

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

G - AngularJS Awesomeness

Теперь вы должны быть готовы отправиться и испытать удивительность JS и его удивительные возможности. Эта тенденция может идти только вверх отсюда. С концепцией индексированного контента AJAX вы можете делать практически все. Удачного кодирования!

Похожие

Комментарии