Оптимізація односторінкових додатків: Зробіть ваш сайт JavaScript сумісним

1. Чому програми для однієї сторінки погані для SEO?
2. Як вирішити цю проблему?
3. Які ще кроки можна зробити, щоб оптимізувати відкритість вашого СПА?
4. Висновки

Наша команда-партнер Artmisto

Односторінкові програми (SPA) - все це зараз. Facebook і Gmail - це лише кілька відомих прикладів. Всі, хто знайомий з пошуковою оптимізацією, скажуть вам, SPAs є кошмар SEO. Але ви не повинні відкидати технологію як марну. Ось чому.

Програми з однією сторінкою є блискавичними, легкими для розгортання та забезпечують зручне користування. ССП досягають цього шляхом динамічного оновлення вмісту веб-сайту без перезавантаження всієї сторінки. Так само, як на робочому столі або в рідній програмі.

Існує декілька способів поєднати виняткову швидкість і користувацький досвід SPA з відкритістю звичайних веб-додатків. Ряд наших проектів в MindK дотримуються цих шляхів. Сьогодні ми поділимося з вами.

Зміст:

1. Чому програми для однієї сторінки погані для SEO?
2. Як вирішити цю проблему?
3. Які ще кроки можна зробити, щоб оптимізувати відкритість вашого СПА?
4. Висновки.

Чому програми для однієї сторінки погані для SEO?

Традиційно веб-сайти використовували рендеринг на сервері для свого вмісту HTML. Це дозволяє роботам пошукових систем (які називаються веб-сканери або павуки) індексувати вміст сайту. Цей процес (так званий сканування) полягає в тому, як пошукові системи виявляють вміст на вашому сайті і роблять його доступним для громадськості.

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

З іншого боку, рендеринг на стороні клієнта дозволяє веб-програмам однієї сторінки відображати динамічний вміст без перезавантаження всієї сторінки. Ваш веб-переглядач отримує HTML-контейнер з відкритими кістками, а потім переглядає вміст сторінки за допомогою JavaScript.

Тепер, коли певна частина вмісту сторінки повинна бути змінена, ваш браузер надсилає виклик AJAX серверу. Натомість сервер надсилає дані (найчастіше у форматі JSON), необхідні для оновлення сторінки.

У той же час візуалізація на стороні клієнта погано підходить для сканерів. Оскільки більшість вмісту динамічно завантажується через JavaScript, павуки мають проблеми з правильним індексуванням SPA. Для них вміст (як його бачить користувач) відсутній на сторінці.

І без контенту в результатах пошуку нема чого показувати. Боти в соціальних медіа також мають проблеми з повзанням SPA.

Це, як ваш новий веб-сайт / веб-додаток стає катастрофою SEO.

Як вирішити цю проблему?

1. Уникайте схеми сканування Google AJAX

У 2009 році Google представила a обхідний шлях призначений для того, щоб зробити СПА-пошуковим.

Схема складалася з додавання hashbang (#!) До URL сторінки; створює знімок HTML сторінки (можна зробити за допомогою Prerender ); подача веб-павуків HTML-версії сторінки через URL-адресу, де "#!" замінюється маркером "? _escaped_fragment_ =".

Як результат, сканери будуть індексувати вміст сторінки та показувати вихідні URL-адреси в результатах пошуку.

У 2015 році компанія Google знехтувала схему сканування AJAX. Компанія перестане підтримувати її у другому кварталі 2018 року.

Тепер Googlebot зможе відображати URL-адреси з #! в них самостійно. Це означає, що вам більше не доведеться надавати його попередньо візуалізованих сторінок.

Останні тест Бартоша Горалевича показав, що Google, як правило, здатний виконувати JavaScript на додатках, наданих клієнтом, побудованих з різними фреймворками JS, за винятком Angular.

У той же час інші пошукові системи (які обробляють практично 37% пошуків у США ) і робота в соціальних мережах не настільки хороша при скануванні

JavaScript як Google. Отже, якщо ви хочете бути високо оціненими в Baidu, Яндекс , Bing або Yahoo не покладаються на свої можливості сканування AJAX.

Переконайтеся, що ваш SPA індексується за допомогою методів, які я опишу нижче.

Як пошукові системи сканують сайти, побудовані на різних структурах JS; джерело: moz.com

2. Використовуйте візуалізацію на стороні сервера

Незважаючи на те, що Google тепер стверджує, що може сканувати JavaScript, краще бути безпечним, ніж шкодити. Випадок Хулу (майже 60% зниження видимості) показує, що вживання будь-яких запобіжних заходів може мати катастрофічні наслідки. Саме тому ми в MindK використовуємо рендеринг на стороні сервера для підвищення відкритості SPA.

Можна взяти програму, побудовану на базі клієнтського JavaScript, наприклад React, Angular або Vue.js, і передати її статичному HTML і CSS на вашому сервері.

Коли користувальницький браузер робить початковий запит на сервер, браузер отримає повністю виведений HTML-вміст, а не порожній HTML-контейнер, як це відбувається з традиційними СПА. Хоча JavaScript все ще завантажується у фоновому режимі, користувачі вже побачать версію HTML вашого сайту.

Це збільшить швидкість завантаження та покращить UX!

Веб-сканери також матимуть доступ до повної HTML-версії сторінки, яку вони можуть індексувати та відображати в результатах пошуку.

При наступних запитах програма для однієї сторінки, звичайно, використовуватиме звичайне рендеринг на стороні клієнта, гарантуючи швидке завантаження вмісту як для першого, так і для вдруге разів.

Подальше читання: як налаштувати серверну візуалізацію для Реакція , Кутовий , і Vue.js односторінкові програми.

Джерело: Medium.com

3. Використовуйте прогресивне покращення та розпізнавання функцій .

Джерело: blog.teamtreehouse.com

Використання прогресивне покращення та виявлення функцій - це поточні рекомендації SEO від Google для додатків однієї сторінки.

• По-перше, створіть просту HTML-сторінку, яка може бути доступною та індексована веб-сканерами та переглянута користувачами.
• Потім використовуйте функція виявлення поступово розширювати досвід роботи з CSS і JavaScript. Виявляйте функції, що підтримуються браузером користувача, та вмикайте / вимикайте їх відповідно. Перевірте, чи доступні функції API, і ніколи не використовуйте агент користувача браузера, щоб увімкнути / вимкнути функції програми. Не забувайте тестувати свій SPA для численних браузерів, перш ніж запускати його.
• Використовуйте на стороні сервера або гібридний рендерінг для вибору ваших користувачів вмістом після першого запиту. Переконайтеся, що глибинні зв'язки працюють для вашого SPA. Ніколи не перенаправляйте своїх клієнтів на домашню сторінку, замість того, щоб переносити їх на глибокий зв'язок.
• Використовуйте адаптивний дизайн, що вміщує кілька пристроїв. Ніколи не обслуговуйте інший вміст для користувачів і пошукових систем. Це правило застосовується, навіть якщо ви використовуєте динамічна порція змінити дизайн сайту для різних пристроїв.
• Не переходьте старий сайт до прогресивного SPA за один раз. Натомість розвивайте його в ітераціях. Додавання однієї функції одночасно дозволить вам побачити, як кожен з них впливає на SEO.
• Використовуйте Консоль пошуку . Вона також виявить існування структурованих даних, Rich Card, Sitelinks і AMP.
• Додати нотації з Schema.org структуровані дані. Це дозволяє підсумувати першочергові фрагменти вашого вмісту в машиночитаному форматі. Можна, наприклад, вказати тип даних сторінки (наприклад, зазначити, що це "Рецепт"). Або ви можете перерахувати всі інгредієнти, які складають рецепт. Просто переконайтеся, що ці метадані, по суті, правильні Інструмент Google для тестування структурованих даних . І ніколи не позначайте свій вміст неправильним типом даних.
• Перевірте свій SPA для декількох браузерів, використовуючи такі інструменти BrowserStack.com , Browserling.com або BrowserShots.org .
• Оптимізуйте свій SPA для швидкості, перш ніж ви зробите його доступним для громадськості. Хоча Googlebot може чекати більше 5-20 секунд, перш ніж індексувати вашу сторінку, мало хто з реальних користувачів чекатиме так довго.

Які ще кроки можна зробити, щоб оптимізувати відкритість вашого СПА?

1. Складіть повний список сторінок на вашому веб-сайті

SEO-експерти рекомендують створити Sitemap.xml для будь-якого веб-додатка. Навіть після повідомлення про те, що Googlebot може сканувати програми JavaScript, власники веб-сайтів продовжують повідомляти про неіндексовані сторінки.

Sitemap.xml - це файл, який містить усі URL-адреси вашої програми. Ви повинні використовувати свою мапу сайту як посібник, щоб переконатися, що сканери не закривали очі на важливу частину вашого додатка.

Зауважте, що Sitemap потребує просування. Тому додайте наступний рядок до файлу robot.txt. Таким чином, Googlebot дізнається місцезнаходження вашого Sitemap. Після цього ви повинні подати свою мапу сайту до консолі пошуку Google, яка ініціюватиме індексацію вашого веб-сайту.

Ви повинні додати тег <meta name = ”fragment” content = ”!”> У верхній частині сайту, щоб Googlebot знав, що це, по суті, SPA.

2. Використовуйте інструмент "Вибрати як Google"

Консоль пошуку Google має опцію "Вибрати як Google". Fetch as Google неймовірно корисно для ССП, оскільки дозволяє побачити, які елементи JS і CSS не доступні для індексації. Використовуючи інструмент, ви можете виявити, що пошукова система відображає ваш SPA не повністю або ігнорує його важливі функції.

Введіть URL-адресу сторінки та отримайте її так, як сканери Google виконуватимуть індексацію вашого сайту.

Запуск консолі пошуку Google дозволяє переглядати вашу програму через очі гусениць і виявляти, які додаткові кроки потрібно виконати для поліпшення рейтингу пошуку.

Параметр "Вибірка" консолі пошуку посилає назад відповідь HTTP з вашої сторінки разом з повним завантаженням вихідного коду, який бачать веб-павуки.

Параметр "Fetch and Render" повертає відповідь HTTP, а також два скріншоти сторінки: одну, яку бачить Googlebot, а іншу - очима ваших користувачів. Він також показує, які ресурси Googlebot не вдалося отримати. Таким чином, ви переконаєтеся, що жоден з необхідних ресурсів, таких як файли JS, відповіді сервера, API та ін. Не заблокований файлом robots.txt.

Оскільки Google знецінив стару схему сканування AJAX, сайти, які його використовують, можуть зіткнутися з несподіваними проблемами. У якості запобіжних заходів Google тепер рекомендує використовувати інструмент "Отримати та візуалізувати" для тестування ССП, які мають у своїх URL-адресах теги хешбанів або фрагментів.

Так порівнюйте результати для “ #! »І« ? _Escaped_fragment_ = »URL, щоб побачити, чи є якісь відмінності.

Після того, як ви виберете сторінку, з'явиться третій варіант - "Індексація запитів". Ви можете використовувати його для початку індексації без необхідності чекати звичайних циклів сканування.

3. Використовуйте rel = canonical links

Не тільки посилання rel = canonical можуть стати в нагоді, коли у вас є кілька сторінок з однаковим вмістом. Вони також можуть дозволити сканерам знати, яка частина URL-адреси є обов'язковою і яка не є.

Наприклад, це дозволить Googlebot визначити, чи впливає параметр запиту на візуалізацію сторінки (параметри розбиття сторінок, наприклад, « сторінка = 11 », чи ні) (параметри відстеження, такі як « utm_source = facebook »).

Якщо у вас є сторінка, до якої можна отримати доступ за допомогою декількох URL-адрес (як це часто буває з сайтами електронної комерції) або декількох сторінок з дубльованим вмістом, зробіть одну з них канонічною.

Виберіть сторінку, яку ви вважаєте важливішою (або сторінку з більшістю відвідувачів / посилань). Тепер додайте rel = canonical link, що веде від не-канонічних сторінок до канонічної.

Таким чином Google дізнається, яка версія вашого вмісту є "офіційною", і вважає всі посилання на її дублікати посиланнями на цю канонічну сторінку.

Щоб скористатися елементом rel = canonical , вам доведеться використовувати динамічні URL-адреси. Також пам'ятайте, що канонічні URL та URL-адреси мапи сайту мають бути однаковими.

І не забудьте перевірити, якщо rel = canonical links ведуть до реального веб-сайту, а robots.txt дозволяє Googlebot індексувати вашу програму для однієї сторінки.

4. Налаштуйте Google Analytics

Google Analytics є важливою частиною зусиль SEO. Він працює, переглядаючи перегляди сторінок кожного разу, коли користувачі надходять на вашу сторінку. Але з SPA немає відповіді HTML, яка б генерувала перегляд сторінки. Щоб скористатися перевагами Google Analytics, потрібно знайти інший спосіб.

Один із способів зробити це через Ангулярика підключати. Оскільки програми з однією сторінкою завантажують HTML динамічно, плагін не використовує стандартне відстеження. Замість цього Angulartics відстежує віртуальний перегляд сторінки та записує всю навігацію по всьому Вашому SPA.

Іншою заміною для Google Analytics є Менеджер тегів Google .

5. Використовуйте Відкриті Графічні та Twitter карти

Акції соціальних медіа можуть відігравати вирішальну роль у ваших зусиллях, пов'язаних із створенням посилання SEO.

Реалізація Карти Twitter дозволить вашому SPA мати багатий обмін у Twitter.

Щоб увімкнути правильний обмін через Facebook, слід розглянути можливість використання Open Graph.

Коли хтось ділиться посиланням вперше, павук FB сканує сторінку, збирає інформацію про нього і генерує візуальний об'єкт, який пізніше буде відображений на сторінках Facebook. Facebook Відкрити графік Протокол дозволяє оптимізувати та структурувати дані, якими користуються люди через соціальну мережу. Щоб скористатися відкритим графіком, потрібно додати певні теги <meta> до розділу <head> сторінки HTML, яку ви хочете опублікувати в соціальній мережі.

Найбільш корисні теги <Meta> Open Graph:

• og: title (назва назви сторінки);
• og: description (коротко описує ваше вміст);
• og: type (вказує тип даних вмісту);
• og: image (вказує URL-адресу зображення, яке використовується для ілюстрації сторінки);
• og: url (визначає канонічну URL-адресу сторінки).

Ви можете використовувати Facebook Інструмент відладчика , щоб перевірити теги OG.

Але цього недостатньо при роботі з односторінковими програмами без рендеринга на стороні сервера.

На відміну від Googlebot, сканери Facebook ще не можуть інтерпретувати JavaScript!

Навіть якщо ви додали всі правильні теги OG, павуки отримають лише звичайний HTML. Як результат, ви отримаєте пост, який ніхто у своєму розумі не поділиться:

Джерело: www.michaelbromley.co.uk

Один із способів забезпечити багатий соціальний розподіл для СЗЗ - це створити умовне перенаправлення що буде служити метаданих ботам Facebook. Таким чином, сканери отримають статичний файл замість того, щоб мати справу з JavaScript, і звичайні користувачі будуть перенаправлені на URL, який має фактичний вміст.

Висновки

Як ви можете бачити, створення односторінкових додатків не потребує заклинань заклинань для рейтингів пошукових систем. Якщо ви докладете достатньо зусиль для того, щоб зробити ваш SPA crawlable, ви можете зробити його як SEO-дружній, як будь-яке традиційне веб-додаток.

Передові технології, такі як прогресивне вдосконалення та рендеринг на стороні сервера для SPA, дозволяють створювати чудові інтерактивні враження, не жертвуючи їхніми відкриттями.

І не забувайте про загальні рекомендації SEO, такі як зменшення кількості файлів JS і відповідей на сервер, необхідних для відображення сторінок, перевірка відповідей заголовків сервера, оновлення кешу в hubpages або обговорення рішення, щоб знайти сторінки з проблемами рендеринга.

На жаль, неможливо охопити всі SEO трюки для односторінкових додатків в одній статті. Отже, якщо ви мали успіх з іншими методами, будь ласка, поділіться ними в розділі коментарів.