Поисковая оптимизация 2018 года с помощью приложения AngularJS 1.x на одну страницу

Создание одностраничного приложения (SPA) имеет много современных преимуществ для традиционного веб-сайта, которые могут улучшить пользовательский опыт

Создание одностраничного приложения (SPA) имеет много современных преимуществ для традиционного веб-сайта, которые могут улучшить пользовательский опыт. Эти преимущества включают в себя более быстрое взаимодействие с пользователем, как правило, из-за того, что нет необходимости перезагружать все приложение для отображения изменений в контенте. Это приводит к опыту, который может быть очень похож или идентичен опыту пользователя в традиционном настольном приложении. Одной из областей преимуществ, которые SPA обычно не имеет, является то, что сканеры и поисковые системы не совсем успевают за возможностью индексировать и сканировать одностраничные приложения. Одностраничные приложения, использующие AngularJS, используют хэш-удар (то есть #!), Чтобы воспользоваться историей браузеров. Таким образом, все, что происходит после хэширования, не обрабатывается веб-сканером или веб-сервером (т. Е. Apache или Tomcat) и загружается только браузером или клиентом.

Теперь Google утверждает, что может индексировать SPA; однако, по моему опыту, он не смог проиндексировать три моих веб-сайта AngularJS. Веб-мастеру Google постоянно не удается сканировать что-либо, кроме нескольких файлов JavaScript, что не подходит для поисковой оптимизации (SEO). Даже если вы предоставите sitemap.xml со всеми перечисленными изменениями ваших динамических страниц, он все равно не сможет сканировать ваш сайт по моему опыту. Кроме того, для вашего здравого смысла вы можете проверить, как выглядит ваш веб-сайт, когда Google сканирует его, перейдя в Google Webmaster / Search Console и в разделе «Сканирование» выберите «Получить из Google», а затем «Получить и отобразить»:

Затем, если это сработает, вы можете щелкнуть ссылки в таблице, чтобы увидеть страницу рендеринга из Googlebot Web Crawler и с точки зрения пользователя. Вероятно, вы увидите, что Google не может правильно загрузить ваш веб-сайт как робот Google.

Если вы заметили, что Google или другие поисковые системы не могут правильно сканировать ваш сайт, у вас есть варианты. При поиске того, как сделать SEO на AngularJS и / или SPA, вы найдете много сообщений о необходимости предварительно визуализировать все ваши страницы, как своего рода кеш, чтобы служить поисковым системам путем некоторой перенаправления хэша. bang url путь к более традиционному URL (т. е. исключить сигнал не загружать то, что следует после хэша bang). Это может включать использование таких услуг, как pretender.io или же PhantomJS , Эти решения использовались многими, но, на мой взгляд, они слишком сложны и не очень приемлемы для такой технологии, как SPA, которая становится стандартом де-факто для современных веб-приложений. К счастью, у нас есть лучший вариант.

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

Это приведет к гораздо большему количеству просматриваемых веб-сайтов и может быть сделано с минимальными изменениями кода. Вот выделенное изменение кода, необходимое в вашем index.html:

<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equ = "X-UA-Compatible" content = "IE = edge"> <имя мета = "viewport" content = "width = device-width, initial-scale = 1"> <title> Wing Specials Today </ title> <! - Это необходимо для режима HTML5 -> <base href = "/" > <! - Убедитесь, что база находится над таблицей стилей -> <link rel = "stylesheet" href = "../ node_modules / bootstrap / dist / css / bootstrap.css"> <link rel = "stylesheet" href = "../ node_modules / bootstrap / dist / css / bootstrap-theme.css"> <link rel = "stylesheet" href = "css / wingnight.css">. , , </ head>. , ,

Заметка : Это изменение должно быть выше ваших ссылок на таблицы стилей!
Примечание. Локально я тестирую несколько приложений из одной корневой папки, используя npm start. Поэтому мне нужно изменить свою базу на <base href = "/ wingnight /">, чтобы это работало локально.

Затем вам нужно будет изменить файл config.js вашего основного модуля. Например:

(function (angular) {angular.module ('wingnight') .config (wingnightConfig); функция wingnightConfig ($ stateProvider, $ urlRouterProvider, $ locationProvider) {$ urlRouterProvider.otherwise ('/ restaurant / list'); $ stateProvider .state. ('restaurant', {url: '/ restaurant', template: '<restaurant-main> </ restaurant-main>'}) .state ('about-us', {url: '/ about-us', template : '<about-us-main> </ about-us-main>'}) .state ('contact-us', {url: '/ contact-us', шаблон: '<contact-us-main> < / contact-us-main> '}); $ locationProvider.html5Mode (true); $ locationProvider.hashPrefix ('! ');}}) (угловой);

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

Невозможно ПОЛУЧИТЬ /wingnight/restaurants/detail/Bigham-Tavern-Mt.-Washington

Поэтому нам нужно иметь возможность переписать все URL-адреса, которые не находятся в корне приложения, чтобы сначала загрузить корневое приложение AngularJS (т. Е. Index.html), которое имеет ссылки на ваши модули. Это позволит вашему одностраничному приложению корректно загружаться из обновления браузера или по прямой ссылке. Более того, все уже устанавливаемые ссылки, использующие формат хэш-взрыва, должны продолжать работать.

Есть несколько вариантов заставить ваш веб-сервер перенаправлять неосновные ссылки обратно на index.html; однако самый простой - это файл Apache .htaccess, добавленный в корень вашего одностраничного приложения.

<IfModule mod_rewrite.c> RewriteEngine для RewriteCond% {REQUEST_FILENAME} -s [OR] RewriteCond% {REQUEST_FILENAME} -l [OR] RewriteCond% {REQUEST_FILENAME} -d RewriteRule ^. * $ - [NC, L] Rewriteu *) index.html [NC, L] </ IfModule>

С этим изменением вы сможете обновить свою страницу и заставить ее работать правильно. Кроме того, вы сможете напрямую ссылаться на любые динамически создаваемые ссылки, сгенерированные вашим SPA (например, думать о sitemap.xml). Если у вас все еще возникают проблемы, пожалуйста, проверьте, что вы поместили свой базовый href над таблицами стилей!

Теперь вы должны быть в состоянии проверить, используя опцию Google Search Console Fetch as Google with Render, чтобы робот Google мог действительно обработать ваше одностраничное приложение AngularJS 1.x. Вы даже можете запросить индексирование, чтобы увидеть, что сканирует робот Google.