SEO соображения для одностраничных приложений

1. Вступление Появление фреймворков JavaScript, таких как AngularJS, React и Vue.js, и многие другие,...
2. SEO Проблемы
3. SEO Best Practice
4. Использование серверного рендеринга
5. Поисковая система
6. Метаданные
7. Загрузка соответствующего содержимого немедленно
8. Внутренние ссылки
9. Страницы ошибок
10. XML Sitemap
11. Резюме

Вступление

Появление фреймворков JavaScript, таких как AngularJS, React и Vue.js, и многие другие, быстро ускорило принятие одностраничных приложений (SPA). Facebook, Twitter и YouTube являются примерами веб-сайтов, которые приняли SPA. Растущее принятие Соглашений SPA обусловлено тем фактом, что такие структуры могут предложить как лучший пользовательский опыт, так и повышение эффективности разработки.

Что такое одностраничное приложение?

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

Источник: Microsoft

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

SEO Проблемы

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

Эти проблемы проистекают из того факта, что фреймворки JavaScript, то есть SPA, вносят определенный уровень сложности в традиционное сканирование / индексацию веб-сайтов. Эту сложность можно легко наблюдать, просматривая источник SPA или чаще всего его отсутствие. Традиционно сканеры, такие как Googlebot, обнаруживают страницы веб-сайта, а затем вторичный процесс инициируется индексатором, который впоследствии оценивает обнаруженные страницы. Для сайтов, построенных исключительно на HTML, это относительно простой процесс. Для веб-сайтов с высокой степенью зависимости от JavaScript, т. Е. Там, где большая часть ссылок не является частью исходного кода HTML, сканер может первоначально найти только ограниченный набор URL-адресов. Чтобы обнаруживать более глубокие URL-адреса, индексатор должен отображать страницы, обнаруженные во время первоначального сканирования, извлекать все дополнительные URL-адреса, а затем передавать их обратно сканеру, чтобы разрешить обнаружение более глубокого содержимого. По мере того, как усложняется работа сайтов JavaScript, сканирование становится все более медленным и неэффективным. Эта сниженная эффективность может не только увеличить время, необходимое для появления страниц в результатах поиска, но и внести неточности в оценку графика внутренних ссылок сайта. Это может привести к тому, что ключевые страницы не будут вознаграждены авторитетом, которого они заслуживают, и страницы с более низкой ценностью окажутся выше в результатах поиска.

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

Наконец, в то время как для большинства веб-сайтов Google будет, безусловно, наиболее доминирующим драйвером органического трафика, по-прежнему важно учитывать другие основные поисковые системы. С чисто британской точки зрения Bing и Yahoo значительно отстают от Google с точки зрения своих возможностей рендеринга JavaScript.

SEO Best Practice

Преимущества СПА для пользователей и разработчиков неоспоримы; Чтобы использовать эти преимущества, крайне важно следовать рекомендациям SEO передовой практики. Ранее Google заявлял, что теперь может успешно сканировать контент JavaScript, если необходимые ресурсы не заблокированы. Однако в таких объявлениях также содержались следующие признания:

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

Для максимизации SEO-возможностей SPA рекомендуется использовать следующие методы оптимизации:

Использование серверного рендеринга

Если SPA имеет рендеринг на стороне сервера, проблемы с сканированием / индексацией могут быть эффективно решены до того, как они возникнут.

• Angular 1.0 - требует сторонних инструментов или создания собственных внутренних скриптов для включения рендеринга на стороне сервера, например prerender.io
• Angular 2.0 - совместим с Angular Universal - специализированный сервис рендеринга для приложений Angular
• React - использует рендеринг в строку, позволяющий возвращать строки HTML непосредственно на сервер

Поисковая система

Уникальный URL-адрес должен быть предоставлен для всех страниц со статусом 200. URL-адреса должны быть плоскими, чистыми и без фрагментов (хэштегов). После устаревания схемы сканирования Google AJAX хэш-бэнги больше не рекомендуются.

Метаданные

Рекомендуется, чтобы все ключевые метаданные отображались непосредственно в исходном коде страницы, в дополнение к функциональности рендеринга на стороне сервера. Ключевые метаданные должны включать следующие теги (если применимо):

• Заголовок страницы
• Мета-описание
• Канонический тег
• Мета роботы
• HREFLANG

Загрузка соответствующего содержимого немедленно

При рендеринге страницы поисковые системы с трудом нажимают кнопки, которые запускают загрузку дополнительных данных / контента на странице. В результате, это ключевой весь контент с высокой ценностью, требующий сканирования / индексации, полностью отображается при загрузке страницы.

Внутренние ссылки

Для обеспечения эффективного сканирования всего содержимого веб-сайта рекомендуется встраивать внутренние ссылки с использованием тегов <a> ссылок, а не событий JavaScript onclick.

В дополнение к тому, что все ссылки имеют теги <a>, настоятельно рекомендуется, чтобы основные элементы навигации, такие как основная навигация, выводились непосредственно в исходном коде.

Страницы ошибок

Правильный статус заголовка страницы должен быть возвращен в ответ на обнаруженные ошибки. Например, статус заголовка 404 должен быть возвращен, если пользователь пытается получить доступ к отсутствующей странице, аналогично, статус 500 должен быть возвращен для ошибки сервера.

XML Sitemap

Принимая во внимание сложности, связанные с сканированием / индексацией SPA, настоятельно рекомендуется опубликовать карту сайта XML, чтобы обеспечить дополнительный доступ ко всему контенту веб-сайта более глубокого уровня.

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

Резюме

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

О Крисе:

Крис Манн - наш технический менеджер по SEO и возглавляет нашу растущую команду SEO-аналитиков. Имея более чем 10-летний профессиональный опыт, Крис предоставляет экспертные знания в области SEO с сильной технической направленностью.

Похожие

Комментарии