Пригоди в SEO

  1. Закладки сторінок
  2. Окремі URL-адреси СПС
  3. Крім окремих URL-адрес
  4. Волга, SEO-дружня бібліотека Ваадіна
  5. Різні штрихи

TL, DR: Ваадін навряд чи був SEO-дружнім у минулому. Не більше, з новою бібліотекою Волги.

Закладки сторінок

Закладки старі як сама www. Можливість зберегти URL-адресу є частиною веб-сайтів ADN. Що стосується веб-додатків, це дещо інше. Наприклад, у веб-перегляді електронної комерції, хоча є сенс закладати конкретний продукт, закладка конкретного кроку процесу оформлення замовлення не виконується.

Після прикладу магазину, ось що відбувається в традиційному контексті на основі сервлетів:

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

Приходьте SPA. За визначенням, вони обслуговують весь вміст за однією URL-адресою. Це робить неможливими закладки конкретних сторінок програми, оскільки не існує жодних сторінок. Загалом, СПА вирішують цю проблему ідентифікатори фрагментів . Вищезгадана URL-адреса стає / продукт # дійсно-прохолодним продуктом, проблема вирішена. У Ваадін, це безпосередньо перевести на використання Page.getCurrent (). SetUriFragment () методом або методом API Navigator .

На жаль, це зовсім не працює з частиною сканування SEO. Фрагменти не є дискримінаційними частинами URL: # дійсно-прохолодно-продукт і # інший-прохолодний продукт вказують на той самий URL, щоб боти, такі як Google Bot, не сканують обидва.

Ідентифікатор фрагмента функціонує інакше, ніж решта URI: а саме, його обробка є виключно на стороні клієнта без участі веб-сервера. - Вікіпедія

На деякий час Google рекомендував використовувати спеціальні URL-адреси стилів "hashbang" (#! My-indexable-view), як те, що Navigator у Vaadin використовує, і спеціально подав матеріал SEO для цих переглядів, але це був хитрий спосіб вирішення проблеми застаріла компанія Google так само.

Окремі URL-адреси СПС

Повертаючись до першого, потрібні обидва шляхи продукту / продукту / дійсно холодного продукту та / продукту / іншого продукту. Ця проблема не є унікальною для Ваадіна, але загальна для всіх серверних і клієнтських SPA-кадрів. Потрібно:

  1. Щоб клієнт змінив URL веб-переглядача без перезавантаження повної сторінки
  2. Щоб сервер мав шляхи

У JavaScript відповідь полягає у використанні Історія API . Я припускаю, що всі знайомі з таким фрагментом:

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

Це, однак, абсолютно не стандартне. Це слід замінити наступним:

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

Об'єкт історії реалізує API історії. Його підтримуються всіма сучасними браузерами . Зокрема, 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 є бібліотеку оболонок історії навколо API клієнтської сторони. Вона забезпечує спосіб керування об'єктом історії з коду сервера Vaadin на стороні сервера.

На стороні сервера слід також обробляти шляхи. У додатках Vaadin повні URL-адреси доступні в методах UI.init () із сервлетів або, наприклад, з BootstrapListeners. Надбудова History також підтримує API Navigator та переглядати об'єкти з повними шляхами без URL-адрес у стилі hashbang.

Крім окремих URL-адрес

Окремі URL-адреси - це лише частина айсберга, що стосується SEO.

Хочеться мати виділені мета-заголовки для кожної виділеної URL-адреси, наприклад <title> і <meta name = "description">. Навіть далі, соціальні медіа мають свої власні мета-заголовки, наприклад:

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

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

Щоб скористатися нею, просто додайте цей фрагмент до POM:

<залежність> <groupId> org.vaadin </groupId> <artifactId> volga </artifactId> <версія> 0.1 </version> </dependency>

Важливою частиною 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> замість простого заголовка більшого розміру (див. Заголовок і RichText в Viritin )

Зауважте, що GWT наразі не в змозі обслуговувати будь-яке релевантне для GoogleBot за промовчанням. A патч доступний у Волзі, але він буде зафіксований у самому Ваадіні скоро

Не чекайте і робите відповідні частини вашого додатка SEO-дружніми Волга зараз!

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

Nicolas Fränkel є архітектором програмного забезпечення з 15-річним досвідом роботи з багатьма клієнтами в різних контекстах (наприклад, у сфері телекомунікацій, банківської справи, страхування, великого роздрібного та державного секторів). Зазвичай працюють за технологіями Java / Java EE і Spring, але з більш вузькими інтересами, такими як якість програмного забезпечення, процеси побудови та багаті інтернет-програми. В даний час працює на лідера постачальника рішень електронної комерції. Крім того, подвійний вчителем в університетах і вищих навчальних закладах, тренер і трійки, як автор книги.