Основи SEO для розробників: Від нуля до вершини результатів за 12 кроків - javascript.org.ua

Легко написати сайт з гарним інтерфейсом (UI/UX), якщо є достатньо часу та хороша кава. Але що дає сайт без відвідувачів та користувачів?

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

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

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

1. Структура URL

Зберігайте URL короткими та зрозумілими, включаючи основне ключове слово сторінки.

Уникайте спеціальних символів і використовуйте дефіси замість підкреслень для розділення слів.

Спеціальні символи, такі як $ % ^^ (], слід уникати.

Приклад, як не треба робити: www.meusite.com.br/blog/post110212024-100%-completo

Приклад, як треба робити: www.meusite.com.br/blog/como-otimizar-site-para-seo

2. Теги заголовків та мета описів

Почнемо з тега заголовка, його мета — зробити максимум з мінімуму. Як це? Технічно, у вас немає обмежень за довжиною заголовка сторінки, але згідно з тестами найкраще тримати його до 60 символів.

Крім того, щоб ще більше покращити оптимізацію, заголовок має пояснювати ваш нішовий продукт або статтю на сайті та містити ключове слово, що підсумовує вміст сторінки. І не забудьте використовувати семантичний HTML з тегом title. Ось як виглядає тег заголовка:

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

Мета опис має містити ключові слова і короткий підсумок сторінки, щоб спонукати користувачів перейти на сторінку.

Пошукові системи, такі як Google, часто виділяють запит користувача, підкреслюючи терміни в описі. Ось як виглядає код:

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

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

3. Теги заголовків (H1, H2, H3 і т.д.)

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

Легко створити сайт з гарним UI/UX, якщо є час і хороша кава. Але яка користь від сайту без відвідувачів і користувачів?

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

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

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

1. Структура URL

Зберігайте URL короткими та зрозумілими, включаючи основне ключове слово сторінки.

Уникайте спеціальних символів і використовуйте дефіси замість підкреслень для розділення слів.

Спеціальні символи, як $ % ^^ (], слід уникати.

Приклад, як не треба робити: www.meusite.com.br/blog/post110212024-100%-completo

Приклад, як треба робити: www.meusite.com.br/blog/como-otimizar-site-para-seo

2. Теги заголовка та мета-опису

Почнемо з тега заголовка, його мета — зробити багато з мінімуму. Як це? Технічно у вас немає обмежень на довжину заголовка сторінки, але за результатами тестів було виявлено, що оптимально мати до 60 символів.

Крім того, щоб ще більше покращити оптимізацію, заголовок має відображати ваш нішовий продукт або статтю на сайті та включати ключове слово, що підсумовує зміст сторінки. І не забувайте використовувати семантичний HTML з тегом title. Ось як виглядає тег заголовка:

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

3. Теги заголовків (H1, H2, H3 і т.д.)

Теги заголовків допомагають користувачам орієнтуватися на сторінці.
Eles estruturam o conteúdo, facilitando a leitura e a compreensão pelos motores de busca.

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

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

Порада PRO: використовуйте лише один H1 на сторінку, далі структуру заголовків: H2, H3 відповідно до необхідності.

Як структурувати контент за допомогою тегів заголовків

Основний заголовок вашого документа має бути вашим
. Тег H1 представляє загальну тему документа і відображається на початку як великий текст. Ваші основні пункти мають бути вміщені в
. Теги H2 — це заголовки другого рівня, які використовуються для розділення контенту і роблять його зручнішим для перегляду та читання. Наступні теги заголовків йдуть до H6, які не такі важливі в ієрархії заголовків. Загалом максимальна важливість — до H3, тому я зазвичай використовую їх і стилізую CSS відповідно, щоб не витрачати зайвого часу на ієрархію. ## 🚨 Увага: Усі теги мають бути в ієрархії та слідувати їй послідовно, тобто H1>H2>H3…H6, ніколи H4>H1>H3 тощо. Приклад, як не треба робити: Título do meu post texto aleatório de exemplo texto aleatório de exemplo Algo subtitulo com estilização específica texto aleatório de exemplo Outro subtitulo com estilização específica texto aleatório de exemplo texto aleatório de exemplo Outro subtitulo com estilização específica texto aleatório de exemplo Приклад, як треба робити: Título do meu post texto aleatório de exemplo texto aleatório de exemplo Um subtitulo texto aleatório de exemplo Outro subtitulo texto aleatório de exemplo Conteudo que faz parte do subtitulo texto aleatório de exemplo Um subtitulo ..... 4. Otimização de imagem para SEO Для оптимізації зображень потрібно діяти в 3 напрямках: вибрати правильний формат, завантажити оптимальний розмір і включити атрибути ідентифікації. Як вибрати правильний формат зображення для SEO Перш за все, важливо розуміти, що кожен формат має своє призначення (не буду вдаватися в технічні деталі), тому не просто завантажуйте зображення і використовуйте його, інколи необхідно конвертувати його, щоб він відповідав найкращому варіанту. JPEG — легкий, тому підходить для таких речей, як скріншоти, зображення для блогів і контенту, де важлива швидкість завантаження сайту. PNG краще для якості та роздільної здатності, але ці файли зазвичай більші, що може призвести до повільного завантаження сторінки. WebP пропонує кращу компресію порівняно з іншими форматами, без значних втрат у якості зображень. Це покращує швидкість завантаження ваших веб-сторінок і зменшує використання пропускної здатності. Він підтримує як анімовані функції GIF, так і прозорі фони PNG. Проте не всі браузери підтримують цей формат. SVG найкраще підходить для іконок і логотипів.
Eles estruturam o conteúdo, facilitando a leitura e a compreensão pelos motores de busca.

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

Як структурувати контент за допомогою тегів заголовків

Основний заголовок вашого документа має бути вашим
. Тег H1 представляє загальну тему документа і відображається на початку як великий текст. Ваші основні пункти мають бути вміщені в
. Теги H2 — це заголовки другого рівня, які використовуються для розділення контенту і роблять його зручнішим для перегляду та читання. Наступні теги заголовків йдуть до H6, які не такі важливі в ієрархії заголовків. Загалом максимальна важливість — до H3, тому я зазвичай використовую їх і стилізую CSS відповідно, щоб не витрачати зайвого часу на ієрархію. ## 🚨 Увага: Усі теги мають бути в ієрархії та слідувати їй послідовно, тобто H1>H2>H3…H6, ніколи H4>H1>H3 тощо. Приклад, як не треба робити: Título do meu post texto aleatório de exemplo texto aleatório de exemplo Algo subtitulo com estilização específica texto aleatório de exemplo Outro subtitulo com estilização específica texto aleatório de exemplo texto aleatório de exemplo Outro subtitulo com estilização específica texto aleatório de exemplo Приклад, як треба робити: Título do meu post texto aleatório de exemplo texto aleatório de exemplo Um subtitulo texto aleatório de exemplo Outro subtitulo texto aleatório de exemplo Conteudo que faz parte do subtitulo texto aleatório de exemplo Um subtitulo ..... 4. Otimização de imagem para SEO Для оптимізації зображень потрібно діяти в 3 напрямках: вибрати правильний формат, завантажити оптимальний розмір і включити атрибути ідентифікації. Як вибрати правильний формат зображення для SEO Перш за все, важливо розуміти, що кожен формат має своє призначення (не буду вдаватися в технічні деталі), тому не просто завантажуйте зображення і використовуйте його, інколи необхідно конвертувати його, щоб він відповідав найкращому варіанту. JPEG — легкий, тому підходить для таких речей, як скріншоти, зображення для блогів і контенту, де важлива швидкість завантаження сайту. PNG краще для якості та роздільної здатності, але ці файли зазвичай більші, що може призвести до повільного завантаження сторінки. WebP пропонує кращу компресію порівняно з іншими форматами, без значних втрат у якості зображень. Це покращує швидкість завантаження ваших веб-сторінок і зменшує використання пропускної здатності. Він підтримує як анімовані функції GIF, так і прозорі фони PNG. Проте не всі браузери підтримують цей формат. SVG найкраще підходить для іконок і логотипів.
Eles podem ser dimensionados para qualquer tamanho sem perder a resolução.

Як відобразити найкраще зображення для кожного користувача

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

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

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

Приклад:

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

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

Текст альтернативи для зображень (Alt Text)

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

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

Під час написання тексту альтернативи, вказуйте його коротким, описовим і таким, що відповідає вмісту сторінки. Ось приклад:

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

5. Створіть адаптивний дизайн

Світ у вас в руках — ось що дає вам ваш мобільний телефон. Хоча багато хто ще використовує комп'ютери для роботи, більшість людей користуються мобільними телефонами.

У 2023 році 60% глобальних доступів до інтернету було здійснено через мобільний телефон. І ця тенденція тільки зростатиме.

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

До того ж, Google надає пріоритет сайтам, які є mobile-friendly, і хороший досвід на смартфонах і планшетах є важливим.

Говорячи про Google, вони навіть мають міні-курс, орієнтований на адаптивний дизайн з 16 кроками, які детально охоплюють рекомендовані стандарти для адаптивності.

6. Швидкість завантаження

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

Отже, швидке завантаження — це важливо. Оптимізуйте продуктивність сайту, стискаючи зображення (як згадувалося вище), мінімізуючи файли CSS та JavaScript і використовуючи кешування.

Порада для перевірки швидкості завантаження вашого сайту — скористайтеся інструментом від самого Google, PageSpeed Insights.

Цей інструмент має 3 метрики, які допоможуть вам оцінити швидкість завантаження за показниками швидкості, взаємодії та візуальної стабільності:

1.
Largest Contentful Paint (LCP): Скільки часу займає завантаження основного контенту вашої сторінки. Це повинно бути 2,5 секунди або менше.
2. First Input Delay (FID): Скільки часу проходить до того, як користувач може взаємодіяти зі сторінкою. Це повинно бути 100 мілісекунд або менше.
3. Cumulative Layout Shift (CLS): Як часто користувачі стикаються зі змінами в макеті. Оцінка CLS повинна бути якомога ближчою до 0.

7. Внутрішні посилання

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

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

Це покращує навігацію і індексацію Google.

8. XML Sitemap

XML sitemap інформує пошукові системи про те, які URL-адреси вашого сайту слід індексувати. Це фактично список всього важливого контенту вашого сайту.

Створіть XML sitemap, щоб допомогти пошуковим системам зрозуміти структуру вашого сайту та знайти всі важливі сторінки.

Ви можете використовувати генератор саймепів і зберегти його як sitemap.xml в корені вашого проєкту. Потім просто надішліть ваш sitemap в Google Search Console, щоб переконатися, що Google "бачить" його.

9. Файл Robots.txt

Файл robots.txt — це простий текстовий файл на сайті, який інформує пошукові системи, які сторінки вони можуть чи не можуть відвідувати, щоб уникнути індексації непотрібних сторінок. Приклад:

Sitemap: https://meusite.com.br/sitemap.xml  
User-agent: *  
Allow: /  
Disallow: /admin

У наведеному прикладі я надіслав sitemap і також чітко вказав, що не хочу індексувати мій каталог admin.

10. Сертифікат SSL

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

Тому важливо впровадити HTTPS на вашому сайті, щоб забезпечити безпеку користувачів, і це можна зробити за допомогою SSL сертифікату.

SSL сертифікат (Secure Sockets Layer) — це технологія безпеки, яка встановлює зашифроване з'єднання між браузером користувача та сервером сайту.

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

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

11. Досвід користувача (UX) в SEO

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

Google має набір вказівок для оцінки досвіду сторінки. Тому варто створити контрольний список і перевіряти наступні моменти:

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

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

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

Як показати найкраще зображення для кожного користувача

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

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

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

Приклад:

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

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

Альтернативний текст для зображень (Alt Text)

Додавання альтернативного тексту до ваших зображень є важливим для SEO та доступності.

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

При написанні альтернативного тексту використовуйте короткий, описовий і релевантний текст, що відповідає змісту сторінки. Ось приклад:

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

5. Створіть адаптивний дизайн

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

У 2023 році 60% глобальних доступів до інтернету відбувалося через мобільний телефон. І тенденція, ймовірно, зростатиме.

Тому правило очевидне: зосередьтеся на тому, щоб ваш сайт був сумісний з мобільними пристроями.

До того ж Google надає пріоритет сайтам, які є mobile-friendly, і хороше відображення на смартфонах і планшетах є важливим.

До речі, Google має міні-курс з адаптивного дизайну, що містить 16 кроків, де детально розглядаються рекомендовані стандарти для адаптивності.

6. Швидкість завантаження

Я вже згадував важливість швидкого сайту, але це не я кажу, а дані. Згідно з дослідженням Google, 53% користувачів покидають сайт, якщо він не завантажується за 3 секунди.

Отже, швидкість завантаження — це необхідність. Оптимізуйте продуктивність сайту, стискаючи зображення (як зазначено вище), мінімізуючи файли CSS і JavaScript, а також використовуючи кешування.

Порада для тестування швидкості завантаження вашого сайту — використовуйте інструмент самого Google, PageSpeed Insights.

Цей інструмент має 3 метрики, які допоможуть вам оцінити швидкість завантаження на основі швидкості, взаємодії та візуальної стабільності:

1.
Largest Contentful Paint (LCP): Скільки часу потрібно для завантаження основного контенту вашої сторінки. Має бути 2,5 секунди або менше.
2. First Input Delay (FID): Скільки часу потрібно до того, як користувач зможе взаємодіяти зі сторінкою. Має бути 100 мілісекунд або менше.
3. Cumulative Layout Shift (CLS): Як часто користувачі стикаються з неочікуваними змінами в макеті сторінки. Рейтинг CLS має бути якнайближчий до 0.

7. Внутрішні посилання

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

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

Це покращує навігацію та індексацію Google.

8. Sitemap XML

Sitemap XML інформує пошукові системи про те, які URL вашого сайту повинні бути проіндексовані. Це фактично список всього важливого контенту вашого сайту.

Створіть sitemap XML, щоб допомогти пошуковим системам зрозуміти структуру вашого сайту та знайти всі важливі сторінки.

Ви можете скористатися генератором sitemap і зберегти файл як sitemap.xml у корені вашого проєкту. Потім просто відправте свій sitemap до Google Search Console, щоб переконатися, що він "бачиться" Google.

9. Файл Robots.txt

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

Sitemap: https://meusite.com.br/sitemap.xml  
User-agent: *  
Allow: /  
Disallow: /admin

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

10. Сертифікат SSL

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

Тому важливо впровадити HTTPS на вашому сайті для забезпечення безпеки користувачів, і це можливо через сертифікат SSL.

Сертифікат SSL (Secure Sockets Layer) — це технологія безпеки, яка створює зашифроване з'єднання між браузером користувача та сервером сайту.

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

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

11. Досвід користувача (UX) для SEO

Google хоче, щоб користувачі мали безперебійний, інтуїтивно зрозумілий і приємний досвід при використанні сайту (досвід сторінки).

Google має набір керівних принципів для оцінки досвіду сторінки. Тому варто створити список перевірки та слідкувати за наступними пунктами:

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

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

Моніторинг та аналіз

Використовуйте інструменти, такі як Google Analytics та Search Console, щоб відслідковувати ефективність вашого сайту, виявляти області для покращення та коригувати стратегії SEO за потреби.

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

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

Моніторинг та Аналіз

Використовуйте інструменти, такі як Google Analytics та Search Console, щоб відслідковувати ефективність вашого сайту, визначати області для покращення та коригувати стратегії SEO за потреби.

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

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

Перекладено з: SEO Básico para Programadores: Do Zero ao Topo dos Resultados em 12 Passos