2.

Створення, характеристика та оптимізація веб-сайтів

2.1 Основні поняття створення сайтів

Можливі рішення для представлення цифрового маркетингу в інтернеті:

1. Бізнес-довідник (-каталог) – це веб-сайт, що перераховує підприємства в межах

вибраних категорій.
2. Сайт-візитка – це саме той набір інформації, поширення якої в інтернеті, безсумнівно, є
корисним як починаючим, так і акулам бізнесу. Це своєрідний довідник про фірму,
який містить всі необхідні контактні дані та інформацію про діяльність компанії. Це
повинна бути коротка, чітка і найважливіша інформація про Вас, Вашу сферу діяльності,
інтереси
3. Сайт-вітрина, також лендинг (англ. landing page) – це завершальна сторінка колонки
продаж, також – веб-сторінка, яка відкривається при натисканні на рекламне
оголошення чи посилання. «Цільова сторінка», а так ще називають сайт-вітрину, є
логічним продовженням рекламного оголошення або посилання. Часто «лендінги»
пов'язані з соціальними медіа, розсилками електронною поштою або маркетинговими
кампаніями в пошукових системах з метою підвищення ефективності реклами.
«Лендінг» може бути будь-якою сторінкою сайту або спеціально створеною окремою
сторінкою. Загальна мета «лендінгу» перетворення (конверсії) відвідувачів сайту в
потенційних покупців, тому її ще часто називають «приманка для клієнтів».
4. Соціальна мережа, суспільна мережа – соціальна структура, утворена індивідами або
організаціями. Вона відображає розмаїті зв'язки між ними через різноманітні соціальні
взаємовідносини, починаючи з випадкових знайомств і закінчуючи тісними родинними
зв'язками.
5. Блог – це веб-сайт, головний зміст якого регулярно додані записи, зображення чи
мультимедіа. Для блогів характерні короткі записи тимчасової значущості.
6. лектр нний магазин (е-магазин, e-shop) – сайт, з якого можна вибрати та замовити
потрібний товар чи послугу. Інтернет-магазин перш за все передбачає грошові
розрахунки на відміну від сайтів, які надають послуги безкоштовно.
7. Мобільний сайт – це спеціальна версія веб-сайту, адаптована для перегляду на
мобільних телефонах
8. Будучи встановленим на пристрій користувача, мобільний додаток є інструментом для
прямого контакту з користувачем, і оптимально підходить для частого та
багаторазового використання.

Етапи становлення веб-сайту можна проілюструвати схемою на рисунку 6.

Модуль 15. Цифровий маркетинг 1

Рисунок 6: Етапи становлення сайту.

Доменна система імен (Domain Name System, DNS) – ієрархічна розподілена система
перетворення імені вузла в IP-адресу. Це простіше кажучи таблиці, в яких зберігаються
відповідності між ім’ям та ip-адресою (рис. 7)

Рисунок 7: DNS сервер

Домен – це ім'я для сайту. Погодьтеся, що зручніше використовувати fact.in.ua, ніж IP-адреса
5.101.152.97. Та й до того ж уявіть ситуацію. Ви розмістили сайт на сервері хостингу і
отримали IP адресу. Але, переїхавши на інший хостинг IP зміниться, що викличе
«катастрофу». А ось у випадку з доменними іменами такого не станеться. Чому?

Справа в тому, що в інтернеті є тисячі серверів DNS (системи доменних імен), в яких буде
прописано, що домен fact.in.ua доступний за ip-адресою 5.101.152.97. Якщо власник сайту
«переїде» на інший хостинг, то йому потрібно перейти в панель реєстратора доменних імен

Модуль 15. Цифровий маркетинг 2

(там, де його купував), змінити дещо і у всіх DNS-серверах інтернету пропишеться, що сайт
fact.in.ua потрібно шукати вже по іншому ip-адресу (рис. 8).

Рисунок 8: Порядок доменів

остинг (англ. hosting) – послуга, що включає надання дискового простору, підключення до

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

Веб-сервер – це сервер, що приймає HTTP-запити від клієнтів, зазвичай браузерів, видає

їм HTTP-відповіді, зазвичай разом з HTML-сторінкою, зображеннямb, файлами, медіа-
потоками або іншими даними (рис. 9). Веб-сервер – одна із основ Всесвітньої павутини.

Рисунок 9: Схема зв’язку користувача та сервера

Зв’язок домена з хостингом:

1. Добавити домен на сервер хостинга.
2. Вказати в домені IP-адрес сервера хостинга.

Модуль 15. Цифровий маркетинг 3

Рисунок 10: Схема розробки сайтів

Технічне завдання (ТЗ) – документ, що встановлює основне призначення, показники якості та

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

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

та супроводу сайтів або веб-застосунків, таких як графічний веб-дизайн,
проектування інтерфейсів,…

Верстка веб-сайту – це процес створення веб-сайту із попередньо створеного макету дизайну

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

Програмування – процес проектування та написання комп'ютерних програм (сайтів в тому

числі).

Тестування застосовується для визначення відповідності предмета випробування заданим

специфікаціям. До завдань тестування не належить визначення причин невідповідності
заданим вимогам (специфікаціям).

Система керування вмістом (CMS) – програмне забезпечення для організації веб-сайтів чи

інших інформаційних ресурсів в Інтернеті чи окремих комп'ютерних мережах (рис. 11).

Модуль 15. Цифровий маркетинг 4

Рисунок 11: Системи керування вмістом

Процес створення сайтів на платформі CMS Wordpress. Сайти на цій платформі можна
створювати двома основними шляхами:
1. Згідно етапів розробки сайту (ТЗ-дизайн-верстка-програмування-тестування).
2. На готовій wordpress-темі (безкоштовній чи платній), в даному випадку відсутні етапи:
розробки дизайну, верстки та програмування, а інакше кажучи їх об’єднано в один етап
– розробка сайту.

До цього пункту дивись відео «2.1. Створення першого сайту на Wordpress.mp4».

Створення електронного магазину. WooCommerce – це плагін електронної комерції з

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

До цього пункту дивись відео «2.2. Створення електронного магазину.mp4».

2.2 Характеристика веб-сайтів

Основні частини веб-сайту:

1. Головна (домашня) сторінка.
2. Інформація про компанію.
3. Сторінка контактів.
4. Сторінка з формою зворотнього зв’язку.
5. Новини.
6. Послуги.

Модуль 15. Цифровий маркетинг 5

7. Сторінка пошуку;
8. Карта сайту, яка представляє єдиний список розділів веб-сайтів для пошукових систем і
користувачів та використовується як елемент навігації (показує взаємозв'язок між веб-
сторінками сайту);
9. 404-сторінка – сторінка для відображення повідомлення 404. Останнє є повідомленням
про помилку у списку кодів стандартних відповідей HTTP-сервера, яке вказує, що
сервер не може знайти того, що потрібно клієнту. Здебільшого це повідомлення
з'являється у вікні браузера тоді, коли неправильно вказана назва веб-сторінки, яку
бажає побачити користувач;
10. Засоби електронної комерції: сторінка товару, сторінка категорій товарів, кошик,
сторінка підтвердження замовлення, сторінка магазину.

Основні складові веб-сторінки (рис. 12):

 шапка сайту (хедер),
 підвал сайту (футер),
 бічна колонка сайту (сайдбар),
 основне вмістиме.

Рисунок 12: Системи керування вмістом

Плагін створення контактних форм Contact Form 7. Плагін Contact Form 7 – це не єдиний
спосіб створення контактних форм на wordpress-сайті, але найбільш популярний та зручний в
користуванні.

По цьому пункту дивись відео «2.3. Плагін Contact Form 7.mp4».

Вимоги до розробки дизайну веб-сайту базуються на таких елементах:

1. Інтерфейс користувача (UI) – засіб зручної взаємодії користувача з інформаційною
системою, тобто сукупність засобів для обробки та відбиття інформації, якнайбільше
пристосованих для зручності користувача; у графічних системах інтерфейс користувача,
втілюється багатовіконним режимом, змінами кольору, розміру, видимості (прозорість,

Модуль 15. Цифровий маркетинг 6

 напівпрозорість, невидимість) вікон, їхнім розташуванням, сортуванням елементів
вікон, гнучкими налаштуваннями як самих вікон, так і окремих їх елементів (файли,
теки, ярлики, шрифти тощо), доступністю багатокористувацьких налаштувань.
2. Користувацький досвід (UX), дослівно «досвід користувача», – це те, який досвід та
враження отримує користувач від роботи з вашим інтерфейсом.
3. Адаптивний дизайн – дизайн веб-сторінок, що забезпечує оптимальне відображення та
взаємодію сайту з користувачем незалежно від роздільної здатності та формату
пристрою, з якого здійснюється перегляд сторінки. Метою адаптивного веб-дизайну є
практичне відображення інформації та зручна навігація на всіх пристроях із доступом
до інтернету (від стаціонарних ПК до мобільних телефонів). За технологією адаптивного
веб-дизайну не потрібно створювати окремі версії веб-сайту. Один сайт може
працювати на всьому спектрі пристроїв.
4. Доступність (accessability) – цей термін найчастіше вживається як позначення
доступності сайту для користувачів з обмеженими можливостями, наприклад, людям,
що страждають на захворювання зорового апарату, такі як дальтонізм, сайт в
традиційному вигляді може бути незручним для перегляду,
5. Оптимізація (налаштування) продуктивності, це підвищення продуктивності сайту через
усунення (заміну) менш продуктивних частин веб-сайту шляхом мінімальної кількості
dom-операцій.
6. Сумісність з веб-браузерами (коректне та однакове відображення контенту в різних
браузерах)

Вимоги до контенту сайту:

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

Інтернет-брендинг – управління брендом за допомогою веб-технологій. Інтернет-брендинг

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

Модуль 15. Цифровий маркетинг 7

Методи просування сайту:
 соціальні мережі;
 інтернет-реклама;
 вхідні посилання;
 маркетинг по електронній пошті;
 подання вашого веб-сайту в каталог / пошукові системи;
 підписка по електронній пошті;
 матеріали фізичного маркетингу.

2.3 Оптимізація сайтів

Оптимізацією сайту є пошукова оптимізація (SEO) та оптимізація під соціальні мережі (SMO).
Пошукова оптимізація сайту – процес коригування HTML-коду, текстового наповнення
(контенту), структури сайту, контроль зовнішніх чинників для відповідності вимогам
алгоритму пошукових систем, з метою підняття позиції сайту в результатах пошуку в цих
системах за певними запитами користувачів. Чим вище позиція сайту в результатах пошуку,
тим більша ймовірність, що відвідувач перейде на нього з пошукових систем, оскільки люди
зазвичай йдуть за першими посиланнями. Пошукова система враховує такі параметри сайту
при обчисленні його релевантності:
1. Частота ключових слів: складні алгоритми сучасних пошукачів дозволяють проводити
семантичний аналіз тексту, щоб відсіяти пошуковий спам, коли ключове слово
зустрічається дуже часто (більше 7 відсотків від всього вмісту) або дуже рідко (1-3 %) на
сторінці. Оптимальна щільність ключових слів: 4-7 % від текстового вмісту веб-сторінки,
при цьому ключові слова (фрази) повинні зустрічатися в тексті як мінімум 3-4 рази;
2. Індекс цитування сайту, або кількість веб-ресурсів, що посилаються на даний сайт;
багатьма пошукачами не враховуються взаємні посилання (один на одного), також
важливо, щоб посилання були з сайтів схожої тематики, що і розкручуваний
(оптимізовуваний) сайт.

Відповідно, всі чинники, що впливають на положення сайту у видачі пошукової системи,

можна розбити на зовнішні і внутрішні. Робота по оптимізації включає роботу:
 з внутрішніми чинниками, які знаходяться під контролем власника веб-сайту, –
приведення тексту і розмітки сторінок у відповідність з вибраними запитами,
поліпшення якості і кількості тексту на сайті, стилістичне оформлення тексту
(заголовки, жирний шрифт), поліпшення структури і навігації, використання внутрішніх
посилань;
 з зовнішніми чинниками – обмін посиланнями, реєстрація в каталогах та інші заходи
для підвищення і стимулювання кількості і частоти посилання на ресурс.

Модуль 15. Цифровий маркетинг 8

Пошукова оптимізація може послужити постійним джерелом збільшення кількості
відвідувачів (90% користувачів знаходять нові сайти через пошукові системи; 55% онлайн
покупок і замовлень здійснюються на сайтах, знайдених через пошукові системи). Високий
рівень довіри до пошукових систем дозволяє отримати великий відсоток конвертації
відвідувачів в покупців, а вартість залучення одного відвідувача мінімальна. Основними
чинниками, які впливають на видачу в результатах пошукових систем є:
 внутрішня оптимізація сторінки;
 технічна оптимізація сайту (використовувана CMS, чистота коду, швидкість
завантаження сайту, мобільна версія тощо);
 якісні зовнішні посилання на сайт;
 вік сайту;
 контент для людей (ключових слів може в статті не бути, але вона буде на першій
позиції через релевантність і цінність);
 наявність ключових слів в адресі сайту;
 соціальні сигнали;
 поведінковий фактор.

До факторів, що знижують рейтинг сайту, належать:

 неунікальний контент (статті, новини, тощо);
 завелика кількість ключових слів у контенті;
 технології, які пошукові машини розглядають як спам;
 надлишкове число зовнішніх посилань, або посилання на неякісні сайти;
 фрейми;
 накрутки поведінкових факторів.
Методи оптимізації можна розділити на три класи: білої, сірої та чорної оптимізації. Проте
останні події у світі пошукових систем дають зрозуміти, що це розділення вельми умовне –
будь-яка маніпуляція певними параметрами сайту може бути розцінена пошуковиком як
вкрай небажаний вплив на його результати. Так, будь-яка спроба маніпулювання
пошуковими результатами прямо заборонена в ліцензії на використання пошукових систем.
Але, все таки, білою оптимізацією слід вважати оптимізаторську роботу над ресурсом без
застосування офіційно заборонених кожною пошуковою системою методів розкручування
ресурсу – без впливу на пошукові алгоритми сайтів. Вона включає в себе роботу над самим
сайтом, тобто над його внутрішньою навігацією і вмістом, і роботу з зовнішнім середовищем
сайту, тобто просуванням цього сайту шляхом оглядів, прес-релізів, реєстрації в соціальних
закладках, партнерських програм тощо із зазначенням посилань на сайт. Слід зазначити, що
навіть, якщо який-небудь метод оптимізації не є офіційно забороненим, це не означає, що
його можна застосовувати.

До сірої пошукової оптимізації можна віднести додавання великої кількості ключових слів в
текст сторінки, часто з втратою прочитаності для людини, наприклад: «Масло масляне, тому

Модуль 15. Цифровий маркетинг 9

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

При цьому завдання SEO-копірайтера – написати оригінальний текст таким чином, щоб
подібна оптимізація була якомога менш помітна «живому» читачеві та пошуковій системі. У
випадку неправильно поставленого технічного завдання, копірайтер може випадково
переоптимізувати статтю. Пошукові системи побачивши таку – видалять з індексу ще до того,
як вона попаде на очі асесору (співробітник, який оцінює сайти). Широко застосовується
також включення ключового запиту в HTML-теги title, h1, keywords. Інший приклад сірої
оптимізації – дорвей (спеціальна HTML-сторінка, складена для високого позиціонування в
пошукових системах за певним ключовим словом) без редіректу, тобто, коли при
потраплянні на дорвей не відбувається автоматичного перенаправлення на сайт, який
просувають. Сіра оптимізація відрізняється від чорної тим, що вона офіційно не заборонена,
але її використання все одно може бути розцінене як неприродне завищення популярності
сайту. Деякі пошукові системи, наприклад, Google, можуть тимчасово або назавжди
заблокувати такий сайт. Тобто, остаточне рішення про те, чи є методи просування законними
чи ні, приймає фахівець – модератор пошукової системи, а не програма.

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

Ключові слова (ключові запити, ключі, ключовики) – це слова і словосполучення, що

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

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

Модуль 15. Цифровий маркетинг 10

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

Щільність ключових слів – це відношення кількості ключових слів в тексті до загальної

кількості слів у даному тексті. Щільність виражається у відсотковому співвідношенні.
Оптимальна щільність ключовиків становить 4-6%. Наприклад, копірайтеру надійшло
завдання написати текст для сайту, що просувається з використанням певного семантичного
ядра. Кількість слів в тексті має становити 300. Розрахуємо необхідну кількість ключових слів і
словосполучень, які розподіляться рівномірно по всьому тексту: орієнтуємося на щільність
5%, отримуємо 300 * 0,05 = 15. Тобто 15 входжень ключовиків для даного тексту буде
оптимальним. Але варто пам’ятати, що при розрахунку щільності не повинні враховуватися
стоп-слов, тобто слова, які не несуть смислу (займенники, …). Також варто сказати про те, що
залежно від частоти запиту та його конкурентності необхідно робити не тільки пряме
входження ключових слів (точна відповідність), а й вдаватися до словоформ і розбавленому
входженню (використання додаткових слів) для уникнення перенасичення тексту
ключовиками. На сторінці з текстом важливо використовувати заголовки, що значно спрощує
сприйняття тексту і його логічну побудову. У теги заголовків h1 – h6 необхідно вносити
ключові слова, при цьому заголовок першого рівня – пряме входження, а заголовки
наступних рівнів – словоформи і розбавлене входження. В тег title рекомендується включити
пряме входження ключів, або словоформи з навколишнім текстом;

Ключові слова з певної тематики можна підібрати виходячи з даних статистики пошукових
запитів, скориставшись сервісами типу Google Ads. Серед відібраних ключовиків можуть бути
запити різної частотності. Просувати сторінку тільки по висококонкурентних високочастотним
запитам досить складно, низькочастотні не дадуть доброго результату. Основна ланка
ключових слів відводиться середньочастотним запитам.

Елементи, які впливають на пошукову оптимізацію: метатеги (title / тег заголовку,

description / тег опису, keywords / ключові слова, robots, viewport), теги h1-h6, url сторінки,
альтернативний текст, …

Мета-теги (від англ. «Meta tags») використовуються для того, щоб структурувати супровідні
дані про сторінку. В основному мета-теги розраховані на роботів, браузери, спеціалізоване
ПО – щоб ті коректно «прочитали» і обробили представлену інформацію. Але деякі мета-теги
важливі і для користувачів. Наприклад, вмістиме title виводиться в описі сторінки на вкладці
браузера, а також в якості заголовка сниппета в результатах пошуку. Мета-дані
розташовуються в розділі head поряд зі скриптами, стилями і лінками. Формально title – не
мета-тег, але він розміщується в розділі head, тому про нього найчастіше говорять саме з
приставкою «мета». Інформація з title враховується пошуковими системами при визначенні

Модуль 15. Цифровий маркетинг 11

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

Синтаксис тега title: <title> Заголовок сторінки </title>. Видима довжина title (символів з
пробілами): Google – до 50-55; Яндекс – до 45-55,… . Довжина заголовка title обмежень
немає, але з точки зору SEO важливо, щоб в перших 45-50 символах була закінчена думка. Це
дозволить користувачам з пошукових систем без проблем розуміти, про що сторінка.
Вмістиме title повинно бути інформативним, точно описувати вміст сторінки, включати
головне ключове слово, але без переспама.

Description – це мета-опис сторінки. Для SEO цей тег один з ключових. Синтаксис: <meta name
= "description" content = "Опис сторінки">. Раніше Google і Яндекс при формуванні сниппета в
результатах пошуку виводили інформацію з description. Але оптимізатори швидко зрозуміли,
що за допомогою description можна маніпулювати видачею. Крім того, багато власників
сайтів недобросовісно підходили до заповнення цього мета-тега: вставляли перший абзац з
тексту, копіювали title або взагалі ігнорували його. У підсумку Яндекс перестав формувати
опис тільки на основі description – тепер враховується весь контент сторінки. Google як і
раніше виводить description в сніпеті – але за умови, що він заповнений якісно. В іншому
випадку підтягнеться релевантний, на думку Google, контент зі сторінки. Але це зовсім не
означає, що description втратив свою значимість для SEO. Роботи пошукових систем, як і
раніше сканують вміст description і враховують його при визначенні релевантності
документа.

В інструкціях для вебмайстрів пошукових систем немає жодного слова з приводу довжини
мета-описів. Більш того, відображається довжина описів в сніпеті постійно змінюється:
наприклад, в 2017 році Google розширив її до цілих 300 символів, а в 2018 році – вкоротив до
160. Тому при визначенні оптимальної довжини мета-тега description доводиться спиратися
на емпіричні дані і здоровий глузд. Станом на початок 2020 року відображається довжина
опису сніпета в результатах пошуку (в символах з пробілами):

1. Google: десктопний пошук – 135-175; мобільний пошук – 100-120. Відстежувати

середню довжину title і description в Google (десктоп) можна в сервісі RankRanger –
зараз вона становить 50,88 і 169,38 символів відповідно;
2. Яндекс: десктопний пошук – 160-260; мобільний пошук – 100-160. Після натискання на
посилання «читати ще» опис може розгортатися більш ніж на 500 символів.

Щоб зробити сніпети інформативними, краще найважливішу інформацію додавати в перші

100-120 символах мета-тега description. Для того щоб мета-опис допоміг просунути сайт,
дотримуйтеся таких правил:

 заповніть унікальні description для всіх URL сайту (якщо немає можливості розставити
мета-теги відразу на всіх сторінках, почніть з головної, сторінок каталогу,
найважливіших товарів);

Модуль 15. Цифровий маркетинг 12

  опис має бути точним і містити корисну інформацію, наприклад, описуючи товар в
інтернет-магазині, вкажіть його характеристики, призначення, ціну (фраза на кшталт
«купіть чоботи у нас, тому що ми кращі» в якості опису погана);
 не перетворюйте description в спам-лист (неприпустимо перерахування ключових
фраз, особливо в прямому входженню).

За допомогою мета-тега Robots можна дозволяти або забороняти пошуковим роботам

індексувати сторінки і переходити по розміщених посиланнях. Мета-тег robots може
приймати такі значення (їх розуміє і Google, і Яндекс):

 index (або noindex) – дозволена (заборонена) індексація сторінки;

 follow (або nofollow) – дозволена (заборонена) індексація посилань;
 all – аналог одночасного використання index і follow;
 none – аналог одночасного використання noindex і nofollow;
 noarchive – в результатах пошуку не буде виводитися посилання на збережену в кеші
копію.

Мета-тег viewport став особливо актуальним після початку обліку пошуковими системами
мобільної адаптації як фактора ранжування. У звичайній практиці SEO-фахівця навряд чи
доведеться прописувати цей мета-тег – це завдання розробників шаблону. Але знати про
його існування все ж потрібно. Отже, якщо сайт адаптований під перегляд на мобільних
гаджетах, в розділі head буде прописаний мета-тег viewport такого виду: <meta name =
"viewport" content = "width = device-width, initial-scale = 1">. Тут значення device-width
атрибута width дає команду браузеру підігнати ширину вікна під ширину екрану пристрою.
Значення 1 атрибута initial-scale забороняє масштабування вікна (наприклад, при повороті
екрану).

лементи h1-h6 – корисні для SEO теги, які прописуються в розділі body, тобто їх значення є
контентом і видно користувачам. Але раз вже мова йде про SEO, їх не можна обійти
стороною. лементи h1-h6 – це теги логічної структури документа. На кожній сторінці
обов'язково повинен бути один заголовок, укладений в тег h1. Підзаголовки полягають в теги
h1-h6 і додаються на сторінку опціонально (якщо того вимагає логіка побудови документа і
викладу). При розстановці тегів h1-h6 обов'язково повинна дотримуватися черговість:
наприклад, після h1 йде тільки h2, а після h2 – тільки h3. Часто у початківців SEO-фахівців
виникає питання: title і h1 – це одне й те саме? Ні – тег title прописується в розділі head, а не
body, і саме його використовують роботи при формуванні снiпета. Разом з тим текст,
укладений в теги title і h1, зазвичай частково (рідше – повністю) дублюється.

Добре продумана URL-адреса надає як людям, так і пошуковим системам легке розуміння
уявлення про цільову сторінку. Например, URL-адреси https://name/vneshnjaja-optimizacija-
sajtov/ - це та, яка називається «семантично точною» URL-адресою (вона точно описує її

Модуль 15. Цифровий маркетинг 13

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

Alt-текстом називають короткий опис будь-якого зображення. Термін походить від

словосполучення «альтернативний текст». Він не відображається на сайті і не видно
відвідувачам, це вид мета-даних, прихованих від сторонніх очей. Але незважаючи на те, що
практично ніхто не читає alt-тексти, вони дуже важливі з двох причин:

1. Це корисний інструмент для SEO. Пошукові системи не вміють розпізнавати

зображення і реагують виключно на слова. Додаючи до картинки alt-текст, вона
робиться «помітною» для пошукової системи, результатом чого є підняття в
результатах пошуку.
2. Вони роблять сайт доступним. Люди з вадами зору користуються спеціальними
програмами для читання, коли виходять в інтернет. Ці програми, як і пошукові системи,
не вміють розпізнавати картинки. В цьому випадку виручають alt-тексти. Вони описують
зображення, і людині, яка погано бачить, все стає зрозуміло.

SEO-оптимізація wordpress-сайту

По цьому пункту дивись відео «2.4. SEO-оптимізація wordpress-сайту.mp4».

Оптимізація сайтів під соціальні мережі (SMO). SMO (Social Media Optimization) – це
комплекс заходів, націлених на оптимізацію сайту під аудиторію з соціальних мереж. Якщо
SMM (Social Media Marketing) – це сфера діяльності, що відповідає за залучення людей з
соцмереж, то SMO відповідає за утримання та збереження відвідувачів. Забезпечується це за
рахунок:

 підвищення зручності користування сайтом;

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

Іншими словами, прийшовши на сайт, людина повинна захотіти на ньому залишитися:

прочитати запропоновану статтю, ознайомитися з іншими темами, перейти на інші сторінки,
замовити товар / послугу.

І SMO і SEO є оптимізацією ресурсу. Тільки в одному випадку сайт і його вміст оптимізуються
під пошукову видачу і пошукові запити людей. В іншому – ресурс підганяється під аудиторію
соціальних мереж. SMO передбачає, що сайт обов'язково повинен бути інтегрований з
соціальними медіа. Що включає в себе інтеграція:

Модуль 15. Цифровий маркетинг 14

1. Наявність офіційних представництв (сторінок, груп, …) в соцмережах, де знаходиться
цільова аудиторія і звідки буде залучатися трафік;
2. Додавання на сайт віджетів і кнопок з соціальних мереж. Наприклад, «Поділитися»,
щоб людина змогла зробити репост матеріалу на стіну свого аккаунта прямо через сайт.
3. Коментування контенту через соцмережі. Цей пункт відноситься до попереднього, але
про нього варто сказати окремо. Коментарі під матеріалом – це головний спосіб
спілкування зі своєю аудиторією на сайті.
4. Реєстрація на сайті з допомогою профілів соціальних мереж;
5. Дублювання опублікованого матеріалу на сайті і в соцмережах. Статті, відео,
зображення – все, що публікується на сайті, має бути опубліковане на сторінці компанії.
І навпаки. Іноді пости можуть бути виконані у вигляді коротких анонсів. Якщо анонс
зацікавив користувача, він може перейти на сайт і прочитати матеріал повністю.

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

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

Це не SEO, де користувач не знає, що він побачить після переходу за посиланням. В SMO він
уже має певне уявлення про компанію / бренд / продукт. І саме від цього відштовхується
SMO-фахівець. SMO відмінно підходить тим порталам, де основний вид контенту – це відео
або зображення. Вони швидше поширюються по соціальним мережам. Люди там більше
налаштовані на перегляд відео і картинок, ніж на прочитання довгих текстів. SMO дозволяє
коментувати статті, відео, зображення на сайті за допомогою профілів з соціальних мереж.
Які переваги це дає:

 людям не потрібно окремо реєструватися на вашому сайті, щоб залишити коментар,

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

Крім інтеграції з соцмережами, SMO включає в себе наступне:

1. Вмістиме веб-сторінок має бути цікавим і корисним. Без цього не обходиться жодна
оптимізація. Потрібно підбирати цікаві теми, писати релевантні тексти, публікувати
різні формати контенту (відео, аудіо, зображення);

Модуль 15. Цифровий маркетинг 15

2. Грамотне оформлення контенту, зокрема правильний шрифт, кегль, колір тексту і фону,
відступи, таблиці, списки і т. д. Все це впливає на зручність читання. У користувача не
повинно виникати бажання скоріше прочитати і закрити вкладку. Його очі не повинні
напружуватися від яскравих кольорів і дрібних шрифтів;
3. Правильну організацію контенту, тобто простір сторінки має бути такий, щоб
переглядати матеріал було зручно. Для цього потрібно виділити важливі моменти,
грамотно розмістити зображення і графіку, видаліти всі зайві блоки і віджети, щоб вся
увага користувача було сфокусована на контенті;
4. Розділ «найцікавіше» на видному місці;
5. Розділ «рекомендовано» або «схоже», щоб після прочитання / перегляду основного
матеріалу користувач міг почитати / подивитися щось ще;
6. Додавання розсилки і кнопки «підписатися». Аудиторія соціальних мереж звикла до
формату підписок. Вони підписуються на цікаві джерела для своєчасного отримання
актуальної інформації;
7. Правильну перелінковку сторінок. В SMO перелінковка нічим не відрізняється від
перелінковки в SEO: анкор з ключовими словами, розподіл ваги між сторінками за
важливістю (важливим – більше посилань, неважливим – менше) і т. д .;
8. Опрацювання юзабіліті. Не тільки контент повинен бути зручно організований, але і
інтерфейс сайту. У відвідувача не повинно виникати проблем при пошуку цікавої для
цього інформації. Навігація повинна бути простою і зрозумілою. Вкладеність сторінок –
не більш 3;
9. Видалення дублів сторінок, порожніх сторінок, битих посилань і т. д .;
10. Рекламу свого продукту (всередині сайту), яка не повинна бути нав'язливою. Не
потрібно на кожні 2000 пікселів додавати кнопку «Купити», «Замовити» або просто
розхвалювати свій товар / послугу. Реклама повинна бути або прихованою, або по
факту.

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

SMO-оптимізація wordpress-сайту

По цьому пункту дивись відео «2.5. SMO-оптимізація wordpress-сайту.mp4».

Модуль 15. Цифровий маркетинг 16