HTML-теги і їх атрибути при SEO-оптимізації

Відправимо матеріал вам на EMail:


    Время чтения: 14 мин.

    Як правило, процес оптимізації будь-якого сайту починається з роботи з його кодом. У зв’язку з цим будь-який SEO-фахівець повинен вміти грамотно поводитися з атрибутами і тегами мови HTML. Для правильного використання багатьох елементів необхідні елементарні поняття, яких часто не вистачає початківцям оптимізаторам.

    Основні складові частини мови HTML

    html-tegi

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

    HTML-теги є своєрідним каркасом сторінки, а щоб розширити їх дію, застосовуються різні атрибути. Ці елементи описуються всередині кожного тега, що відкривається в наступному вигляді: «ім’я =” значення “».

    Теги бувають двох типів – одиночні і парні. У разі одиночного тега в описі присутній тільки відкриваючий тег, наприклад, <img>. Контейнерні теги (парні) включають в себе частини, що відкривають і закривають тег – <…> … </ …>, наприклад, <title> текстова частина </ title>.

    Найчастіше будь-який HTML-документ включає в себе наступні блоки:

    • <html> – тег, який відзначає кордон документа і включає в себе елементи <head> і <body>.
    • <head> – контейнер, що містить важливу інформацію для пошукових систем і браузерів. Безпосередньо на веб-сторінці вміст цього тегу не відображається, виняток становить тільки тег <title>, який встановлює заголовок вкладки браузера.
    • <body> – ідентифікує видиму частину документа, яка відображається користувачу у вікні браузера. Це може бути текстовий або графічний контент сторінки, результат роботи скриптів та інші дані.

    Важливість метатегів

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

    Тег <title>


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

    У блоці <head> також можна зустріти теги типу <meta>, що розміщуються для пошукових систем і браузерів. За допомогою грамотного заповнення цих тегів оптимізатор зможе поліпшити позиції сайту, зробивши сніпети більш привабливими для роботів і цікавими для користувачів. Правильне заповнення і розміщення тегів даного типу дасть можливість коректно відображати вміст сторінки.

    Метатег description

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

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

    Метатег robots

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

    Вказавши в атрибуті «name» тільки одного з пошукових роботів, можна закрити іншому шлях для індексації сторінки. Для цього в атрибуті прописується або найменування основного робота Яндекса – «yandex», або Google – «googlebot».

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

    Щоб відкрити доступ до індексації посилань і грамотно передати всю “вагу” вебсторінки, використовується атрибут follow. З іншого боку, nofollow вказує роботу, що переходити за посиланнями і передавати “вагу” заборонено.

    Атрибут all являє собою набір інструкцій, аналогічних «index, follow», протилежним значенням є «none».

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

    Метатег з атрибутом «charset»

    Цей атрибут демонструє тип кодування документа і дозволяє браузеру правильно відображати текстову складову контенту на сторінці. Метатег необхідно розміщувати на самому початку блоку <head>, до <title> і почаку всіх елементів, що містять текст.

    Операційна система Windows, яка використовує кирилицю, застосовує значення атрибута «utf-8» або «windows-1251».

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

    Метатег «viewport»

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

    Оптимізаторам ні в якому разі не можна недооцінювати важливість даного елемента. Адже при відсутності метатега «viewport» мобільний браузер буде відображати для користувача комп’ютерну версію сторінки. Яка в більшості випадків не вміщається в екран портативних гаджетів. Мобільний браузер буде намагатися підлаштувати кордон під наявне вікно, але в результаті всі текстові блоки і графічні елементи будуть розташовані в незручному для користувача вигляді.

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

    Метатег keywords

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

    Теги <link>

    За допомогою даних тегів, що розміщуються в блоці <head>, визначається зв’язок даної сторінки з іншими веб-документами. До атрибутів для тега <link> відносяться: «canonical», «next і prev», «alternate».

    Атрибути next і prev

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

    Раніше, щоб пошукові системи не сприймали все сторінки з описом товарів як однакові, застосовувався тег «link» разом з атрибутами «next» і «prev». Ці дані показували, що сторінка є частиною серії сторінок, тому її слід розглядати в сукупності з усіма іншими елементами серії.

    Оптимізаторам слід брати до уваги, що теги «next і prev» Google вже кілька років не підтримує. Пошуковик обробляє сторінки пагінацію як і будь-які інші сторінки на сайті. Яндекс ж ніколи не брав до уваги цей тег.

    Атрибут canonical

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

    Для вказівки на канонічну сторінку слід розмістити в коді тег «link» з атрибутом canonical, а в атрибуті «href» буде вказано її адресу. Наприклад, <link rel = “canonical” href = “URL” />.

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

    Атрибут alternate

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

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

    Щоб пошукові системи були повідомлені про наявність мобільної версії сайту, вказується атрибут «media». Як правило, версія для комп’ютерів розміщується в домені www.example.com, а призначена для мобільних девайсів версія, – в домені m.example.com.

    Роботи по оптимізації контенту

    Усередині контейнерного тега <body> поміщається контент, який може побачити користувач. До його розміщення також є певні вимоги – перш за все, структурованість. І це важливо не тільки для пошукових систем, які прихильно ставляться до списків і підзаголовків, але і для звичайних користувачів, які легше сприймають великі обсяги інформації дозованими порціями. Це покращує поведінкові фактори цільової аудиторії і дозволяє швидше знайти потрібну інформацію або товар.

    Теги <div>, <span>, <table>

    Щоб створити первинну структуру сторінки, використовують теги <div> … </ div>. Цей блоковий елемент дозволяє управляти певними блоками, розміщеними в документі. У цих блоках, в свою чергу, може бути як текстова інформація, так і зображення, посилання та ін. До основної особливості блочного елемента, укладеного в тегах <div>, відноситься те, що вони починаються з нового рядка і розміщуються в межах всієї області , в якій знаходяться.

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

    Щоб задати певної частини документа той чи інший стиль, можна використовувати 2 способи – підключити зовнішні таблиці стилів за допомогою тега <link> або за допомогою атрибута «style», що вживається в тілі HTML-коду.

    У першому випадку фрагмент тексту, який слід особливим чином виділити, зв’язується з обраним стилем через атрибути «class» або «id». При використанні атрибуту «style» необхідно буде вказати правила CSS. Другий спосіб використовується обмежено, тому що при масовому додаванні атрибуту до тегів значно збільшується обсяг коду. Відповідно, збільшується і час завантаження сторінок, що негативно позначається на поведінкових факторах.

    Для створення на веб-сторінках таблиць використовують тег <table>, що представляє собою контейнер для даних, що містяться в осередках таблиці.

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

    Використання заголовків Н1-Н6

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

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

    Для поділу будь-якого тексту на параграфи застосовується подвійний тег <p> … </ p>. При розмітці варто приділити особливу увагу до частини першої, який пошукові роботи можуть також брати в сніпет. Тому в перших рядках будь-якої статті важливо розмістити мотивуючу і корисну для користувача інформацію, в яку слід органічно вставити ключові слова.

    Застосування списків

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

    При розміщенні списків використовуються теги:

    • <li> … </li> – визначають елементи списку в маркованих і нумерованих списках.
    • <ol> … </ol> – показують межі нумерованих списків;
    • <ul> … </ul> – формують маркований список.

    Акцентуючі теги

    Якщо в тексті необхідно показати особливо важливі фрагменти, для їх виділення застосовуються теги логічної розмітки <strong> … </ strong> і <em> … </ em>. З їх допомогою стандартне зображення тексту змінюється на жирне або курсив відповідно. Таким чином можна показати користувачеві, на що слід звернути особливу увагу.

    Щоб отримати такий же ефект, можна використовувати парні теги фізичної розмітки <b> … </ b> – змінюють накреслення шрифту на жирний, і <i> … </ i> – змінюють його накреслення на курсив.

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

    Подання посилань в розмітці

    Щоб виділити на сторінці посилання, використовується тег <a>. Для цього в атрибуті «href» записується адреса сторінки, на яку відбувається перехід. Між тегами <a> … </a> наводиться фрагмент тексту – слово або фраза, при натисканні на яку буде виконуватися перенаправлення на іншу інтернет-сторінку.

    Згідно рекомендацій пошукових систем текст посилання повинен бути добре помітний для користувача і виділятися на тлі решти тексту. У ситуації, коли веб-майстер не може відповідати за якість сторінок, на які вказує посилання, їх можна закрити від пошукових роботів атрибутом «rel =” nofollow “». При обході сторінки пошуковий робот переглядає даний елемент і розуміє, що переходити за цим посиланням і передавати вагу позначеної сторінці не слід.

    Щоб заборонити індексувати роботам певний фрагмент тексту або посилання, застосовується також тег <noindex> … </ noindex>. Але головним його обмеженням є те, що він працює тільки для пошукової системи Яндекс і не сприймається роботом Google.

    Теги <img>

    Якщо в HTML-документ необхідно додати зображення, застосовується тег <img>. Його обов’язковим атрибутом є «src =” URL “», який вказує на ім’я і розташування файлу зображення. Картинка може також бути представлена ​​у вигляді посилання на інший файл. Щоб вказати на цей момент, тег <img> полягає в контейнер <a>.

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

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

    До інших важливих для картинок атрибутам відносяться «width» (ширина) або «height» (висота). Щоб не допустити спотворення пропорцій, вебмайстру досить задати лише один з цих параметрів, а другий браузер автоматично підлаштує, виходячи з наявної інформації.

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

    Тег <script>

    Щоб в HTML-документі підключити скрипти, використовується тег <script> … </ script>. Додати код на сторінку можна двома способами – розмістивши необхідний код в тезі <script> або підключивши зовнішній файл з кодом. В останньому випадку в тезі вказується шлях до файлу скрипта.

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

    До інших способів прискорення завантаження сторінок відноситься застосування атрибутів «defer» і «async», також відносяться до тегу <script>. Веб-браузери завантажують сторінки поступово, і виявивши будь-який скрипт, спочатку виконують його, а потім продовжують подальше завантаження HTML-коду. Щоб скоротити час очікування завантаження, застосовуються атрибути «async» або «defer». З їх допомогою відбувається асинхронне завантаження скриптів, коли браузер продовжує обробляти розміщений HTML-код і паралельно виконувати скрипт.

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

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

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

    Висновки

    • Атрибути і теги є основними елементами мови HTML. І тільки розуміння функцій гіпертекстової розмітки дозволить грамотно виконати оптимізацію сайту.
    • Для SEO-фахівця найбільш значущою галуззю робіт є оптимізація тегів, укладених в блоці <head>. Інформація з цього блоку особливо важлива для пошукових систем і браузерів. У контейнерах з тегів містяться дані, що допомагають роботам правильно інтерпретувати сторінку і зрозуміти, про що вона.
    • Але не менш важливою є оптимізація атрибутів і тегів з блоку <body>, адже саме цей контент призначений для користувачів. Створюючи структурований текст з мінімальною кількістю нефункціонального коду, можна мінімізувати ймовірність невірного відображення сайту в браузері.
    5/5 - (1 голос)
    Немає коментарів »