Приключения в SEO

  1. Страницы закладок
  2. Отдельные URL для SPA
  3. За пределами отдельных URL
  4. Волга, SEO-дружественная библиотека Ваадина
  5. Разные штрихи

TL; DR: Ваадин вряд ли был SEO-дружественным в прошлом. Больше нет, с новой волжской библиотекой.

Страницы закладок

Закладка так же стара, как сам WWW. Возможность сохранения URL-адреса является частью ВОПОГ веб-сайтов. Что касается веб-приложений, это несколько другое. Например, в веб-приложении электронной коммерции, хотя имеет смысл добавить в закладки конкретный продукт, установка закладки для определенного шага процесса оформления заказа не делает этого.

Следуя примеру магазина, вот что происходит в традиционном контексте на основе сервлетов:

  1. Сервлет отображается на определенный подконтекст, такой как / product / *
  2. Когда вызывается URL / product / реально-классный-product, вызывается метод doGet () этого сервлета
  3. Метод анализирует URL, чтобы прочитать действительно классную часть продукта, которая должна быть уникальным ключом для продукта.
  4. Он делегирует целую цепочку компонентов, которая загружает продукт из хранилища данных.
  5. Пересылается в JSP вместе с соответствующими данными о продукте.
  6. Этот JSP генерирует HTML

Приходите SPA с. По определению, они обслуживают весь контент по одному и тому же URL. Это делает невозможным создание закладок для отдельных страниц приложения, поскольку самих страниц нет. В общем, SPA решают эту проблему идентификаторы фрагментов , Приведенный выше URL-адрес становится / product # Действительно-Cool-продукт, проблема решена. В Vaadin это напрямую переводится на использование Page.getCurrent (). SetUriFragment () метод или из API навигатора ,

К сожалению, это не работает с ползущей частью SEO. Фрагменты не являются дискриминационными частями URL-адреса: # real-cool-product и # another-cool-product указывают на один и тот же URL-адрес, поэтому такие боты, как Google Bot, не будут сканировать оба.

Идентификатор фрагмента функционирует иначе, чем остальная часть URI, а именно: его обработка выполняется исключительно на стороне клиента без участия веб-сервера. - Википедия

Некоторое время Google рекомендовал использовать специальные URL-адреса в стиле «hashbang» (#! My-indexable-view), например, что использует Navigator в Vaadin, и специально обслуживаемый SEO-материал для этих представлений, но это был сложный обходной путь, и сейчас подход не рекомендуется Google также.

Отдельные URL для SPA

Возвращаясь к исходной точке, требуются пути и / product / реально-крутой-product и / product / another-cool-product. Эта проблема не является уникальной для Vaadin, но является общей для всех серверных и клиентских сред SPA. Что требуется, это:

  1. Чтобы клиент изменил URL браузера без полной перезагрузки страницы
  2. Чтобы сервер обрабатывал пути

В JavaScript ответ заключается в использовании История API , Я предполагаю, что все знакомы со следующим фрагментом:

window.back (); window.go (-1);

Это, однако, абсолютно не стандартно. Это должно быть заменено следующим:

window.history.back (); window.history.go (-1);

Объект History реализует API History. Это поддерживается всеми современными браузерами , В частности, API позволяет добавлять записи в историю браузера с помощью метода pushState (), фактически не выполняя полную загрузку страницы.

Предположим, что http://mozilla.org/foo.html выполняет следующий JavaScript: var stateObj = {foo: "bar"}; history.pushState (stateObj, "страница 2", "bar.html"); Это приведет к тому, что в строке URL отобразится http://mozilla.org/bar.html, но не заставит браузер загрузить bar.html или даже не проверить, существует ли bar.html. - Сеть разработчиков Mozilla

Обратите внимание, что Vaadin Directory содержит библиотека обертки History вокруг клиентского API. Он предоставляет способ управления объектом истории из кода Vaadin на стороне сервера.

На стороне сервера пути также должны быть обработаны. В приложениях Vaadin полные URL-адреса доступны в методах UI.init (), из сервлетов или, например, из BootstrapListeners. Надстройка History также поддерживает API-интерфейс Navigator и объекты View с полными путями без URL-адресов в стиле hashbang.

За пределами отдельных URL

Разные URL-адреса - это только появившаяся часть айсберга относительно SEO.

Каждый хочет иметь выделенные мета-заголовки для каждого выделенного URL, такие как <title> и <meta name = "description">. Более того, социальные медиа имеют свои собственные мета-заголовки, например:

Волга, SEO-дружественная библиотека Ваадина

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

Чтобы использовать его, просто добавьте этот фрагмент в POM:

<dependency> <groupId> org.vaadin </ groupId> <artifactId> volga </ artifactId> <версия> 0.1 </ version> </ зависимость>

Важная часть API включает в себя:

org.vaadin.volga.VolgaDetails Содержит набор заголовков метаданных org.vaadin.volga.VolgaServlet Устанавливает VolgaDetails для корневого пути и обеспечивает привязки между путем и другими объектами VolgaDetails. Таким образом, каждый конкретный путь может быть установлен своими собственными VolgaDetails. org.vaadin.volga.Volga Содержит ранее определенные сопоставления. org.vaadin.volga.VolgaUI Обрабатывает начальную конфигурацию org.vaadin.volga.SeoBootstrapListener Заполняет заголовки метаданных страницы из объекта VolgaDetails.

Для более подробной информации, пожалуйста, проверьте этот пример проекта на Github. Он развернут в сети, и вот результаты, показанные в поиске Google, доказывают, что он работает.

Это работает и для Twitter:

Разные штрихи

Есть также несколько других приемов, которые помогут ботам сканировать приложения Vaadin.

  • Используйте файл robots.txt
  • Используйте sitemap.xml
  • Используйте основные ссылки для навигации между представлениями (см. PushStateLink в история )
  • Используйте правильно сформированный HTML, например, используйте правильные элементы <h1> вместо того, чтобы просто стилизовать заголовки побольше (см. Header и RichText в Viritin )

Обратите внимание, что в настоящее время GWT по умолчанию не может обслуживать что-либо релевантное для GoogleBot. пластырь доступно в Волге, но будет исправлено в самом Ваадине скоро

Не ждите и сделайте соответствующие части вашего приложения SEO-дружественными с Волга сейчас!

АВТОР Николя Франкель

Николас Френкель - архитектор программного обеспечения с 15-летним опытом консультирования для множества различных клиентов в самых разных ситуациях (таких как телекоммуникации, банковское дело, страхование, крупный розничный и государственный сектор). Обычно работает над технологиями Java / Java EE и Spring, но с более узкими интересами, такими как качество программного обеспечения, процессы сборки и многофункциональные интернет-приложения. В настоящее время работает на лидера поставщика решений для электронной коммерции. Также вдвойне преподаватель в университетах и ​​высших учебных заведениях, тренер и тройник в качестве автора книги.