SEO: індексація програми JavaScript

1. Як працює Угловий універсал (теорія)
2. Як налаштувати Angular Universal (практика)
3. Це дійсно працює?
4. Сканування Sitemap.xml
5. Сканування з підтримкою JS
6. Недоліки
7. Розгортання
8. Користувальницький досвід
9. Що робити, якщо ви не використовуєте Angular?
10. ReactJS
11. Vue.js
12. Prerender-spa-plugin
13. Prerender.io
14. Тепер ваша черга

Одним з найважливіших викликів SEO на даний момент є Індексування програм JavaScript пошуковими системами.

Оскільки Google оголосив про "індексацію" схеми Ajax-сканування (= заснована на фрагментах URL), було проведено багато експериментів для визначення фактичних можливостей індексації найважливішої пошукової системи.

Ось, наприклад, дуже цікаво Порівняння каркасів JavaScript :

Google регулярно стверджує, що інтерпретує JavaScript, але є деякі обмеження :

• Єдиний індексований вміст - це те, що доступне на сторінці під час завантаження ;
• JavaScript повинен бути досить швидким ( 5 секунд s, мабуть, обмеження).

Більшість заявок не відповідають цим правилам, тому вони частково або не індексовані. Деякі використовують рішення для обхідного шляху, такі як prerender.io (див. Нижче).

Найкращим рішенням є надання візуалізації на стороні сервера.

TL; DR: ВИ ПОВИННІ ВИКОРИСТОВУВАТИСЯ ВИКОРИСТАННЯ СЕРВЕРА.

Ми представляємо тут ефективне рішення для Angular 4 додатків: Кутовий універсал .

Як працює Угловий універсал (теорія)

Angular Universal раніше був Angular 2 надбудовою, і тепер він інтегрований в Angular 4 core. Це дозволяє генерувати на стороні сервера те, що програма повинна була робити на стороні клієнта. Після доставки в браузер, ця попередньо візуалізована версія буде знята з програми JS, і все, що відбудеться далі, буде виконане на стороні клієнта.

Він вимагає розгортання NodeJS на вашому сервері (але планується реалізація PHP і Python).

Примітка: Кутовий 4 не сильно відрізняється від Angular 2, він просто названий таким чином через семантичну версію. Якщо ви використовуєте Angular 2, вам слід перейти до Angular 4.

Як налаштувати Angular Universal (практика)

Як можна було очікувати, про практику можна багато чого пояснити, тому ми написали окрему статтю про неї: Як налаштувати Angular Universal .

Це дійсно працює?

Стандартне сканування

Щоб перевірити Angular Universal здібності, ми сканували наш сайт з Screaming Frog SEO Spider . Оскільки ми хочемо перевірити, як сайт веде себе без JavaScript , ми вперше запустили інструмент з опцією "Тільки текст":

Це приблизно еквівалентно базовій команді curl :

curl https://your-url.com

на вашому сайті: він просто завантажує результуючий HTML і не запускає жодного JS або веб-рендеринга.

Час відгуку дуже хороший (HTML поставляється менш ніж за 500 мс). Перш за все, зверніть увагу, що засіб правильно збирає всі посилання на сторінки і сканує весь веб-сайт. Він збирає теги TITLE , H1 або META Description, і весь вміст HTML сумісний з тим, що було б у застосованій клієнтській програмі. Таким чином, стандартний текст сторінки та співвідношення слів можна обчислити так само, як якщо б це був звичайний веб-сайт.

Пошукові системи не матимуть проблем з індексацією нашого сайту.

Сканування Sitemap.xml

У звичайній програмі JS одним з обхідних шляхів є надання файлу sitemap.xml, щоб переконатися, що пошукові системи індексують всі сторінки.

Він працює також з Angular Universal , але це не є обов'язковим, оскільки всі посилання виявляються на створених сторінках.

Сканування з підтримкою JS

Другий тест дозволить JavaScript:

Як і очікувалося, сканування тепер набагато повільніше (оскільки інструмент намагається виконати весь код JS). Ми часто отримуємо тайм-аут, і посилання на сторінки не виконуються належним чином.

Здається, тег TITLE обробляється, але деякі частини сторінок ігноруються. Існують деякі помилки щодо індексації нашого веб-сайту.

Недоліки

Документація

Це ще молода технологія, вона погано документована. Відсутність документації може вплинути на проект.

Розгортання

Універсальний універсал вимагатиме створення сервера NodeJS. Звичайно, це може бути зроблено, але це все ще є додатковим обмеженням.

Користувальницький досвід

Ви можете ввімкнути Universal лише для роботів або для всіх відвідувачів.

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

Модуль кутова / попередня підготовка розроблена таким чином, щоб уникнути цього. За допомогою цього модуля, після рендеринга сторінки prerender, клієнтська версія запускається у прихованій копії DOM. Тим часом всі користувацькі взаємодії записуються. Після завершення виконання перепрограмована версія та версія на стороні клієнта перемикаються, а взаємодії відтворюються.

Налаштування preboot не є легким і буде предметом майбутньої статті.

Що робити, якщо ви не використовуєте Angular?

Інші основні структури мають еквівалентні рішення, і коли вони цього не роблять, ви все ще можете використовувати prerender.io ).

ReactJS

• Найбільш відомим рішенням на стороні сервера для React є Next.js . Налаштувати його дуже просто, але все ж рекомендується встановити його на початку, а не завершити проект. Next.js пропонує компонент Link для керування маршрутами. Він також замінить конфігурацію Webpack для генерації пакетів.
• З існуючою програмою, що використовує певну конфігурацію sass та webpack, яка включає користувальницькі навантажувачі тощо, може бути простіше використовувати Express та адаптувати конфігурацію. У такому випадку можна скористатися реакційним доменом renderToString . І вам доведеться адаптувати реактор-маршрутизатор (якщо використовується).

У будь-якому випадку, вам доведеться з обережністю з Redux, і переконайтеся, що він може надати дані на стороні сервера.

Vue.js

Vue.js пропонує кілька рішень для візуалізації на стороні сервера:

• Nuxt.js , що є еквівалентом Next.js для VueJS. The nuxt / starter Шаблон дозволяє завантажувати проект, здатний генерувати всі сторінки в статичній версії. Ці файли можуть бути подані безпосередньо Nginx.

• Vue SSR є більш складним. Він досить близький до Углового універсалу. Ви повинні будете пристосуватися до контексту виконання, щоб створити точну службу SSR. Лише перед створенням створених життєвих циклів гачки доступні на стороні сервера.
  Вона забезпечує гаряче перезавантаження (так що вам не доведеться перезавантажувати сервер Node щоразу), що зручно.

Prerender-spa-plugin

prerender-spa-plugin є плагін webpack. Це агностичний фреймворк і дозволяє відображати колекцію URL-адрес. Створення дуже швидко , і може бути інтегрований у ваш SPA. Отримані статичні файли просто повинні бути опубліковані вашим веб-сервером.

Prerender.io

Prerender.io - це загальне рішення для створення статичної версії будь-якої програми JavaScript.

Це рішення SaaS, але компанія також надає свій інструмент як проект з відкритим кодом , так що ви можете встановити його на свій власний сервер.

В основному, це багатопотокове надання послуг PhantomJS екземпляри, які відповідають за візуалізацію сторінок.

Ми рекомендуємо запустити його за проксі Nginx (є "офіційна" конфігурація nginx і ми зробили мало адаптації ).

Тепер ваша черга

Ви встановили це? Чи є у вас відгук для обміну? Чи виникають проблеми? ЗВ'ЯЖІТЬСЯ З НАМИ якщо вам потрібна допомога, або замовити a SEO AUDIT !