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

Статьи

Является ли мое одностраничное SEO приложение дружественным?

  1. Проблема с предоставленным клиентом контентом
  2. Googlebot
  3. Как Googlebot видит SPA
  4. Удаление рендеринга на стороне сервера
  5. Но ждать...
  6. Будьте скептичны в отношении JavaScript
  7. оптимизация
  8. Что делать, если SEO критичен
  9. Рендеринг на стороне сервера
  10. Предварительная визуализация
  11. Заключение

Печально известной темной областью разработки одностраничных приложений (SPA) является SEO. В зависимости от того, кого вы спрашиваете, сканирование поисковым контентом в поисковых системах совершенно нормально , хорошо, пока это синхронно или же совсем не хорошо ,

Из-за путаницы, вызванной всеми этими противоречивыми советами, я регулярно вижу вопрос "мой Vue SPA подходит для SEO?" подходить в таких местах, как Vue.js Разработчики Facebook группа , Форумы Vue.js , а также r / vuejs на Reddit ,

В этой статье мы бросим вызов популярным мнениям, проведем некоторые базовые тесты и попытаемся в заключение дать несколько полезных советов по созданию SEO-ориентированных SPA.

Примечание: эта статья была изначально опубликована здесь, в блоге разработчиков Vue.js на 2018/04/09.

Проблема с предоставленным клиентом контентом

Стандартная реализация одностраничного приложения предоставляет браузеру страницу-оболочку без какого-либо значимого содержимого. Вместо этого контент загружается по запросу с сервера с помощью AJAX, а затем добавляется на страницу с помощью JavaScript.

Это позволяет пользователю просматривать «страницы» сайта SPA без обновления страницы, теоретически улучшая UX.

Это позволяет пользователю просматривать «страницы» сайта SPA без обновления страницы, теоретически улучшая UX

Хотя эта архитектура работает для пользователей, просматривающих страницу в браузере, как насчет сканеров поисковых систем? Могут ли сканеры запускать JavaScript? Если так, будут ли они ждать завершения вызовов AJAX, прежде чем сканировать страницу?

Это важно знать, так как он может определить, индексируется ли контент сайта поисковой системой, и не менее важно, насколько хорошо его контент ранжируется.

Googlebot

Так как Google является ведущая поисковая система во всем мире наш запрос должен сосредоточиться на Googlebot, поисковике Google.

В первые дни Интернета робот Googlebot сканировал только статический HTML-код, представленный на странице. это было объявлено в 2014 году однако теперь этот робот Google попытается отобразить JavaScript до начала сканирования.

Чтобы помочь устранить любые проблемы с отображением страницы, модифицированной JavaScript, Google предоставил веб-мастерам Просмотреть как Google инструмент, который показывает снимок того, что робот Google видит по определенному URL.

Один распространенный миф заключается в том, что робот Googlebot не будет сканировать асинхронный JavaScript. Эта статья сделал большую работу, чтобы разорить его. TLDR; Робот Google будет ждать не менее 20 секунд для завершения асинхронных вызовов!

Как Googlebot видит SPA

Наиболее существенным примером SPA Vue.js является Vue HackerNews Clone 2.0 , Это проект с открытым исходным кодом, предоставленный командой Vue, чтобы продемонстрировать все возможности Vue и эффективные шаблоны проектирования.

Я развернул это приложение в экземпляре Heroku и запустил его через Fetch As Google. На изображении ниже, скриншот слева показывает, как робот Google видел его, а скриншот справа показывает, как его увидит пользователь. Они кажутся идентичными.

Они кажутся идентичными

Удаление рендеринга на стороне сервера

Одна из ключевых особенностей Vue HackerNews Clone 2.0 - рендеринг на стороне сервера (SSR). Это означает, что, в отличие от более простого SPA, содержимое каждой страницы отображается на сервере и предоставляется браузеру при каждой загрузке страницы, как если бы это был статический HTML.

Тем не менее, мы пытаемся понять, как робот Google видит клиентский контент. По этой причине я выключил SSR и снова запустил тест:

По этой причине я выключил SSR и снова запустил тест:

Даже с клиентским рендерингом у Googlebot не было проблем с просмотром контента. Я также ждал несколько дней, чтобы увидеть, проиндексировал ли Google приложение. Это было:

Это было:

Но ждать...

Хотя этот тест, по-видимому, удовлетворяет любые опасения, связанные с отображаемым клиентом контентом, есть несколько причин, по которым вам не следует полностью доверять ему:

  1. Как и все механизмы JavaScript, робот Googlebot не будет непогрешимым, и могут быть крайние случаи, когда он не может отобразить вашу страницу.
  2. То, что страница может быть проиндексирована, не означает, что она будет иметь хороший рейтинг.

Будьте скептичны в отношении JavaScript

У Googlebot не было проблем с отображением Vue HackerNews. Но мы не должны заключать, что он может отображать весь JavaScript так безупречно. Объявление Google в 2014 году о рендеринге JavaScript ясно дало понять, что гарантии не будет, хотя большинство разработчиков, похоже, упустили это из виду.

Как и браузер, робот Googlebot должен иметь движок JavaScript с определенным подмножеством реализованных веб-стандартов и функций ES, а также особые особенности их реализации.

В соответствии с это видео от разработчиков Google Адди Османи и Роба Додсона (выпущен в ноябре 2017 г.), Googlebot в настоящее время основан на Chrome 41. Существует множество новых API, выпущенных начиная с версии 41, и, если бы вы использовали какой-либо из них, предположительно, Googlebot не будет возможность визуализации и индексирования вашей страницы.

Вы можете подумать, что это тривиальная проблема, поскольку в любом случае вам нужно будет перенести или заполнить такие функции для старых браузеров. Суть, однако, в том, что вы не должны слепо верить в то, что ваше приложение правильно запускается каждым поисковым сканером, точно так же, как вы не будете слепо верить в то, что ваше приложение корректно запускается каждым браузером.

оптимизация

Не забывайте, что «O» в «SEO» означает «оптимизация». Быть проиндексированным для поисковой системы недостаточно; мы хотим, чтобы наши сайты тоже имели хороший рейтинг. Получить Как Google говорит нам, как страница видится, но не как страница сравнивается с конкурентами.

Есть интересный комментарий к статье SEO против React: веб-сканеры умнее, чем вы думаете сделано экспертом по SEO Барри Адамс , На тему того, как поисковые системы ранжируют SPA он сказал :

«То, что происходит, когда вы используете React без рендеринга на стороне сервера, заключается в том, что сканер останавливается на самой первой странице, потому что не видит никаких гиперссылок, по которым нужно следовать ... Это делает процесс сканирования невероятно медленным и неэффективным. И именно поэтому веб-сайты построенные на React (и аналогичных платформах JavaScript) работают в Google хуже, чем веб-сайты, которые в первую очередь предоставляют сканеру простой HTML-код. Веб-сайты простого HTML можно сканировать очень эффективно, добавленное и измененное содержимое будет сканироваться и индексироваться намного быстрее, и Google гораздо лучше умеет оценивать приоритет сканирования отдельных страниц на таких сайтах ».

Хотя он не приводит никаких доказательств этого, похоже, он соответствует философии других определяющих факторов, таких как скорость страницы ,

Что делать, если SEO критичен

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

Это не значит, что вам нужно отказаться от архитектуры SPA. Существует два метода, рендеринг на стороне сервера и предварительный рендеринг, которые могут достичь желаемого результата.

Рендеринг на стороне сервера

Рендеринг на стороне сервера (SSR) - это когда страница отображается веб-сервером как часть цикла запрос / ответ сервера. В случае Vue.js и других подобных сред это выполняется путем запуска приложения на виртуальной DOM.

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

SSR гарантирует, что ваша страница будет дружественной для сканера, так как содержимое страницы заполнено независимо от того, как или даже если сканер выполняет JavaScript.

У ССР есть свои минусы:

  • Вам нужно будет сделать ваш код «универсальным», то есть он должен работать как в браузере, так и в серверной среде JavaScript. Это означает, что любой код, который ожидает, что API браузера и объекты, такие как window, будут доступны, не будет работать.
  • Ваше приложение будет запускаться при каждом запросе к серверу, добавляя дополнительную нагрузку и замедляя ответы. Кэширование может частично облегчить это.
  • Внедрить SSR сложно и отнимает много времени, поэтому вам понадобится больше времени для разработки проекта.
  • Это хорошо работает только с бэкэндом Node.js. SSR может быть сделан с не-Node бэкэндами, например, с использованием расширения PHP v8js Но такие решения довольно ограничены.

Если вы заинтересованы в реализации рендеринга на стороне сервера в SPA Vue.js, вам следует начать с официального руководства: Vue.js Руководство по рендерингу на стороне сервера , Я также написал руководство по реализации SSR с помощью Laravel и Vue.js: Рендеринг на стороне сервера с помощью Laravel & Vue.js 2.5 ,

Совет: такие рамки, как Nuxt.js поставляются с серверным рендерингом из коробки.

Предварительная визуализация

Если вы не можете использовать SSR по одной из вышеуказанных причин, есть другой способ: предварительная визуализация. При таком подходе вы запускаете приложение с автономным браузером в своей среде разработки, делаете снимок страницы и заменяете свои HTML-файлы этим снимком в ответе сервера.

Это в значительной степени та же концепция, что и SSR, за исключением того, что она выполняется перед развертыванием, а не на реальном сервере. Обычно он выполняется безголовым браузером, таким как Chrome, и может быть включен в процесс сборки с помощью Webpack, Gulp и т. Д.

Преимущество предварительного рендеринга заключается в том, что он не требует рабочего сервера Node.js и не увеличивает нагрузку на рабочий сервер.

Тем не менее, предварительный рендеринг также имеет свои недостатки:

  • Это плохо работает для страниц, которые отображают изменяющиеся данные, например, Vue HackerNews.
  • Это не подходит для страниц, которые имеют пользовательское содержимое, например страницу учетной записи с личными данными пользователя. Тем не менее, такого рода страницы менее важны для SEO; Вы обычно не хотите индексировать страницу учетной записи в любом случае.
  • Вы должны будете предварительно отрендерить каждый маршрут в приложении по отдельности, что может занять много времени для большого сайта.

Если вы заинтересованы в реализации предварительного рендеринга в приложении Vue.js, я написал руководство для этого блога: Приложение Pre-Render A Vue.js (с узлом или Laravel)

Совет: предварительный рендеринг для SEO можно приобрести как услугу у prerender.io

Заключение

Многие разработчики увидели, что объявление Google о рендеринге JavaScript в 2014 году положило конец опасениям SEO относительно контента SPA. На самом деле, нет никакой гарантии, что робот Googlebot правильно отобразит страницу, и, если это так, он все равно может ранжировать страницу ниже, чем статические HTML-страницы на конкурирующих сайтах.

Мой совет: если вы собираетесь использовать архитектуру SPA, обязательно предоставьте серверные отрисованные или предварительно обработанные страницы.

Пройдите бесплатный ознакомительный курс Vue.js! Узнайте, что такое Vue, какие приложения вы можете создавать с его помощью, как они сравниваются с React & Angular, и многое другое из этого 30-минутного видео в видео-введении. Зарегистрируйтесь бесплатно!

Хотя эта архитектура работает для пользователей, просматривающих страницу в браузере, как насчет сканеров поисковых систем?
Могут ли сканеры запускать JavaScript?
Если так, будут ли они ждать завершения вызовов AJAX, прежде чем сканировать страницу?

Новости

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

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

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

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

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

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

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

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

Недорогой и уютный хостел в самом
Новый фитнес-трекер 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