Надішліть цей чек-лист із 18 кроків своєму розробнику, щоб він врахував усі важливі SEO-вимоги до сучасного сайту під час його створення.
- Чек-лист із SEO для розробників
- Семантичні URL сторінок
- Можливість публікації SEO-тегів
- Семантична і структурована верстка
- Налаштування SSR або його альтернатив
- Налаштування 404 помилки
- Автооновлювана XML карта сайту
- Закриття службових директорій
- Встановлення НТТР-авторизації на тестовому домені
- Альтернативний текст для зображень
- Зазначення мови контенту
- Оптимізація швидкості завантаження
- Іконки сайту
- Розмітка для соціальних мереж
- Спливаючі форми та прихований контент
- Відсутність подвійної верстки
- Недоступність технічних дублів
- Зазначення основних версій сторінок
- Відсутність географічних редиректів
Чек-лист із SEO для розробників
Часто підприємці і навіть маркетологи, створюючи сайт, що продає, ігнорують SЕО, думаючи про те, що пошуковою оптимізацією потрібно займатися набагато пізніше (ймовірно, коли сайт уже буде готовий). Це призводить до того, що на плечі розробників лягає врахування сео-вимог платформи, які їм ніхто не надає. Саме в цей момент відбувається порятунок клієнта від того, щоб під час запуску сайту він не вистрілив собі в ногу.
То що ж має врахувати розробник сайту зі сфери БЕО, щоб йому не довелося потім переробляти свою роботу?
Семантичні URL сторінок
Перше, що пошукова система дізнається про сторінку – її адреса. Виходячи з адреси сторінки алгоритми пошуку можуть уявляти, яким запитам вона відповідає.
Цим потрібно користуватися і використовувати транслітерацію основного слова або фрази, яким відповідає сторінка. Наприклад, замість “page-187- краще використовувати “ugolnye-grill”.
Можливість публікації SEO-тегів
У власника сайту і маркетологів повинна бути можливість без труднощів виправити тег Title і метатег Description кожної сторінки. Як правило, саме їхній вміст береться як заголовок і текст опису сторінки в пошуку.
Семантична і структурована верстка
Використовуйте в коді сторінок сайту теги, що відповідають ролі елементів: для шапки сайту – “header>, для підвалу сайту – <footer>, а для основного меню – <nav> (як і раніше, перевіряючи їхній рівень підтримки браузерами).
Якщо ви хочете вивести таблицю, то використовуйте тег <table>, а не набір контейнерів <div>. Основний заголовок сторінки повинен знаходитися в тезі <h1>, а решта заголовків залежно від рівня вкладеності в тегах
Налаштування SSR або його альтернатив
Чудово, якщо ваш проект використовує Server Side Rendering, коли сервер одразу віддає підсумковий HTML браузеру, без необхідності додаткового завантаження базового контенту за допомогою JavaScript.
Якщо ж ви працюєте на технологіях SPA (React, Angular тощо), то обов’язково налаштуйте пререндеринг підсумкового HTML для пошукових ботів. В іншому разі пошукові системи не побачать частину вашого контенту, а може і взагалі вважатимуть сторінки порожніми і малокорисними.
Налаштування 404 помилки
Пошукова система і користувачі повинні розуміти, що потрапили на неіснуючу сторінку. Пошуковий бот це зрозуміє за кодом відповіді сервера 404. Користувач це зрозуміє за добре оформленим шаблоном сторінки 404 помилки.
Автооновлювана XML карта сайту
Найпростіший спосіб дізнатися про зміни в сторінках сайту для пошукового бота – відвідати файл XML карти сайту, зі списком діючих сторінок сайту і датою їх останнього оновлення (атрибут <lastmod>).
Закриття службових директорій
Для того, щоб пошукові системи не витрачали свої ресурси на обхід ваших службових директорій з ядром сайту і важливими серверними скриптами, їх потрібно закривати від сканування. Робиться це директивами на кшталт “Disallow:/cgi-bin/” у файлі robots.txt, який завжди розташований у кореневій директорії сайту (якщо його створили).
Встановлення НТТР-авторизації на тестовому домені
Створили тестовий домен для показу сайту клієнту перед релізом? Обов’язково ще в момент створення цього домену налаштуйте для нього НТТР-авторизацію. Так пошукові боти ніколи не доберуться до вашого тестового домену і його контент не потрапить у пошук.
Альтернативний текст для зображень
Використовуєте не тільки іконки і текстури, а й значущі для контенту зображення – логотип, фотографії, банери та інфографіку? Обов’язково заповніть для них вміст атрибута alt тега <img>, де лаконічно розкажіть про те, що на них зображено.
Зазначення мови контенту
Не забудьте вказати контейнеру <html> атрибут lang зі значенням мовного коду тієї мови, яка використовується на сайті. У контенті виводяться цитати іншими мовами? Вкажіть і їхнім контейнерам атрибути lang з відповідними мовними кодами за стандартом ISO 639-1.
Оптимізація швидкості завантаження
Але намагайтеся обманювати пошукові системи, видаючи їм полегшений контент для поліпшення показників швидкості завантаження. Google оцінює швидкість завантаження сайту лише на основі реальних історичних даних користувачів Google Chrome, а отже ваш сайт насправді має швидко завантажуватися.
Іконки сайту
Вкажіть у контейнері <head> кожної сторінки тег <link>, що посилається на фавіконку сайту (найкраще у форматі SVG). Додайте іконки “apple-touch-icon” різної роздільної здатності, щоб у закладках у користувачів мобільних пристроїв посилання на ваш сайт мало привабливий вигляд.
Розмітка для соціальних мереж
Під час публікації посилання в соціальних мережах і месенджерах сайт може мати різний вигляд. Вплинути на те, який заголовок, зображення й опис покаже соціальна мережа, можна використовуючи мікророзмотування Open Graph, а саме – її поля title, description. Image.
Спливаючі форми та прихований контент
Напевно на вашому сайті є спливаючі форми, які дублюються на кожній сторінці: зворотний дзвінок, заявка, форма підписки. Не виводьте їх у базовій HTML-сторінці (просто приховуючи за допомогою CSS), набагато краще виводити весь їхній контент за допомогою JavaScript, щоб він не робив сторінки сайту менш унікальними та релевантним запитам користувачів.
Відсутність подвійної верстки
Але створюйте дві версії меню та інших елементів у HTML-коді, приховуючи одну на мобільних пристроях, а іншу – на комп’ютерах. Пошукові боти читають саме ваш HTML, а отже, вони побачать дублювання контенту і посилань.
Недоступність технічних дублів
Закрийте доступ до своїх індексних файлів (Index.php, index.html тощо) за допомогою 301 редиректів на адреси відповідних директорій. Також важливо переконатися, що на основну версію сайту перенаправляють 301 редиректами і її 3 інших дзеркала: з префіксом www, без префікса www, з протоколом http і з протоколом https.
Зазначення основних версій сторінок
Вкажіть за допомогою тога <link> з атрибутом rol=canonical основну адресу для кожної сторінки. У разі, якщо пошуковий бот відвідає цих сторінок з додатковими параметрами або в якійсь вкладеній директорії, то зрозуміє яка версія є основною і має потрапити в пошук.
Відсутність географічних редиректів
Відмовтеся від так званих гео-редиректів: коли за допомогою сторонніх сервісів зіставляється IP користувача з регіоном і відбувається його перенаправлення на відповідну регіональну версію сайту. Пошуковий бот Google сканує сайти з Сан-Франциско, а інші пс – з інших регіонів, а значить частина вашого контенту буде для них недоступна.
Якщо виходячи з бізнес-завдань вам усе-таки потрібно робити такі редиректи, то переконайтеся, що не перенаправляєте пошукового бота.
