Розглядаючи HTML-код різних веб-сайтів, виникає питання: навіщо так багато метатегів і на що вони потрібні? У даній статті ми представляємо всі найпоширеніші теги з прикладами та поясненнями.
Title
<title>...</title>Description
Короткий опис сторінки довжиною 160-180 символів, застосовується для відображення у результатах пошуку.
<meta name="description" content="...">Keywords
Містить ключові слова, які зустрічаються на сторінці. Обмеження: не більше 20 слів та 3 повтори.
<meta name="keywords" content="...">- Google – не використовує.
- Яндекс – під питанням (але нам це і не актуально😁).
Кодування сайту
<meta http-equiv="content-type" content="text/html; charset=utf-8">На HTML5 цей тег скоротили ось до такого вигляду:
<meta charset="utf-8">Application-Name
Назва веб-програми. Можна вказати кілька назв різних мовних локалей.
<meta name="application-name" content="Мій додаток">
<meta name="application-name" lang="en" content="My application">
<meta name="application-name" lang="fr" content="Mon application">- У Android, ця функція використовується при додаванні сайту на головний екран.
- У Windows 8 та 10, цей функціонал дозволяє додавати сайт до панелі програм і як плитку у меню “Пуск”.
Generator
Розповідає пошуковій системи і не лише їй – яким додатком був згенерований цей код
<meta name="generator" content="...">Author
Інформація про автора сайту
<meta name="author" content="...">Copyright
Інформація про власника сайту
<meta name="copyright" content="...">Reply-To
Вказує на те, як звязатись з автором даної сторінки
<meta name="reply-to" content="mail@example.com">Content-Language
Вказує мову сторінки, дуже активно використовується пошуковими системами при пошуку, так як допомає зрозуміти на якій мові дана сторінка.
<meta http-equiv="content-language" content="ru">Help
Дозволяє предоставити посилання на довідку, чи електронну пошту.
<link rel="help" href="mailto:help@example.com">Управління індексацією
Robots
Задає правила індексації для пошукових роботів.
<meta name="robots" content="index, follow">Загальні значення:
index, follow или all | Дозволено індексувати текст та посилання на сторінці |
noindex | Не індексувати сторінку |
nofollow | Не переходити по посиланням на сторінках |
noindex, nofollow или none | Заборонено індексувати сторінки та переходити по посиланням |
noarchive | Не показувати зебережену копію сайту у пошуковій системі. |
Яндекс
noyaca | Не використовувати опис з Яндекс.Каталогу для сніпету в пошукових системах (нам це і не потрібно в цілому) |
nosnippet | Забороняє показувати відео або фрагмент тексту у результатах пошуку |
noimageindex | Забороняє вказувати сторінку як джерело посилання для зображення |
noodp | Не використовувати опис з каталогу DMOZ |
Last-Modified
Як альтернативу, дата останньої модифікації статичних сторінок може бути вказана через HTTP-заголовок Last-Modified.
<meta http-equiv="last-modified" content="2017-12-31@08:04:23 +00:00">Document-State
Цей елемент визначає, як часто пошукові роботи будуть індексувати контент на сторінці, впливаючи на частоту оновлення інформації в пошукових системах.
<meta name="document-state" content="dynamic">static | Індексувати лише один раз |
dynamic | Регулярно індексувати сторінку |
Revisit-After
Цей елемент вказує на регулярність оновлення інформації на веб-сайті та частоту, з якою пошукова система повинна проходити по ньому для оновлення даних. Це важливий аспект для забезпечення актуальності та видимості контенту у пошукових результатах.
<meta name="revisit-after" content="5 days">Управління кешуванням
Cache-Control
Цей елемент визначає, як браузер повинен кешувати сторінку. Це важливий аспект для оптимізації швидкості завантаження веб-сторінок та зменшення навантаження на сервери, так як кешування допомагає зберігати копії сторінок на боці клієнта для швидшого доступу.
<meta http-equiv="cache-control" content="no-cache">Допустимые значения:
public | Кешується все |
private | Кешується браузером, але не proxy-сервером |
no-cache | Забороняє кешування |
max-age=0 | Скільки секунд зберігати у кеші |
Pragma
Вимикає кешування.
<meta http-equiv="pragma" content="no-cache">Expires
Цей параметр вказує на дату, коли закінчується кешування у браузері. Якщо вказати минулу дату або 0, то сторінка не буде кешуватись, що дозволяє забезпечити завжди актуальний контент та уникнути застарілого вмісту для користувачів.
<meta http-equiv="expires" content="0">Canonical – віддана канонічна адреса
Якщо на сторінці є ідентичний вміст за різними URL-адресами, так званий дублікат контенту, це може вплинути на індексацію і рейтинг вашого сайту пошуковими системами. Такі ситуації можуть призвести до збитків у видимості та розташуванні сторінок у пошукових результатах. Для уникнення цього, слід використовувати вказівку rel=”canonical”, яка допоможе визначити основну версію сторінки та уникнути проблем з дублікацією контенту. Приклади
https://example.com/category/jqueryhttps://example.com/category/jquery?sort=desc
У вказівці rel=”canonical” вказується URL-адреса, яка буде вважатися основною і використовуватиметься у пошуковому висновку. Це сприяє уникненню дублікації вмісту та допомагає покращити показники сторінки у пошукових системах, надаючи перевагу основному варіанту контенту.
<link rel="canonical" href="https://example.com/jquery">Prev
Цей елемент вказує URL попередньої сторінки під час пагінації.
<link rel="prev" href="https://example.com/jquery">Next
Ця вказівка вказує URL наступної сторінки під час пагінації.
<link rel="next" href="https://example.com/jquery?page=3">Rel Alternate
Атрибут «Hreflang»
Даний атрибут слугує для вказівки посилань на різні мовні версії веб-сайту. Код мови вказується у форматі ISO 639-1. Це допомагає забезпечити кращу навігацію та зрозумілість вмісту для користувачів різних мовних груп.
<link rel="alternate" hreflang="uk" href="https://ua.example.com/">Або код мови та регіону, регіон вказується у форматі ISO 3166-1 Alpha 2:
<link rel="alternate" hreflang="uk-UA" href="http://ua-ua.example.com/">Значення x-default говорить про те, що сторінка головна і не відповідає будь-якій мові або регіону.
<link rel="alternate" hreflang="x-default" href="http://example.com/">Атрибут «Media»
Значення “handheld” або “only screen and (max-width: 640px)” вказують на URL мобільної версії. Це дозволяє забезпечити відповідний вигляд та функціональність сайту для користувачів на пристроях з обмеженим розміром екрану, таких як мобільні пристрої.
<link rel="alternate" media="handheld" href="http://m.example.com/">
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">Атрибут «Type»
application/rss+xml – посилання на RSS канал.
<link rel="alternate" type="application/rss+xml" href="http://example.com/rss">application/atom+xml – це формат фіда у стилі Atom для подачі контенту.
<link rel="alternate" type="application/atom+xml" href="http://example.com/atom">Google-Site-Verification
Підтвердження прав користувача сервісів Google.
<meta name="google-site-verification" content="...">Google-Play-App
Подібно apple-itunes-app виводить банер програми в Андроїд.
<meta name="google-play-app" content="app-id=uk.назва_додатку">Значення «Notranslate»
Якщо сторінка написана мовою, яка не відповідає користувачеві, Google додає посилання для перекладу на потрібну мову. Атрибут notranslate вимикає цю функцію.
<meta name="google" value="notranslate">Значення «Nositelinkssearchbox»
Іноді у результатах пошуку Google поряд з посиланнями на сайт з’являється вікно пошуку на сайті. За допомогою цього мета-тега можна вимкнути відображення цього поля. Така дія дозволяє контролювати вигляд і зміст пошукових результатів для користувачів.
<meta name="google" content="nositelinkssearchbox"> Chrome-Webstore-Item
Додавання посилання до Інтернет-магазину Chrome.
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/xxxxxxxxxxxxx">Різне
Search
Цей атрибут вказує на XML-файл OpenSearch, який дозволяє здійснювати пошук на веб-сайті без необхідності заходити на нього у браузері. Це зручна можливість для користувачів здійснювати пошук та знаходити інформацію на сайті, не покидаючи сторінку браузера.
Подробнее о формате на http://opensearch.org.
<link rel="search" type="application/opensearchdescription+xml" title="Пошук на example.com" href="http://example.com/opensearch.xml">Referrer
Цей елемент встановлює HTTP-заголовок “Referer”, який буде відправлено на сервер під час переходу за посиланнями. Це допомагає серверам відстежувати вихідні джерела трафіку та аналізувати, звідки прийшов користувач на сторінку.
<meta name="referrer" content="origin">none | Ніколи не передає заголовок |
none-when-downgrade | Заголовок надсилається тільки якщо використовується HTTPS |
origin | Передає дані про хостів та піддоменів |
unsafe-url | Передає повний URL |
Refresh
Встановлює затримку в секундах, після чого браузер оновить сторінку. Ця можливість дозволяє автоматично оновлювати контент сторінки через певний інтервал часу після завантаження, що може бути корисним для показу актуальної інформації або оновлень на веб-сайті.
<meta http-equiv="refresh" content="10">Крім того, можна вказати іншу веб-адресу, на яку браузер перейде після затримки. Ця можливість дозволяє автоматично перенаправляти користувача на іншу сторінку після певного часу, що може бути використано для навігації до іншого контенту або обраних ресурсів.
<meta http-equiv="refresh" content="10; URL=http://www.name.com/">Skype Toolbar
Мета-тег “skype_toolbar” вимикає розширення Skype на сторінці (лише для старих версій). Це дозволяє контролювати наявність розширення Skype на сторінці та впливати на його функціональність.
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">CSRF
Цей факт підтверджує, що на веб-сайті впроваджено захист від атак типу CSRF.
<meta name="csrf-token" content="gZoOqHdVwfq2QpfkwH6lQE75ivykrHdOS0rVfhiX"><meta name="csrf-param" content="authenticity_token">Посилання на Telegram канал
<meta name="telegram:channel" content="@telegram">Тег Base
Цей атрибут вказує браузеру, як опрацьовувати відносні URL у посиланнях та src зображень щодо поточної адреси сторінки.
На прикладі, браузер запитає зображення за адресою:
http://site.ru/category/images/logo.png
<head>
<base href="http://example.com/category/">
</head>
<body>
<img src="images/logo.png">
</body>В цілому на цьому все, якщо у вас є якісь запитання чи додаткові теги на розбір, пишіть в коментарях, додам до даного списку з повноцінним описом – зробимо цей пост максимально корисним для нашої Україномовної комьюніті.