система онлайн-бронирования
г. Донецк, Украина, ул. Артёма, 87
+38 (062) 332 33 32, 332-27-71
ЗАБРОНИРОВАТЬ
НОМЕР

Статьи

Поисковая оптимизация 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.

Зачем?

Новости

Сплавы по рекам

Прошлым летом решили хорошенько отдохнуть небольшой компанией, с друзьями. Наша компания любит активный и подвижный отдых. Решили подыскать , что-то интересное и необычное, дабы развлечься по полной.

Где заказать тур на Кипр

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

Специальный держатель для смартфона

Мой муж работает таксистом, и для ориентировки по соседним городам ему нужен навигатор. Но телефон девать некуда, а с сидения или полки его брать неудобно, да и не видно изображения. Любимый не растерялся

Отель под Киевом
Главный нарколог Минздравсоцразвития России, директор московского научно-практического центра наркологии Евгений Брюн дал россиянам полезные советы о том, как пережить Новый год. А столичные власти уже

Где встретить Новый год
Но самое главное, что этот праздник можно провести рядом с самыми родными и любимыми людьми – нашими родственниками и друзьями. Если в этом году новогоднее веселье вы решили провести у вас дома, сразу

Недорогой и уютный хостел в самом
Новый фитнес-трекер Mi Band 4 от Xiaomi – один из лучших гаджетов 2019 года. В отличие от своих предшественников он оснащен цветным 0.95-дюймовым AMOLED экраном, для которого сам производитель уже придумал

Отдых на острове Хайнань
Благодаря стремительному росту благосостояния наших сограждан сегодня мы много времени проводим на отдыхе и в путешествиях. Большинству украинцев уже порядком надоели европейские курорты типа Куршавеля,

Плосковальгусная деформация стоп лечение
Самая распространённая деформация на стопе, которой подвержена большая часть людей (особенно женщин), называется Hallux Valgus. Рядовые пациенты именуют заболевание «шишкой на кости», «косточкой». Вальгусная

Выгодные туры в Турцию
Каждый человек имеет право на отдых, потому что просто напросто никто не способен только постоянно и все время работать и совсем не отдыхать. А самым лучшим отдыхом по праву считается смена обстановки,

Где заказать авиабилеты
В современном мире каждый человек (если, конечно, ему позволяет материальное положение) может путешествовать по всей планете с поистине поразительной легкостью. И способов перемещения существует достаточно,

Отель «Централь» Официальный сайт 83001, Украина, г. Донецк, ул. Артема, 87
Тел.: +38 062 332-33-32, 332-27-71
[email protected]
TravelLine: Аналитика


Студия web-дизайна Stoff.in © 2008