Тег <meta> в HTML розташовуються всередині тега <head> і дуже важливі для ранжирування веб-сторінки в пошукових системах. У документі їх може бути кілька. Назва цього тега походить від грецького слова, що позначає фразу “разом з чим-небудь” або “після чого-небудь, потім”. Мета-теги зберігають службову інформацію про даних, не призначених для відвідувачів сторінки. Ці дані використовуються пошуковими роботами для пошуку і відображення сайтів по визначеним запитам користувачів. Вони також впливають на оптимізацію сторінки і на її місце в пошуковій видачі. Наприклад, за допомогою мета-тегів можна вказати авторство, додати якийсь опис сайту, дозволити або заборонити індексування пошуковими системами або налаштувати автоматичне оновлення сторінки. Зробити це допомагають атрибути тега HTML <meta>, такі як charset, keywords і інші. Зазвичай вони записуються в парі: у першому атрибуті знаходиться ім’я, а в другому – значення.
Атрибути тегу <meta>
Мета-теги з різними атрибутами розташовуються всередині тега <head>. Їх може бути декілька, і кожен буде відповідати за якийсь свій власний функціонал. Існує кілька основних атрибутів, які можуть приймати різні значення. Вони використовуються, щоб повідомити браузеру і пошуковим системам певну інформацію про сторінку.
Основні атрибути тегу HTML <meta> <head>:
- 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 <meta> content (опис) буде зберігати значення атрибута name (ім’я). Наприклад: <meta name=”description” content=”опис сторінки”>. Такий запис означає, що для сторінки існує якийсь короткий опис, який потрібно відобразити у браузері. Якщо користувач буде шукати інформацію в Інтернеті та у видачі з’явиться ця сторінка, опис буде під посиланням на неї. Що саме – зазначено у значенні name. Атрибут content ж повідомляє, який саме це буде опис. Значень description може бути кілька, написаних на різних мовах. Опис сторінки значно впливає на ранжирування сайту в пошукових системах і допомагає в залученні користувачів. Але текст повинен бути не тільки цікавий змісту сторінки, але і привабливий для читача. Тому правильне складання description – це ціле мистецтво. Вказати, який саме мова використовується в описі, потрібно буде додатковий атрибут lang.
Особливості взаємодії атрибутів name і content
Для того щоб взаємодія атрибутів тега <meta> name і content стало зрозуміліше, розглянемо ще одне значення name – author. Використовуючи його разом з content, можна вказати автора сторінки. Приклад: <meta name=”author” content=”ім’я автора”>. Ще одним важливим значенням атрибута name тега HTML <meta> є keywords, або ключові слова. Вони перераховуються через кому потрібні для SEO-оптимізації сторінки. В даний час ведуться суперечки, чи так важливі ключові слова і дійсно вони впливають на ранжирування, але точну відповідь на це питання знають лише технічні фахівці, що працюють на великі пошуковики. Пересічним же фахівців по створенню і просуванню сайтів рекомендується все ж додавати цей мета-тег <head>.
Ключові слова та їх значення для оптимізації
Ключові слова допомагають пошуковому роботу швидко знаходити сайт і видавати його за певним запитом користувача. Без їх зазначення пошукова машина звертається до сторінки, знаходить кілька слів на неї і йде, якщо необхідна інформація не знайдена. Тому ключові слова необхідно вказувати. Важливо враховувати, що одні і ті ж слова не повинні повторюватися більше трьох разів, інакше сайт буде позначений як “спам”. Загальна їх кількість – 50. Складання description і keywords – це робота людини, що займається пошуковою оптимізацією, просуванням сайтів та їх ранжування в пошукових системах. Верстальщику потрібно розуміти важливість значення цих атрибутів тега HTML <meta> для допомоги SEO-фахівця.
Значення атрибуту тегу <meta> “robots”
Ще одне цікаве значення HTML<meta> name – robots. З його допомогою можна дозволити або заборонити індексацію веб-сторінки якими пошуковими машинами. Тут у значенні content можна написати index – і дозволити індексацію, або noindex – і заборонити її. Додатково через кому в значенні тега вказується також follow або nofollow, тобто “дозволити” або “заборонити перехід за посиланнями з веб-сторінки”. Можна забороняти індексацію, при цьому дозволяючи переходи, і навпаки. Ще один варіант дозволити все – додати атрибут content значення all. Для того щоб заборонити все, потрібно написати none.
Атрибут http-equiv
Важливий атрибут тега HTML <meta> – < meta http-equiv. Він використовується аналогічно з атрибутом name charset, який задає кодування сторінки. Для цього http-equiv потрібно задати значення content-type, а в атрибуті content вказати тип документа й кодування, яке потрібно використовувати. Наприклад: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>. Якщо розібрати цю запис більш детально, то стане зрозуміло, що атрибут http-equiv вказує браузеру на те, як і на підставі яких даних обробити сторінку.
У цього атрибута можуть бути й інші значення:
- expires – використовується для установки дати і часу, після якої контент буде вважатися застарілим;
- pragma – вказує спосіб кешування сторінки;
- refresh – вказує, що потрібно відобразити інший документ у браузері.
Значенням content type указується, що буде оброблятися якась частина контенту, тобто змісту веб-сторінки. За допомогою атрибута content браузер розуміє, що потрібно обробити саме текст нашого html-документа. Далі у запису розташовується знайомий атрибут для опису кодування сторінки, де повідомляється, якою саме вона буде.
Інші можливості http-equiv
Але атрибут http-equiv можна використовувати ще одним цікавим чином: при використанні значення refresh браузер буде оновлювати сторінку через якийсь певний проміжок часу. Наприклад, можна вказати “5 секунд” атрибута content. Тоді вміст документа буде оновлюватися і бути змінена, якщо воно не статичний. Для перевірки працездатності цього варіанту використання http-equiv додається можливість переходу на іншу веб-сторінку. Для того щоб це зробити, в значенні атрибута content після таймера, в якому вказується проміжок часу для оновлення, додається адресу іншої сторінки. Тоді, після оновлення сторінки, через 5 секунд буде здійснений перехід на іншу адресу, і відкриється зазначена в атрибуті посилання.
Атрибут viewport
Слово viewport можна перевести як “вікно перегляду”. Цей атрибут використовується, щоб мобільні пристрої правильно відображали контент сторінки. З цього тега починається адаптивний дизайн. Він допомагає масштабувати, змінювати текст і зображення на сайті, в залежності від положення екрана. Без цього тега шрифти не будуть збільшуватися до потрібного розміру, і користувач просто не зможе прочитати, що написано на сторінці. Атрибут viewport задає певну ширину вікна, у яке потрібно додати сайт. Для кожного браузера вона буде різною. Приклад того, як може виглядати мета-тег з цим атрибутом: <meta name=”viewport” content=”width=device-width, maximum-scale=1.0, minimum-scale=1.0″>.
Ми розглянули основні мета-теги, які можна використовувати при створенні документа на мові HTML, але їх набагато більше. Ознайомитися з іншими тегами та їх можливими атрибутами можна в специфікації HTML5.1.
