1. Виставляйте правильні теги
2. Унікальні і правильні META теги
3. Співвідношення тексту і HTML тегів
4. Використовуйте HTTP заголовки
5. Уникайте технології Flash і iFrame-ів
6. Слідкуйте за швидкістю завантаження сторінки
7. Використовуйте «хлібні крихти» правильно
8. Використовуйте довірені SSL сертифікати
9. Обов'язково використовуйте SEO URL-и
10. трохи корисного

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

Виставляйте правильні теги

Кожен HTML тег має своє призначення і варто використовувати всі за своїм призначенням. Для заголовків першого рівня використовуйте тег H1. Даний тег показує основний заголовок сторінки, на якій знаходиться відвідувач. Контент всередині тега H1 повинен відповідати заголовку title сторінки, а також анкор посилання, по якій людина справив перехід. Крім цього, ЧПУ URL сторінки повинен відповідати заголовку сторінки.

Наприклад на головній сторінці розміщено посилання <a href="/auto/ford/"> Автомобілі Ford </a>, яка містить правильний ЧПУ URL і анкор «Автомобілі Ford». Після переходу за цим посиланням, H1 заголовок і META TITLE повинні містити текст «Автомобілі Ford»

Унікальні і правильні META теги

Часто програмісти не надають особливого значення META тегів, особливо у внутрішніх сторінках. Однозначно варто зробити функціональність, для редагування будь-яких мета тегів на будь-якій сторінці. Крім цього, варто зробити автоматичне і логічне створення META-тегів. Уявіть, що ви створили великий інтернет магазин або ж сайт за оголошеннями, в якому за перший рік набралося велика кількість динамічних сторінок. Писати для кожної сторінки індивідуальні META теги - абсурд. Для цього варто створити індивідуальний і розумний алгоритм, який буде обчислювати необхідні параметри сторінки і створювати для нього META теги. Вам варто також витратити півгодини для пошуку популярних ключових запитів по даній тематиці, щоб ваш алгоритм був максимально ефективним.

Наведемо приклад: інтернет магазин цифрової техніки. На сайті є понад 200 категорій і понад 5000 найменувань. Кожне найменування може мати свій унікальний ЧПУ URL, навіть якщо є схожі назви. Приклад схожих найменувань iPhone 7, 64gb, silver і iPhone 7, 64gb, gold. Багато пишуть однакові заголовки і URL-и для даних товарів, а в описі і фото описують товар з параметрами. Це не правильно! Вказуйте додаткові характеристики в назві і засланні, це допоможе пошуковим системам привести до вас цільових клієнтів. Виходячи з вищезазначених найменувань, посилання повинні бути iphone7-64gb-silver.html і iphone7-64gb-gold.html. Також зауважимо, якщо ви використовуєте ID в посиланнях для ідентифікації товару, то краще за все проставляти його в кінці посилання, а не на початку. Разом виходить: /iphone7-64gb-silver-379.html, де 379 і буде нашим ID.

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

Співвідношення тексту і HTML тегів

Є також таке поняття як співвідношення текстів і HTML тегів. Ви можете подумати, що це не завдання програміста. Але додавши кілька зайвих умов, які будуть «змушувати» вашого клієнта писати довший текст, в кінцевому підсумку ви зробите добру справу для нього. При обуренні клієнта, поясніть йому, що товар, який містить опис з 1 пропозиції, не може бути ефективним. Людина, що зайшов на сторінку, в першу чергу хоче отримати відповіді на свої запити. Сам контент повинен подаватися максимально інформативно. Всі елементи дизайну, фотографії та інше - це всього лише барвиста оболонка для більш зручного сприйняття контенту. Вся сторінка повинна формуватися навколо саме контенту, а не навпаки. Вважається ефективним співвідношення як мінімум 40% / 60% на користь текстів.

Використовуйте HTTP заголовки

Всі ваші сторінки повинні відповідати правильними HTTP заголовками. Якщо людина потрапила на сторінку з контентом, то відповідно заголовок повинен бути 200. Якщо потрапив на сторінку помилки 404, то і HTTP заголовок повинен бути 404. Чимало сайтів, де людина потрапляє на сторінку з помилкою 404, але на ділі браузер отримує відповідь 200. Це не правильно. Пошукові системи вважатимуть подібну сторінку за дійсну, а так як таких сторінок швидше за все багато, то піде ще й другий негативний фактор - дублі.

У PHP заголовки позначаються наступним чином:

# Робоча сторінка header ( "HTTP / 1.0 200 OK"); # Сторінку не знайдено header ( "HTTP / 1.0 404 Not Found"); # Сторінка переміщена назавжди header ( "HTTP / 1.0 301 Moved Permanently"); # Сторінка тимчасово переміщена header ( "HTTP / 1.0 302 Moved Temporarily"); # Сторінку не змінена (використання кеша браузера) header ( "HTTP / 1.0 304 Not Modified");

Список всіх HTTP кодів ви можете знайти, наприклад на офіційному сайті PHP

Уникайте технології Flash і iFrame-ів

Щодо веб стандартів, на щастя, все пішло саме в найкращому напрямку. Колись, в далекому 2000-ом, Macromedia Flash (До покупки Adobe) була дуже крута. Інтернет став більш інтерактивним і живим з її допомогою. Раніше ми не могли отримувати таку ж інтерактивність і подібна взаємодія з клієнтами за допомогою HTML5, CSS3. Було сумно. Навіть всі браузери працювали самі по собі. Щоб домогтися чого-небудь кросбраузерності, потрібно було дуже сильно попихтіти. Сьогодні ж все представлено в кращому світлі. За допомогою HTML5, CSS3, JavaScript можна творити все, що прийде в голову. Крім цього, Adobe офіційно заявила про припинення підтримки Adobe Flash з 2020 року. Остерігайтеся Flash і iFrame, робіть все альтернативними шляхами, які в рази ефективні і доступні.

Слідкуйте за швидкістю завантаження сторінки

Ще один дуже важливий фактор при побудові сайту - це швидкість генерації і кінцевої завантаження сторінки. Левова частка відвідувачів залишають сайт через довгої завантаження сторінки. Напевно і самі ви не раз закривали вкладку в браузері після переходу з пошукової системи, яка вантажилася дуже дуже довго. Альтернативу ви завжди знайдете. А для того, щоб ваші відвідувачі не шукали альтернативи, порадуйте їх швидкої подачею інформації. Рекомендований час генерації і завантаження сторінки 1-2 секунда. Це той ідеал, до якого ви повинні прагнути. І нехай ці цифри вас не лякають - вони цілком можуть бути реалізовані з нинішніми технологіями.

Кілька порад щодо прискорення завантаження сторінки:

1. налаштуйте кешування статики на стороні сервера;
2. використовуйте кеш браузера наскільки це можливо;
3. включите GZIP стиснення;
4. мініфіціруйте JS, CSS файли, а також бажано і HTML сторінки;
5. оптимізуйте всі вихідні фотографії та елементи дизайну, які побудовані з картинками;
6. використовуйте шрифтові іконки;
7. кешируєтся запити до бази даних;
8. зменшіть число послідовних сполук перехідних з браузером;
9. ну і звичайно, вибирайте хороший сервер, з правильною конфігурацією і високим uptime-му;

Більш докладно про оптимізацію швидкості завантаження сторінки ви можете прочитати в нашій попередній статті - Як прискорити завантаження сайту .

Використовуйте «хлібні крихти» правильно

Внутрішня перелінковка, «хлібні крихти» і структуровані дані , Також дуже важливі для високих результатів в пошуковій видачі. Ваш сайт може мати логічну навігацію, логічні розділи для звичайного відвідувача, але абсолютно незрозумілу структуру для пошукової системи. У зв'язку з тим, що одне іншому не заважає, однозначно варто дотримуватися деяких рекомендацій при побудові навігації і «хлібних крихт». Якщо раптом хтось не знає, що саме називають «хлібними крихтами» (з англійської Breadcrumbs), так це елемент навігації, що представляє собою шлях від головної сторінки до тієї, в якій знаходиться відвідувач.

Наприклад, людина з головною перейшов в категорію «Смартфони», далі перейшов на внутрішню категорію «Apple», а після - на сторінку товару «iPhone 7». На кінцевій сторінці товару «хлібні крихти» повинні мати наступний вигляд:
Головна > смартфони > Apple > IPhone 7
Все логічно і зрозуміло для користувача. Щоб було зрозуміло і пошуковим системам, потрібно дотримуватися деяких правил для формування структурованих даних . Інформації для формування правильних структурованих даних досить на офіційних сайтах Google, Yandex, Bing. У найближчому майбутньому ми напишемо статтю описує «структуровані дані» на основі поширених прикладів і в легшій інтерпретації.

Використовуйте довірені SSL сертифікати

Економити, особливо на початкових стадіях бізнесу - те, що роблять багато. І справа це цілком справедливе. Так як на початкових стадіях побудови нового бізнесу дуже важливо зробити основний акцент саме на продукт. Але, часом, економія всюди призводить до плачевних результатів. Дане твердження відноситься до саморобним або безкоштовним SSL сертифікатами, які можуть працювати, а можуть і ні. Ви поставили свій саморобний SSL сертифікат, щоб заощадити 10-20 $, все працює - все супер. В один прекрасний день заходите на сайт і помічаєте, що він видає помилку net :: ERR_CERT_COMMON_NAME_INVALID або ж, браузер повідомляє, що встановлений якийсь сумнівний SSL і довіряти йому не варто (The site's security certificate is not trusted!). І пишеться це цілком так лякаюче, на червоному, задньому фоні, червоними великими літерами. Щоб уникнути подібних ситуацій, варто купувати сертифікат у довірених постачальників, а їх всього кілька в світі. Щоб не витрачати багато грошей на початковій стадії, вам швидше за все буде досить придбати SSL з перевіркою домену Comodo Positive SSL , Який в середньому коштує в межах $ 8. Ви також можете ознайомитися з нашою попередньою статтею про переваги HTTPS проти HTTP .

Обов'язково використовуйте SEO URL-и

Хоча і торкнулися коротко дану рекомендацію в пункті 1, але вважаємо за потрібне викласти більш докладну інформацію про організацію правильних і зрозумілих посилань на сайті. Правильна SEO оптимізована посилання повинне містити в собі логічний ланцюжок навігації. Давайте візьмемо той же приклад інтернет магазину, де людина перейшла з головною в категорію «Смартфони», далі перейшов на внутрішню категорію «Apple», і в кінці прийшов на сторінку товару «iPhone 7». Кінцева сторінка повинна мати, як приклад, посилання /smartphones/apple/iphone-7.html. Такий варіант можна вважати ідеальним. Але якщо вам потрібно також проставляти ID категорій і товару, то можна використовувати і варіант /smartphones-3/apple-1/iphone-7-56.html, де 3, 1 і 56 в кінці кожного блоку є ідентифікатором. Таке посилання цілком відповідає всім вимогам, а також має логічний вигляд для звичайного користувача. Відповідно і сторінка категорії повинна мати посилання виду: / smartphones / apple /. Не нехтуйте цією рекомендацією, від правильних SEO посилань залежать результати ранжирування вашого сайту пошуковою системою.

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

Давайте наведемо приклад, щоб ви чітко зрозуміли про що мова. Приклад буде стосуватися тієї ж сторінки /smartphones/apple/iphone-7.html. На всіх публічних сторінках дане посилання повинна виглядати саме так. Публічні сторінки, це ті, які бачить пошукова система і індексує. У нашому прикладі це посилання пошуковик може побачити в категорії / smartphones / apple /. Є ще й не публічні сторінки. Наприклад, обліковий запис користувача, e-mail розсилки та інше. Цього пошуковик не побачить, і там можна спокійно встановити посилання, наприклад: /? Product = 56. Людина переходить за цим посиланням, далі відбувається редирект на сторінку /smartphones/apple/iphone-7.html. Ви скажете, яка ж це економія, якщо в результаті для редиректу потрібно все ж виконати обчислювальні дії? Економія в тому, що з особистого кабінету, з розсилки та інших, що не публічних місць, людина може як перейти, так і не перейти по посиланню. І наша обчислювальна потужність буде задіяна виключно в момент переходу. На противагу тому, що в списку товарів, в каталозі, дана обчислювальна потужність використовується для всіх товарів, окрім той факт, що відвідувач перейде всього по одному товару з видачі.

трохи корисного

Наостанок залишимо кілька посилань на корисні матеріали та ресурси.
Запам'ятайте: чим якісніше ваш пройдуть, тим цінніше ви!

1. Google Webmaster
2. Яндекс Вебмайстер
3. Bing Вебмастер
4. Інформація по robots.txt
5. Список ISO 639-1 кодів (мови)
6. Список HTTP кодів
7. Перевірка структурованих даних
8. JSON валідатор
9. W3C валідатор
10. Kraken.io - оптимізатор зображень