Основні HTML meta-теги: опис

Теги в HTML розташовуються усередині тега і дуже важливі для ранжирування веб-сторінки в пошукових системах. У документі їх може бути кілька. Назва цього тега походить від грецького слова, що позначає фразу "разом з чим-небудь" або "після чого-небудь, потім". Мета-теги зберігають службову інформацію про даних, не призначених для відвідувачів сторінки. Ці дані використовуються пошуковими роботами для пошуку і відображення сайтів по визначеним запитам користувачів. Вони також впливають на оптимізацію сторінки і на її місце в пошуковій видачі. Наприклад, за допомогою мета-тегів можна вказати авторство, додати якийсь опис сайту, дозволити або заборонити індексування пошуковими системами або налаштувати автоматичне оновлення сторінки. Зробити це допомагають атрибути тега HTML , такі як charset, keywords і інші. Зазвичай вони записуються в парі: у першому атрибуті знаходиться ім'я, а в другому – значення.

Атрибути тега

Мета-теги з різними атрибутами розташовуються усередині тега . Їх може бути кілька, і кожен буде відповідати за якийсь свій власний функціонал. Існує кілька основних атрибутів, які можуть приймати різні значення. Вони використовуються, щоб повідомити браузеру і пошуковим системам певну інформацію про сторінку. Основні атрибути тегу HTML у : name; content; http-equiv; charset. Останній атрибут – charset – потрібен для вказівки кодування сторінки. Він з'явився тільки в останній, п'ятій специфікації мови HTML. Найбільш часто зустрічається значення кодування – utf-8 або Unicode. Атрибути name і content зазвичай використовується в парі. У name може бути кілька значень: description – короткий опис сторінки, яка показується у видачі; author – необов'язковий атрибут для вказівки авторства, ім'я автора документа; robots/norobots – дозволяє або забороняє індексацію сторінок пошуковими роботами; follow/nofollow – дозволяє або забороняє перехід за посиланнями; application-name – задає ім'я веб-додатки, якщо є веб-сторінку, в інших випадках не використовується; generator – використовується для опису програмного пакету, в якому згенерована веб-сторінка; viewport – потрібен для коректного відображення сторінки на екрані мобільного пристрою; keywords – ключові слова, що полегшують ранжування сторінок пошуковими системами. Атрибут тега HTML content (опис) буде зберігати значення атрибута name" (ім'я). Наприклад: . Такий запис означає, що для сторінки існує якийсь короткий опис яке потрібно відобразити у браузері. Якщо користувач буде шукати інформацію в Інтернеті та у видачі з'явиться ця сторінка, опис буде під посиланням на неї. Що саме – зазначено у значенні name. Атрибут content ж повідомляє, який саме це буде опис. Значень description може бути кілька, написаних на різних мовах. Опис сторінки значно впливає на ранжирування сайту в пошукових системах і допомагає в залученні користувачів. Але текст повинен бути не тільки цікавий змісту сторінки, але і привабливий для читача. Тому правильне складання description – це ціле мистецтво. Вказати, який саме мова використовується в описі, потрібно буде додатковий атрибут lang.

Особливості взаємодії атрибутів name і content

Для того щоб взаємодія атрибутів тега name і content стало зрозуміліше, розглянемо ще одне значення name – author. Використовуючи його разом з content, можна вказати автора сторінки. Приклад: . Ще одним важливим значенням атрибута name тега HTML є keywords, або ключові слова. Вони перераховуються через кому потрібні для SEO-оптимізації сторінки. В даний час ведуться суперечки, чи так важливі ключові слова і дійсно вони впливають на ранжирування, але точну відповідь на це питання знають лише технічні фахівці, що працюють на великі пошуковики. Пересічним же фахівцям з створення і розкручування сайтів рекомендується все ж додавати цей мета-тег в .

Ключові слова та їх значення для оптимізації

Ключові слова допомагають пошуковому роботу швидко знаходити сайт і видавати його за певним запитом користувача. Без їх зазначення пошукова машина звертається до сторінки, знаходить кілька слів на неї і йде, якщо необхідна інформація не знайдена. Тому ключові слова необхідно вказувати. Важливо враховувати, що одні і ті ж слова не повинні повторюватися більше трьох разів, інакше сайт буде позначений як "спам". Загальна їх кількість – 50. Складання description і keywords – це робота людини, що займається пошуковою оптимізацією, просуванням сайтів та їх ранжування в пошукових системах. Верстальщику потрібно розуміти важливість значення цих атрибутів тега HTML для допомоги SEO-фахівця.

Значення атрибуту тега "robots"

Ще одне цікаве значення HTML name – robots. З його допомогою можна дозволити або заборонити індексацію веб-сторінки якими пошуковими машинами. Тут у значенні content можна написати index – і дозволити індексацію, або noindex – і заборонити її. Додатково через кому в значенні тега вказується також follow або nofollow, тобто "дозволити" або "заборонити перехід за посиланнями з веб-сторінки". Можна забороняти індексацію, при цьому дозволяючи переходи, і навпаки. Ще один варіант дозволити все – додати атрибут content значення all. Для того щоб заборонити все, потрібно написати none.

Атрибут http-equiv

Важливий атрибут тега HTML – http-equiv. Він використовується аналогічно з атрибутом name charset, який задає кодування сторінки. Для цього http-equiv потрібно задати значення content-type, а в атрибуті content вказати тип документа й кодування, яке потрібно використовувати. Наприклад: . Якщо розібрати цю запис більш детально, то стане зрозуміло, що атрибут http-equiv вказує браузеру на те, як і на підставі яких даних обробити сторінку.
У цього атрибута можуть бути й інші значення: expires – використовується для установки дати і часу, після якої контент буде вважатися застарілим; pragma – вказує спосіб кешування сторінки; refresh – вказує, що потрібно відобразити інший документ у браузері. Значенням content type указується, що буде оброблятися якась частина контенту, тобто змісту веб-сторінки. За допомогою атрибута content браузер розуміє, що потрібно обробити саме текст нашого html-документа. Далі у запису розташовується знайомий атрибут для опису кодування сторінки, де повідомляється, якою саме вона буде.

Інші можливості http-equiv

Але атрибут http-equiv можна використовувати ще одним цікавим чином: при використанні значення refresh браузер буде оновлювати сторінку через якийсь певний проміжок часу. Наприклад, можна вказати "5 секунд" атрибута content. Тоді вміст документа буде оновлюватися і бути змінена, якщо воно не статичний. Для перевірки працездатності цього варіанту використання http-equiv додається можливість переходу на іншу веб-сторінку. Для того щоб це зробити, в значенні атрибута content після таймера, в якому вказується проміжок часу для оновлення, додається адресу іншої сторінки. Тоді, після оновлення сторінки, через 5 секунд буде здійснений перехід на іншу адресу, і відкриється зазначена в атрибуті посилання.

Атрибут viewport

Слово viewport можна перевести як "вікно перегляду". Цей атрибут використовується, щоб мобільні пристрої правильно відображали контент сторінки. З цього тега починається адаптивний дизайн. Він допомагає масштабувати, змінювати текст і зображення на сайті, в залежності від положення екрана. Без цього тега шрифти не будуть збільшуватися до потрібного розміру, і користувач просто не зможе прочитати, що написано на сторінці. Атрибут viewport задає певну ширину вікна, у яке потрібно додати сайт. Для кожного браузера вона буде різною. Приклад того, як може виглядати мета-тег з цим атрибутом: . Ми розглянули основні мета-теги, які можна використовувати при створенні документа на мові HTML, але їх набагато більше. Ознайомитися з іншими тегами та їх можливими атрибутами можна в специфікації HTML5.1.