SEO оптимізація сайту: покрокова інструкція

1. Сканування і індексація
2. XML карта сайту
3. Robots.txt
4. оптимізація URL
5. Канонічні URL-адреси
6. Швидкість завантаження сторінок
7. Адаптивність до мобільних пристроїв
8. Структура мобільного сайту
9. мікророзмітки
10. резюме

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

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

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

І як же його отримати?

SEO вам на допомогу.

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

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

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

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

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

Сканування і індексація

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

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

• Для додавання ресурсу в Google скористайтеся Google Search Console - https://www.google.com/webmasters/tools/submit-url.
  Для цього вам прідeтся створити Google-аккаунт, який крім можливості додавання заявок на обхід роботом сайтів дасть вам ещe масу можливостей, серед яких реєстрація в сервісах Adsense, Adwords, YouTube та інших.
• Для додавання заявки на індексацію ресурсу роботами Yandex вам також прідeтся створити Яндекс-аккаунт, тому що Яшина аддурілку (жаргонна назва інструменту додавання заявки на індексації роботом) доступна тільки в кабінеті веб-майстра.
  Після реєстрації аккаунта ви зможете отримати доступ до інструменту тут - https://webmaster.yandex.ua/addurl.xml.
• Єдиний виняток в плані вільного додавання сайту і окремих його сторінок для індексування представляє Bing, який не вимагає від веб-майстрів наявність аккаунта Microsoft (так, це їх пошукова система 🙂), хоча і нагадує про його створення час від часу.
  Аддурілку Bing розташована за даною адресою - http://www.bing.com/toolbox/submit-site-url

XML карта сайту

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

Насправді, їх можливості цим не обмежуються.

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

Таким чином, карта сайту бере участь у внутрішній SEO оптимізації сайту.

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

Оформлена за всіма правилами карта сайту буде виглядати наступним чином:

<? Xml version = "1.0" encoding = "UTF-8"?> <Urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9" xmlns: xhtml = "http: //www.w3 .org /: 1999 / html "> <url> <loc> https://www.example.com/ </ loc> <lastmod> 2016-8-01 </ lastmod> <changefreq> monthly </ changefreq> <priority > 0.9 </ priority> <xhtml: link rel = "alternate" hreflang = "fr" href = "https://www.example.com/fr/" /> </ url>

Що ж всe це значить?

Ось коротка розшифровка написаного вище:

• <urlset> - цей тег є обов'язковим і повідомляє роботам, що карта сайту є початковою і кінцевою.
• <url> - позначає початок і кінець кожного URL у файлі sitemap.xml.
• <loc> - даний тег визначає URL сторінки. У той час як інша частина атрибутів, які перебувають в <url> тезі, є не обов'язковими, про <loc> такого сказати не можна.
• <lastmod> - дата, в форматі YYYY-MM-DD, останнього оновлення або зміни сторінки.
• <changefreq> - тег вказує на те, як часто ви оновлюєте сторінку.
  Це допоможе пошуковим системам прийняти рішення про еe скануванні.
  Пошукові роботи повинні бути впевнені, що вони індексують свіжий контент.
  Можна було б спробувати схитрувати, щоб збільшити частоту сканування, але краще цього не робити.
  Якщо пошукові системи бачать, що <changefreq> не відповідає фактичній частоті змін, вони будуть просто ігнорувати цей параметр.
• <priority> - встановлює пріоритет сторінки по відношенню до іншої частини сайту.
  Допустимі значення знаходяться в діапазоні від 0,0 до 1,0 (від найменш до найбільш важливих).
  Використовуйте цей тег, щоб допомогти пошуковим системам сканувати ваш сайт більш розумно.
  Зверніть увагу, що це тільки повідомляє роботам, наскільки важливі ваші сторінки в порівнянні з іншими сторінками.
  Але це ніяк не вплине на пріоритет ваших сторінок в порівнянні з іншими сайтами.
• <xhtml: link> - цей тег вказує на альтернативні версії сторінки. В даному прикладі він вказує на французьку версію https://www.example.com.

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

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

Після того, як у вас буде XML Sitemap, її необхідно буде перевірити за допомогою Google Search Console, інструментів Bing і кабінету вебмастера Yandex для подальшої відправки на індексацію.

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

Robots.txt

Як і карта сайту, файли robots.txt є текстові файли, які зберігаються в кореневому каталозі сайту. Їх призначенням полягає в допомозі пошуковим роботам в скануванні сайту.

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

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

Зазвичай, код robots.txt виглядає наступним чином:

User-agent: * Disallow: & lt; br data-mce-bogus = "1" & gt; User-agent: googlebot Disallow: * .ppt $

Зірочка (*) використовується в якості універсального символу, що позначає будь-яку кількість будь-яких символів. У рядку агента пошукової системи, універсальний символ означає всіх ботів.

У рядку Disallow вона має на увазі URL до зазначеної точки. В наведеному вище прикладі, наш robots.txt забороняє Googlebot сканування сторінок, які закінчуються розширенням файлу PowerPoint (ppt) - символ $ позначає кінець URL.

Ви можете забороняти ботам сканувати весь сайт за допомогою косою риси в рядку Disallow:

User-agent: * Disallow: /

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

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

За допомогою Google Search Console ви зможете перевірити свій файл robots.txt на синтаксичні помилки або інші проблеми.

Більш докладно про robots.txt ви можете дізнатися з цього відео:

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

Отже, закриття сторінок за допомогою robots.txt, не гарантує, що ваш сайт не буде проіндексований.

Для вирішення цієї проблеми необхідно додати додатковий рівень захисту для окремих сторінок за допомогою мета-тега robots:

<Meta name = "robots" content = "noindex">

оптимізація URL

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

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

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

Погляньте на ці два URL-адреси:

• https://www.example.com/clothing/mens/shirts/fancy-white-dress-shirt
• https://www.example.com/product/cid=12345&pid=67890

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

Другий URL не скаже вам нічого про те, що ви знайдете на цій сторінці, за винятком, можливо, того, що цей товар є продукцією example.com.

Як ви думаєте, який з цих адрес буде більш релевантним пошуковим запитом «модні білі чоловічі сорочки»?

При створенні URL-адрес, дотримуйтесь цих рекомендацій:

• стиснутий
  Ваші URL-адреси повинні бути описовими, містити ключові слова і бути короткими. В цілому, вони не повинні становити більше 100 символів.
• чистий
  По можливості слід уникати використання параметрів URL, таких як ідентифікатори сеансів і сортування / фільтрації. Вони знижують зручність і підвищують ризик дублювання контенту.
• дефіси
  При використанні декількох слів у вашому URL, їх слід розділяти за допомогою дефіса, а не підкреслення. Пошукові системи використовують дефіс як роздільник слів, але не визнають нижнього підкреслення.
  Отже, url_keyword для них означає те ж, що і urlkeyword. Оскільки люди використовують прогалини в пошукових запитах, дефіси в ваших URL додадуть їм релевантності.

Канонічні URL-адреси

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

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

Це погано не тільки з точки зору тавтології. Фільтри Google Panda і Яндекс АГС заблокують весь сайт.

Якщо ви страждаєте від дублювання контенту завдяки вашій движку сайту , То дану проблему досить легко вирішити завдяки використанню rel = "canonical» для вказівки пошуковим системам посилання на оригінальну версію.

При використанні канонічних URL, спершу потрібно реалізувати WWW дозвіл.

Для цього налаштуйте кращий домен в Google Search консолі в розділі «Параметри сайту».

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

Так що якщо ви встановите бажаний домен www.example.com, всі посилання на example.com будуть направляти контрольний вагу на www.example.com, який є URL, показуваним Google в результатах пошуку.

Потім додайте канонічний тег в секцію <head> HTML - сторінок або HTTP заголовок без HTML - сторінок:

• HTML: <link rel = "canonical» href = "https://www.example.com» />
• HTTP: Link <https://www.example.com>; rel = "canonical»

При додаванні канонічних тегів ви повинні бути абсолютно впевнені, що URL-адреси, які ви використовуєте, на 100% відповідають вашим канонічним URL.

Google бачить http://www.example.com, https://www.example.com і example.com як три різні сторінки.

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

Швидкість завантаження сторінок

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

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

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

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

• зображення
  Зображення є одним з найбільших винуватців повільній швидкості сторінки.
  Не слід покладатися на HTML, щоб зменшити розмір файлу зображення - це може тільки змінити його розміри в пікселях, але не в байтах.
  Використовуйте програмне забезпечення для редагування зображень, наприклад, Photoshop, щоб зменшити розмір файлу. Також не зайвим буде вдатися до використання інструментів для стиснення зображень без втрати їх якості (до них можна віднести різні цільові бібліотеки і онлайн-редактори).
• сторонні сервіси
  Деякі плагіни і скрипти, такі як кнопки для постів статей в соціальні мережі і відслідковує ПО (Google Analytics, інші счeтчікі і статистика), які необхідні для Вас, щоб отримати максимальну віддачу від вашого сайту.
  По можливості, краще використовувати плагіни, розроблені для вашої CMS, і дотримуватися однієї системи відстеження трафіку. Постійно оновлюйте CMS свого сайту, а також додаткове ПО (шаблони, плагіни і т.д.), але не забувайте перевіряти їх працездатність перед установкою на тестовій копії ресурсу, щоб не нашкодити основного сайту.
• кешування
  Використовуйте истекающие заголовки (expires headers), щоб контролювати тривалість часу, протягом якого ваш сайт буде кешуватися, а також повідомляйте клієнтським браузерам, що вони можуть кешувати зображення, таблиці стилів, скрипти і Flash.
  Це дозволить скоротити кількість HTTP-запитів, що збільшить швидкість завантаження сайту і благотворно впливає на SEO пошукову оптимізацію сайту.
• G-Zip кодування
  використовуйте G-Zip стиск для зменшення розміру великих файлів на вашому сайті, щоб зберегти пропускну здатність і додатково зменшити час завантаження.
• перенаправлення
  Деякі редіректи неминучі. Проте, пам'ятайте, що кожне перенаправлення - це новий HTTP-запит, який додає мілісекунди під час завантаження.

Якщо сторінка сайту не завантажується повністю (не всі елементи видно), то скористайтеся інструментами розробника браузера (Зокрема, вкладкою «Мережа / Network»), щоб знайти файли, які перешкоджають цьому.

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

Адаптивність до мобільних пристроїв

Швидкість завантаження сторінок на мобільних пристроях

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

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

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

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

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

1. Зменшити розмір зображень;
2. Використовувати кешування;
3. Знизити кількість залежностей (підключаються сторонніх сервісів);
4. Звести до мінімуму редіректи.

Або ви можете створити прискорену сторінку для мобільних пристроїв (AMP від ​​англійського Accelerated Mobile Page).

AMP є opensource стандартом для створення бистрозагружаемих мобільних сторінок за умови великої відвідуваності.

Існує три основних складових AMP:

• HTML
  HTML для сторінок AMP - це, в основному, звичайний HTML. У нього є тільки кілька користувальницьких змін і обмежень на ресурси, такі як зображення, відео та фрейми.
• JavaScript
  Сторінки AMP використовують для користувача (custom) JavaScript бібліотека, яка завантажується асинхронно. Ви також повинні встановити розміри в HTML, щоб браузери знали, як буде виглядати сторінка, перш ніж будуть завантажені всі елементи. Таким чином, стаття не буде стрибати в міру завантаження інших ресурсів.
• кеш
  Google має виділений кеш для сторінок AMP, які він використовує в результатах пошуку. Коли Google завантажує сторінку, збережену в кеші AMP, всe відбувається з того ж місця, що означає кращу ефективність.

Структура мобільного сайту

При створенні мобільної версії сайту потрібно дотримуватися трьох основних аспекти:

• мобільний піддомен
  Це найважчий і времязатратний пункт з усіх, так як він вимагає створення окремого мобільного веб-сайту, розміщений на піддомені (як правило, щось на зразок mobile.example.com або m.example.com).
  Google не зможе самостійно визначити, що піддомен відповідає сайту тільки для мобільних користувачів, так що вам доведеться використовувати тег rel = "canonical» на дублюються сторінках.
  Цей метод вимагає багато ресурсів, більше, ніж наступні пункти, і, як правило, не рекомендується.
• динамічний дизайн
  Цей метод визначає агент користувача (user-agent) і надає різний HTML для мобільних браузерів і браузерів для настільних комп'ютерів.
  Використовуйте різні user-agent HTTP заголовки, щоб повідомити пошуковим системам, що ви будете обслуговувати різні код, заснований на user-agent.
  Додайте цей код, якщо ваш сайт працює на PHP: <? Php header ( "Vary: User-Agent, Accept"); ?>

  Аналогічної результат можна домогтися також путeм настройки Apache за допомогою наступного коду в .htaccess:

  Header append Vary User-Agent

  Додайте цей код в functions.php, якщо ви працюєте з WordPress :

  function add_vary_header ($ headers) {$ headers [ 'Vary'] = 'User-Agent'; return $ headers; } Add_filter ( 'wp_headers', 'add_vary_header');

• адаптивний дизайн
  Найпростіший і легкий спосіб створити мобільну версію сайту, це - адаптивний дизайн.
  До речі, цей метод рекомендуємо Google. Він просто вимагає від вас установки мета-тега viewport.
  Він повідомляє браузерам, які розміри використовувати при відображенні сторінки.
  Щоб зробити сторінки вашого сайту адаптивними до мобільних пристроїв за допомогою мета-тега viewport, пропишіть наступні рядки в коді хедера: <meta name = "viewport" content = "width-device-width, initial-scale = 1.0" />

мікророзмітки

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

Ви можете використовувати розмітку Schema.org на вашій сторінці «Про нас», наприклад, щоб повідомити пошуковим машинам, де шукати вашу адресу, години роботи і номер телефону.

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

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

Про те, як налаштувати мікророзмітки на WordPress сайті, ви можете подивитися в наступному відео:

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

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

Найпростіший спосіб побачити пошукові сніппети - це зробити пошук по необхідному запитом.

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

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

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

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

резюме

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

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

На цьому всe! Чекаю ваших оцінок і відгуків в коментарях під статьe.

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

Підписуйтесь на оновлення проекту, щоб бути в курсі виходять статей.

До новой зустрічі! 🙂

Оригінал статті - https://www.sitepoint.com/9-point-technical-seo-checklist-for-developers/

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

Більше 5 років досвіду професійної розробки сайтів. Робота з PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular і іншими технологіями web-розробки.

Досвід розробки проектів різного рівня: Лендінзі, корпоративні сайти, Інтернет-магазини, CRM, портали. У тому числі підтримка і розробка HighLoad проектів. Надсилайте ваші заявки на email [email protected] .

І з друзями не забудьте поділитися 😉