Необхідні мета-теги в HTML
Що таке Мета Теги?
Мета теги (<meta>) — це теги, розміщені всередині <head>, які не відображаються на сторінці, але надають інформацію про сторінку браузерам, пошуковим системам та соціальним мережам.
Основні Мета Теги
Кодування Сторінки
html
<meta charset="UTF-8" />- Обов'язковий тег — задає кодування документа.
- Без нього можуть виникнути проблеми з рендерингм символів.
Адаптивна Розмітка (viewport)
html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />- Робить сторінку адаптивною на мобільних пристроях.
- Без нього сайт виглядатиме "сжатим".
SEO Теги
html
<meta name="description" content="Короткий опис сторінки для пошукових систем" />
<meta name="keywords" content="html, метатеги, фронтенд, seo" />
<meta name="robots" content="index, follow" />- description — короткий опис для пошукових систем
- keywords — ключові слова (рідко використовуються в сучасних пошукових системах)
- robots — поведінка ботів:
index,noindex,follow,nofollow
Автор та Мова
html
<meta name="author" content="IT Lead" />
<meta http-equiv="Content-Language" content="en" />Open Graph (OG) — для Соціальних Мереж
html
<meta property="og:title" content="Назва Сторінки" />
<meta property="og:description" content="Опис Сторінки" />
<meta property="og:image" content="https://site.com/image.png" />
<meta property="og:url" content="https://site.com" />Використовується соціальними мережами (Facebook, LinkedIn) для рендеринг попереднього перегляду сторінки.
Twitter Card
html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Назва" />
<meta name="twitter:description" content="Опис" />
<meta name="twitter:image" content="https://site.com/image.png" />Важливо:
Не зловживайте keywords — сучасні пошукові системи ігнорують їх. Але description та OG теги все ще відіграють роль у SEO та соціальних мережах.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.