Кращі практики SEO з JavaScript Frameworks

1. Як працює інфраструктура JavaScripts.
2. Google і JavaScript
3. Розташуйте сайт за допомогою JavaScript Framework
4. 1 / Аудит вашого сайту
5. 2 / Як зробити ці сайти SEO дружніми?

На початку березня у SEOCamp відбулася конференція Cédric Rambaud та Philippe Yonnet, присвячена питанням SEO-підходу, спрямованого на підтримку повноцінних сайтів JavaScript.
Під час цієї конференції вони пояснили, як пошукові системи мають справу з цими сайтами, і особливо як можна позиціонувати себе за допомогою цієї технології.
По-перше, незважаючи на свою складність і несумісність з двигунами, популярність фреймворків JavaScript продовжує зростати. Ці попередньо визначені функції мають багато переваг:

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

Але як же нам бути SEO?

Як працює інфраструктура JavaScripts.

На відміну від традиційного сайту, що слідує за моделлю зв'язку клієнт-сервер, програма, заснована на JavaScript (Ajax та інші веб-програми), дотримується моделі "рендеринга на стороні клієнта", а саме:

Перший запит завантажує макет сторінки, CSS і JavaScript. Звичайно, деякі або весь вміст не завантажено. Потім JavaScript надсилає другий запит до сервера, який відповідає у JSON, щоб остаточно створити відповідний HTML.

Візуалізація на стороні клієнта (під Ajax)

Рамки JavaScript дозволяють створювати веб-додатки, доступні за допомогою однієї веб-сторінки, це називається SPA (Single Page Application), наприклад, у Twitter, який є мобільним додатком і робочим столом.

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

Архітектура SSR-версії підтримує сервер ретрансляції, тобто користувач отримає повну сторінку у своєму браузері, HTML звичайно генерується в Javascript, але сервером, а не браузером .. \ t

Архітектура SSR (серверна візуалізація)

Сьогодні, на стороні клієнта, 4 рішення конкурують з BackBone, Knockout.JS, Ember.JS і AngularJS, які здійснює Google.

кутовий JS є найбільш популярним JS фреймворком.

Ця модель розвитку викликає ряд проблем.

Виклик № 1 :

Щоб сканувати повний сайт JS, бот завантажує HTML-код і аналізує вміст коду.

В більшості випадків вміст у JS та Ajax ігнорується, за винятком Googlebot з його безголовим браузером.

Виклик № 2 :

Що індексувати? Вміст регулярно змінюється залежно від взаємодії.

Які сигнали? Як проаналізувати посилання та зміст сторінки?

Що додати ці сигнали? Якщо поняття сторінки, пов'язаної з URL-адресою, зникло, як продовжувати використовувати поточний алгоритм?

Виклик №3 :

Показ сайту в повному AngularJS можливий лише за умови активації JS, інакше сайт просто невидимий. Також для пошукових систем важко отримати доступ до вмісту цих сайтів, щоб індексувати їх, оскільки вихідний код відображає лише змінні.

Коли в браузері активовано JS.

Коли JS вимкнено

Повне тіло JS

Тому не дивно побачити значний вплив на видимість SEO цих сайтів ...

Падіння видимості

Google і JavaScript

Сьогодні ми знаємо, що Google інтерпретує JS, що генерує назву, мета-опис, мета-теги роботів: тест на підтримку ,

• Google включає файли CSS і JS для визначення дружньої сторінки для мобільних пристроїв або для виявлення прихованих елементів.
• Google знає, як читати події Onclick,
• Таким чином, Google може відстежувати динамічно створений вміст у JS, щоб індексувати їх.

Але думати, що Google може читати все не так. У випадку Ajax, який не вимагає завантаження подій, движок не виявляє жодного сигналу, щоб дізнатися, як викликати Ajax.

Щоб краще сканувати і індексувати Ajax, Google запропонував в 2009 році техніку Hashbang (#!). Технічно, коли робот зустрічає URL-адресу з hashbang, він сканує цю сторінку і замінить hashbang _escaped_fragment_, а потім індексує сторінку в її початковій формі. Але сьогодні ця техніка застаріла, тому що Google стверджує, що зможе читати вміст, створений в Ajax ...

Метод pushstate, запропонований Історія ІР HTML5 є більш довготривалим рішенням, оскільки динамічні навігаційні URL-адреси залишаються незмінними. Він також має перевагу, що дозволяє навігацію навіть тоді, коли користувач вимикає JavaScript, оскільки він включений у HTML5. Конкретно, pushstate () змінює шлях URL, який з'являється в адресному рядку користувача. SEO ідеально, двигуни можуть читати ці URL-адреси і диференціювати їх один від одного.

Ви повинні знати, що Google також рекомендує реалізацію Pushstate, щоб зробити його SEO нескінченним прокрутки дружнім.

Розташуйте сайт за допомогою JavaScript Framework

Сканування та індексація сайту, виконаного за допомогою JavaScript Framework, можливо, але те, що нас цікавить, буде позиціонувати наші сторінки.

1 / Аудит вашого сайту

Спочатку, якщо тест Fetch як Google не вдасться зробити сторінку, як очікувалося. Існує проблема.

Рішення лежить у безголовому браузері: «Безголовий» браузер - це програмне середовище командного рядка з JavaScript API, яке може відображати повну HTML-сторінку, запускаючи HTML, CSS і JS, як браузер. Ми говоримо про безголовий, оскільки він не має GUI (інтерфейс користувача).

Ми можемо імітувати все, що відбувається в браузері, і тому перевіряти коди, що генеруються Framework JS і Ajax.

Примітка. Цей тип сканування створює "помилкові відвідування" в інструментах webanalytics (тому що вони виконують всі без винятку сценарії).

Phantom JS і Casper JS є безголовими браузерами, останній має відмінність бути скребком.

Ви також можете провести аудит за допомогою Screaming Frog в " Сканування JavaScript ».

Screaming Frog - це SEO-орієнтований сканер, останнім часом він був безголовим режимом на основі PhantomJS. Таким чином, він може повзати повний кутовий сайт.

Перевірте JS, CSS і зображення в конфігурації павука

Налаштуйте JS-виведення, агент користувача і розмір екрану

З січня 2017 року Botify також пропонує таку можливість.

Логотип Botify

2 / Як зробити ці сайти SEO дружніми?

Рішення 1: Кодекс по-іншому з прогресивною стратегією поліпшення.

Принцип прогресивного вдосконалення полягає в побудові його сайту в 3-х шарах:

• Вміст, що зберігається в HTML-коді (вміст і функції доступні для всіх).
• Форматування визначається зовнішніми каскадними таблицями стилів (CSS).
• Можливості, написані на зовнішньому сценарії, як JavaScript.

Рішення 2: Створіть знімки HTML самостійно. Цей метод рекомендується Google для Ajax.

Таким чином, код JS виконується через безболісний браузер на стороні сервера, щоб генерувати HTML, створений кодом JS.

Цей код "захоплений" перед надсиланням, як звичайна HTML-сторінка, у веб-переглядач користувача.

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

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

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

Основними засобами попередньої реквізиції третьої сторони є: PreRender , SEO 4 Ajax (Cocorico!), Brombone ,

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

Крім того, сервери ретрансляції використовують застарілий метод, щоб зробити Ajax crawlable. Знати:

• Або метод уникнути фрагментів з хеш-челками (як видно раніше).
• Або метод ескізів фрагментів з мета-тегом: <meta name = "fragment" content = "!">

Увага, цей метод в HTML5, використовуючи метод pushstate (), настільки ж застарілий, як і інший. На даний момент цей метод працює навіть на різних пошукових системах. Але доки?

JavaScript Framework: наступне покоління

Майбутнє для JavaScript Frameworks "ізоморфний", здатний до гібридної передачі (сервер і / або клієнт).

З ReactJS або HapiJS, ми можемо генерувати HTML, перш ніж відправити його в браузер. Стає можливим створювати сайти з JS Framework без виникнення будь-яких проблем з SEO.

Тим не менш, ця низка покоління JS Frameworks може представляти ті ж самі проблеми, що й у тих, хто має досвід першого покоління.

Розробка в JS Framework це головоломка, яка не є нерозв'язною, але вимагає сильних технічних навичок на стороні SEO і розробників.

І в будь-якому випадку, це зарезервовано для ситуацій, коли трафік SEO не є стратегічним для сайту:

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

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