Поисковая оптимизация 2018 года с помощью приложения AngularJS 1.x на одну страницу
Создание одностраничного приложения (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.
Похожие
SEO и SEA - поисковая оптимизацияSEO: поисковая оптимизация (поисковая оптимизация) SEO , или просто поисковая оптимизация , гарантирует, что ваш сайт получает максимально возможный рейтинг с такими поисковыми системами Унамо | Поисковая оптимизация
Проверьте данные ключевых слов и оптимизируйте рабочий процесс с быстрым и точным отслеживанием ключевых слов. Получите данные наиболее наглядным способом для лучшего пользовательского опыта. Мониторинг производительности ваших конкурентов с полным пониманием рынка. Отслеживайте свои ключевые слова с 35 000+ глобальных и локальных поисковых систем. Контролируйте свой ежедневный прогресс с Поисковая оптимизация SEO Обучение в Сингапуре
Райан Ква - независимый консультант и тренер по управлению, специализирующийся в области управления продуктами и цифрового маркетинга, с более чем 8-летним опытом работы в сфере маркетинга. Райан продолжает Поисковая оптимизация
ЧТО ТАКОЕ ОПТИМИЗАЦИЯ ПОИСКА ДВИГАТЕЛЯ? Поисковая оптимизация (SEO) - это целенаправленная стратегия, призванная помочь вашему бизнесу показывать более высокие результаты в обычных (неоплачиваемых) результатах поиска. С годами SEO развивалось. Просто разместив ключевые слова по всему Топ 10 лучших плагинов WordPress 2012 года
... написать другое"> Прошло много времени с моей последней топ плагинов WordPress пост Так что я подумал, что пришло время написать другое. Хорошая работа, потому что я нашел отличный набор плагинов для использования на вашем сайте. Давайте взглянем… Наиболее важные мобильные рейтинговые факторы 2017 года [Инфографика]
Оптимизация мобильной поисковой системы никогда не была прежней, когда Google начал индексировать настольные и мобильные сайты отдельно. Когда новый мобильный индекс получил приоритет, он послужил дальнейшему усилению революционных изменений в SEO. Для всех, кто хочет оставаться на вершине результатов поиска, мобильный дружественный веб-сайт теперь является обязательным и ключом к доминированию в своей нише. Так как же определить разницу между тем, что подходит для мобильных устройств, 15 плагинов WordPress, которые зарядят ваш SEO
Помимо удобства использования и функциональности, большая часть привлекательности WordPress - это широкий выбор плагинов. Они охватывают весь спектр и могут улучшить ваш сайт различными способами, в том числе SEO - одна из главных задач для владельцев сайтов в наши дни. Согласно Отчет HubSpot за Лучшие URL Shorteners для 2019 года
Последняя проверка 8 мая 2019 года в 16:25 Как сообщалось несколько дней назад, Google скоро закроет службу сокращения URL Goo.gl. К 13 апреля 2018 года пользователи больше не смогут создавать новые сокращенные Off Page Оптимизация по компаниям SEO в Бристоле
... одну из широко распространенных в мире технологий SEO для интернет-маркетинга"> SEO в Бристоле использует одну из широко распространенных в мире технологий SEO для интернет-маркетинга. Концепция SEO создала очень большой шум для предприятий, которые работают через Интернет на протяжении многих лет. Это также привело к появлению многих специализированных SEO-компаний в Бристоле, которые занимаются только оптимизацией сайтов, чтобы сделать сайт своих клиентов на вершине рейтинга поисковых Этапы SEO оптимизации -
... нать, какие ключевые слова они используют для поиска информации через Google. После того, как этот анализ завершен, необходимо выполнить ряд сложных действий, чтобы они были как можно ближе к первым позициям на страницах результатов. SEO оптимизация: поисковая система ранжирует страницы Это база. Вы должны понимать, что происходит с поисковыми системами. Поисковая система для людей, чтобы найти информацию. Этот пользователь будет писать ключевые слова. Затем он окажется на Поисковая оптимизация (SEO) - (Google / Bing / Yahoo Search) - UMMS
Что такое поисковая оптимизация? Поисковая оптимизация (SEO) - это процесс улучшения видимости контента сайта в обычных (то есть неоплачиваемых) результатах поисковой системы. Основная цель оптимизации для поисковых систем состоит в том, чтобы повысить рейтинг и тем самым привлечь больше трафика на сайт. SEO фокусируется
Комментарии
Является ли ваша поисковая оптимизация настоящим временем SEO?Является ли ваша поисковая оптимизация настоящим временем SEO? SEO экспертиза того стоит Рейтинги SEO и как их создать 3 болезненных исследования ключевых слов, которых следует избегать! Почему SEO превосходит советы, тактики или методы Похоже, ты здесь новенький. Добро пожаловать в блог SEO Design Solutions . Не стесняйтесь читать наши информационные SEO Советы Что такое SEO - поисковая оптимизация?
Что такое SEO - поисковая оптимизация? Поисковая оптимизация (SEO) - это процесс улучшения объема или качества трафика на веб-сайт с поисковых систем с помощью «естественных» или неоплачиваемых результатов поиска, в отличие от поискового маркетинга. SEO может ориентироваться на различные виды поиска, включая поиск изображений, локальный поиск, поиск видео и т. Д. Оптимизация веб-сайта в первую очередь включает в себя редактирование его контента и HTML-кода Из чего состоит поисковая оптимизация?
Из чего состоит поисковая оптимизация? Вы можете разделить его на следующие темы: На сайте SEO На странице SEO Офф-страница SEO Между этими тремя есть большая разница, и все они владеют немногими. На сайте SEO… является очень техническим и требует глубоких знаний в области программирования и правильной настройки веб-сайта. К счастью, техническую часть не следует оптимизировать так часто, поэтому здесь Что такое поисковая оптимизация?
Что такое поисковая оптимизация? Поисковая оптимизация (SEO) - это процесс улучшения видимости контента сайта в обычных (то есть неоплачиваемых) результатах поисковой системы. Основная цель оптимизации для поисковых систем состоит в том, чтобы повысить рейтинг и тем самым привлечь больше трафика на сайт. SEO фокусируется на двух основных областях: оптимизация на странице и вне страницы. Оптимизация на странице относится к элементам веб-сайта, которые включают веб-страницу Это хорошая поисковая оптимизация?
Это хорошая поисковая оптимизация? Едва ли! SEO раньше, SEO сегодня и SEO завтра Не все было лучше в прошлом - SEO не было. SEO раньше было проще, но и более разочаровывающим. В прошлом, сила его водяного супа создала как можно больше обратных ссылок. Часто уже защищены домен с точным соответствием и чрезмерная оптимизация контента. Скажем так: ключевое слово в доменном имени + 10% чрезмерной оптимизации на странице + 90% создание ссылок = SEO с 2001 года. А что если вы не знаете поисковая оптимизация (SEO) советы и хитрости, которые выведут ваш сайт на вершину?
Это хорошая поисковая оптимизация? Едва ли! SEO раньше, SEO сегодня и SEO завтра Не все было лучше в прошлом - SEO не было. SEO раньше было проще, но и более разочаровывающим. В прошлом, сила его водяного супа создала как можно больше обратных ссылок. Часто уже защищены домен с точным соответствием и чрезмерная оптимизация контента. Скажем так: ключевое слово в доменном имени + 10% чрезмерной оптимизации на странице + 90% создание ссылок = SEO с 2001 года. Мы все знаем, что SEO (поисковая оптимизация) - БОЛЬШАЯ сделка, верно?
Мы все знаем, что SEO (поисковая оптимизация) - БОЛЬШАЯ сделка, верно? Но не каждому бизнесу необходим один и тот же вид SEO. Например, малый бизнес, который обслуживает небольшое региональное население, заботится только о том, чтобы охватить людей в этом районе - люди за пределами этого района на самом деле не являются перспективами для бизнеса, поэтому зачем беспокоиться, если они посещают ваш сайт? Вот где приходит локальный SEO - вы концентрируетесь на достижении только Когда вы сохраняете изображение на рабочем столе, чтобы включить его в содержимое блога или на статическую страницу своего сайта?
Когда вы сохраняете изображение на рабочем столе, чтобы включить его в содержимое блога или на статическую страницу своего сайта? Убедитесь, что фактическое имя файла изображения содержит ключевое слово. Таким образом, у вас будет еще одна часть вашего контента, которая поможет вам попасть на первую важную страницу результатов поисковой системы Google. То же самое относится и к именам видеофайлов. 4. Выберите соответствующий URL Еще одна важная Как вы можете сделать свой контент актуальным и всеобъемлющим в течение 2018 года?
Как вы можете сделать свой контент актуальным и всеобъемлющим в течение 2018 года? Вы можете начать с изучения содержимого лучших веб-сайтов в своей отрасли и найти общие черты между ними. Это, однако, может занять много времени, особенно если вы ищете конкретные термины или слова. Чтобы ускорить процесс, вы можете использовать некоторые бесплатные пробные версии, доступные для разных аудиторов веб-сайтов. 5. Голосовой поиск более реален, чем когда-либо Кстати, вы проверили SEO советы 2014 года от 21 эксперта отрасли ?
Как вы можете сделать свой контент актуальным и всеобъемлющим в течение 2018 года? Вы можете начать с изучения содержимого лучших веб-сайтов в своей отрасли и найти общие черты между ними. Это, однако, может занять много времени, особенно если вы ищете конкретные термины или слова. Чтобы ускорить процесс, вы можете использовать некоторые бесплатные пробные версии, доступные для разных аудиторов веб-сайтов. 5. Голосовой поиск более реален, чем когда-либо Но тогда, что Google берет на себя создание ссылок с помощью инфографики?
Но тогда, что Google берет на себя создание ссылок с помощью инфографики? Еще в 2012 году Мэтт упоминается в интервью что Google, возможно, придется обесценить ссылки
Зачем?
Является ли ваша поисковая оптимизация настоящим временем SEO?
Что такое SEO - поисковая оптимизация?
Из чего состоит поисковая оптимизация?
Что такое поисковая оптимизация?
Это хорошая поисковая оптимизация?
А что если вы не знаете поисковая оптимизация (SEO) советы и хитрости, которые выведут ваш сайт на вершину?
Это хорошая поисковая оптимизация?
Мы все знаем, что SEO (поисковая оптимизация) - БОЛЬШАЯ сделка, верно?
Мы все знаем, что SEO (поисковая оптимизация) - БОЛЬШАЯ сделка, верно?