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

Наша зрозуміла покрокова інструкція з технічної оптимізації власними силами  допоможе вам розібратись із основами технічного SEO. Також ви дізнаєтесь від чого залежить здоров’я вашого сайту та про основні методи технічної оптимізації.

Що таке технічна оптимізація сайту?

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

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

Як відомо, SEO оптимізація сайту складається з трьох основних напрямів:

  • Off-page оптимізація зосереджена на нарощуванні зовнішньої маси посилань і підвищення рівня експертності, авторитетності та довіри з боку Google.
  • On-page SEO, яка відповідає безпосередньо за оптимізацію сторінок сайту, щоб вони відповідали вимогам пошукової системи.
  • Technical SEO, завданням якої є забезпечити безперебійну та стабільну роботу вашого ресурсу.

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

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

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

Як працює пошукова система Google?

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

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

Кожна зі сторінок будь-якого ресурсу, перед тим як з’явитися в результатах видачі, проходить загальну процедуру перевірки та аналізу контенту.

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

Отже, коли ми говоримо про принципи роботи Google пошуку, то можна виділити три основні етапи:

  1. Сканування. Первинний етап, коли пошукові роботи знаходять і збирають всю необхідну інформацію про сторінку для її перевірки.

  2. Індексація. Google обробляє зібрану інформацію: текст, зображення, відео тощо. Якщо весь матеріал відповідає вимогам, система структурує дані, вносить і зберігає сторінку в індекс.

  3. Показ сайту у результатах пошуку (SERP). Коли користувач вводить конкретний пошуковий запит, система підбирає з наявних у неї в індексі даних відповідні варіанти. Далі формує з них, у порядку релевантності та відповідності пошуковому запиту, результати Google пошуку.

Сканування

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

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

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

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

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

Переконайтеся, що ваш сайт не блокує сканування файлів роботом Googlebot. Ваш сайт не з’явиться у результатах пошуку, якщо він заблокований.

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

Індексація

Під час другого етапу Google має зрозуміти, який саме контент знаходиться на сторінці. Для цього система обробляє та аналізує текст, зображення, відеоматеріали, а також основні атрибути та мета-теги, наприклад title, description, alt назви зображень тощо.

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

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

Вибір канонічної версії сторінки

Як відбувається вибір канонічної версії сторінки.

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

  • Наявність URL-сторінки в Sitemap.
  • Якість сторінки.
  • Використання атрибуту rel=canonical.
  • Протокол HTTP або HTTPS (другий однозначно буде у пріоритеті).

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

Показ сторінки в результатах пошуку Google

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

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

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

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

JavaScript, HTML та CSS

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

Чому потрібен хоча б базовий рівень розуміння, що вони собою являють? Тому що це знадобиться вам у процесі робіт із оптимізації швидкості сайту та показників Core Web Vitals.

На сьогоднішній день, для коректного відображення вашої сторінки на екранах різних пристроїв, використовується комбінація з трьох різних складових: HTML, JavaScript та CSS.

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

HTML

HTML (HyperText Markup Language) – ця мова програмування забезпечує основну структуру (код), необхідну браузерам для відображення вашого веб-контенту. Коли ви бачите письмовий контент на сайті, включаючи заголовки та списки, це все HTML.

JavaScript

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

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

CSS

CSS (Каскадні Таблиці Стилів) – відповідають за кольори, шрифти та загальний вигляд вашого сайту та його сторінок.

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

  • HTML – це основний структурний код вашого сайту.
  • JavaScript відповідає за створення інтерактивних елементів.
  • CSS відповідає за зовнішній вигляд вашого сайту.

Методи технічної оптимізації сайту

Після того, як ви розібралися із обов’язковими основами Technical SEO, розглянемо з яких процесів та методів складається технічна оптимізація сайту.

Детальна інструкція з технічної оптимізації сайту
Які процеси відносяться до технічної оптимізації сайту

Використовуйте HTTPS та SSL-сертифікат

Захищеність та безпека даних користувачів дуже важлива для Google. Про це свідчить краще ранжування сайтів, які використовують протокол HTTPS, а також маркування сайтів, які не захищають дані.

HTTPS (безпечний протокол передачі гіпертексту) – це інтернет-протокол, завдання якого полягає у захисті особистих даних та створенні конфіденційного з’єднання між пристроєм користувача та сайтом.

Якщо ви створюєте новий сайт, то процес переходу з http на https насправді дуже простий. Вам достатньо придбати SSL-сертифікат, це можна зробити одразу ж у вашої хостингової компанії.

Далі відбудеться міграція сайту (перехід з http на https) і вам знадобиться лише проставити кілька 301 редиректів на нову URL-адресу для головної сторінки сайту.

Додайте XML Sitemap до GSC

XML sitemap – це файл, який містить інформацію про сторінки, категорії, зображення, відео та інші ресурси вашого сайту.

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

Це спосіб Google надавати актуальну інформацію про новий контент, який ви публікуєте. Якщо ваш сайт створений за допомогою стандартної CMS, наприклад WordPress, то швидше за все, у вас є sitemap у форматі XML.

Тому регулярно (раз на 7 днів або частіше) надсилайте цю інформацію до Google search Console.

Щоб знайти карту сайту, введіть у пошуковий рядок наступний запит:

URL-адреса вашого сайту/sitemap.xml”

Правильно використовуйте мета-теги Title та Description

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

Правильно оформити мета-теги вам допоможе інструкція з написання title та description. А зараз коротко пройдемося по кожному з них.

Мета-тег title

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

Пам’ятайте, що ваш заголовок також має бути унікальним для кожної сторінки і не перевищувати довжину в 60 символів.

Мета-тег description

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

Тому використовувати description слід для максимально повного опису публікації, не переспамлювати ключовими словами, довжина має бути до 160 символів. Використовуйте 2-3 інформативні речення, що відповідають змісту сторінки.

Оптимізуйте швидкість завантаження сторінок

Завдяки можливостям JavaScript та CSS можна створювати дуже динамічний та візуально привабливий контент. Але у цього є і зворотна сторона – це негативно впливає на швидкість завантаження сторінок.

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

  • PageSpeed Insight. Ви зможете отримати два варіанти звіту: для десктопної та для мобільної версії сайту.

  • GTmetrix. Надає звіт тільки для комп’ютерної версії сторінки, але, на мою думку, цей сервіс більш інформативний.

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

  1. Великий розмір зображень та використання застарілого формату. Потрібна оптимізація зображень для сайту, допоможе стиснення та використання сучасних форматів, наприклад WebP.

  2. Наявність у великому обсязі коду JavaScript та CSS, який не використовується.

  3. Неефективне використання кешу.

Швидкість завантаження сторінок є одним з важливих факторів ранжирування для Google, тому приділіть особливу увагу оптимізації цього показника.

Сервіс який допоможе дізнатись швидкість завантаження
Результати тесту швидкості завантаження сторінки в сервісі GTmetrix

Core Web Vitals

Швидкість завантаження контенту також варто відслідковувати за показниками Core Web Vitals, які можна поділити на три основні категорії:

  1. Largest Contentful Paint: показник LCP відображає скільки часу потрібно, щоб найбільший елемент контенту (наприклад, головне зображення або текст заголовка) на вашій сторінці став видимим в області перегляду відвідувачів.

  2. First Input Delay: FID вимірює час відгуку сторінки, коли користувач починає взаємодіяти з цією сторінкою вперше. Цей процес включає в себе: натискання посилань, натискання кнопок та інші дії користувачів, за які відповідає JavaScript.

  3. Cumulative Layout Shift: CLS показує, наскільки сильно зміщуються макети відвідувачів під час завантаження вашої сторінки.

Користуйтесь сервісами, про які згадував раніше, або Google також надає ці параметри у звітах Google Search Console Core Web Vitals. Ідеальні показники параметрів для Core Web Vitals:

  • LCP: менше 2,5 секунд
  • FID: менше 100 мілісекунд
  • CLS: оцінка 0,1 або нижче
Три головних показника core web vitals
Оптимальні показники метрик Core Web Vitals

Оптимізуйте URL-адреси сторінок

URL-адреси важливі для SEO: вони позитивно впливають на розуміння контенту сторінки пошуковою системою. Також змістовні URL-адреси отримують більше кліків від користувачів.

Google використовує URL-адресу, як і title, description, анкорний текст, щоб краще зрозуміти яка тематика та про що сторінка. Що потрібно врахувати під час оптимізації URL-адрес сторінок:

  1. Обов’язково використовуйте ключове слово: як і з title, ключове слово сигналізує Google за яким запитом варто ранжувати вашу сторінку.

  2. Не використовуйте спецсимволи: пошукова система може проігнорувати та не індексувати сторінки, де в URL-адресі будуть використані спецсимволи, наприклад “#”, “?”, “=” тощо.

  3. Слова поділяйте дефісами: використовуйте виключно “-” між словами в URL сторінки.

  4. Не використовуйте кирилицю для URL: для створення адреси сторінки мають використовуватися виключно латинські літери.

  5. Використовуйте ЛЗП адреси сторінок: продовження до попереднього пункту: створюйте зрозумілі для Google, красиві та клікабельні постійні посилання за допомогою безкоштовних онлайн сервісів, наприклад iTRANSLIT.

  6. Уникайте використання дат та цифр в URL-адресі: використання дат ускладнить у майбутньому оновлення контенту, оскільки ви будете змушені змінювати URL-адресу сторінки і створювати 301 редирект.

  7. Чим коротше ваші URL – тим краще: не використовуйте на адресі сторінок зайвих слів, які не мають сенсового навантаження, таких як “що”, “де”, “як” тощо.
Основні помилки під час створення URL-адрес
Як мають виглядати оптимізовані URL-адреси сторінок

Впровадьте мікророзмітку та структуруйте дані

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

Для структурування даних використовуюються різні словники, яких на сьогоднішній день налічується більше трьох, але найпопулярнішими є Schema, а синтаксисом – JSON-LD.

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

Для всіх сайтів доступні наступні покращені результати видачі, які Google формує автоматично:

  • Featured Snippets.
  • Блок знань.
  • Рекомендації (тільки для ОС Android).

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

Додаткові процеси Technical SEO

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

  1. Оптимізація сайту під мобільні пристрої.
  2. Пошук та видалення дубльованого контенту.
  3. Оптимізація сторінок пагінації.
  4. Пошук та виправлення неактивних посилань.
  5. Використання тегу meta name=”robots” content=”…” та тегу noindex.
  6. Впровадження AMP-версій сторінок для сайту
  7. Оптимізація зображень.

Висновки:

Отже, підсумовуючи все вищезгадане, окремо варто виділити наступне:

  • Технічне SEO – це процес оптимізації вашого веб-сайту, мета якого допомогти пошуковим системам, таким як Google, знаходити, сканувати, краще розуміти та індексувати ваші сторінки.

  • Алгоритм Google пошуку складається із трьох основних етапів: сканування, індексація та показ сторінок у результатах органічної видачі.

  • Під час створення сторінок більшості сайтів використовуються три основні мови програмування: JavaScript, HTML та CSS.

Із яких процесів складається технічна оптимізація сайту:

  1. Правильне використання мета-тегів Title та Description.
  2. Оптимізація швидкості завантаження сторінок
  3. Покращення показників Core Web Vitals.
  4. Оптимізація URL-адреси сторінок.
  5. Впровадження мікророзмітки та структурування даних.
  6. Оптимізація сайту під мобільні пристрої.
  7. Пошук та видалення дубльованого контенту.
  8. Оптимізація сторінок пагінації.
  9. Пошук та виправлення неактивних посилань.
  10. Використання тегу meta name=”robots” content=”…” та тегу noindex.
  11. Оптимізація зображень.