Ответ
Метатеги предоставляют информацию о веб-странице и помогают поисковым системам, браузерам и соцсетям правильно интерпретировать контент. Основные:
-
<meta charset="UTF-8">— кодировка страницы. -
<meta name="viewport" content="width=device-width, initial-scale=1.0">— адаптивность для мобильных устройств. -
<meta name="description" content="Описание страницы">— краткое описание для SEO. -
<meta name="keywords" content="ключевые, слова">— устаревший, но иногда используется. -
<meta name="robots" content="index, follow">— управление индексацией. -
Open Graph (для соцсетей):
<meta property="og:title" content="Заголовок"> <meta property="og:description" content="Описание"> <meta property="og:image" content="URL изображения"> -
Twitter Cards:
<meta name="twitter:card" content="summary_large_image">
Ответ 18+ 🔞
А, ну вот, опять про эти ваши метатеги, блядь. Сидишь такой, верстаешь, всё пиздато, а потом — хуй! — страница в поиске как попало выглядит, в соцсетях ссылку вставили, а там какая-то хуйня вместо красивого превью. А всё потому, что про эти волшебные строчки в <head> забыли, ёпта!
Слушай сюда, их не так много, но каждая — как гвоздь в нужном месте. Запоминай, а то потом будешь как Герасим, только «му-му» говорить.
Первые две — святые, их забывать нельзя, иначе пиздец:
<meta charset="UTF-8">Это чтобы буквы русские не превращались в кракозябры, блядь. Без неё вместо «привет» будет «РїСЂРёРІРµС‚», и ты будешь сидеть и думать, что за хуйню ты накодил.
<meta name="viewport" content="width=device-width, initial-scale=1.0">А это, сука, чтобы на телефоне твой сайт не выглядел как микроскопическая хуйня, которую надо раздвигать пальцами. Без этой строки — всё, мобильная версия насмарку, пользователи разбегутся, как тараканы от света.
Дальше — для поисковиков, чтобы они не тупили:
<meta name="description" content="Описание страницы">Вот это, блядь, важно. Это тот текст, который под ссылкой в Гугле или Яндексе показывается. Если не написать — поисковик сам кусок текста со страницы вырвет, и может получиться такая ахинея, что волосы дыбом встанут. Пиши человеческим языком, что тут за контент.
<meta name="keywords" content="ключевые, слова">Этот, внатуре, уже почти мёртвый, как моё желание работать по понедельникам. Раньше для SEO был важен, сейчас все на него забили хуй. Но старые проекты ещё могут использовать, так что знать надо.
<meta name="robots" content="index, follow">А это команда для роботов: «индексируй эту страницу и ходи по ссылкам на ней». Если хочешь сказать «не индексируй и не ходи» — ставь noindex, nofollow. Всё просто, как три копейки.
А теперь, блядь, самое сочное — для соцсетей! Чтобы когда ты ссылку в ВК или Телеграм кидаешь, там не просто URL торчал, а красивая картинка с заголовком и описанием.
Это называется Open Graph. Подключаешь так:
<meta property="og:title" content="Заголовок для соцсетей">
<meta property="og:description" content="Описание для соцсетей">
<meta property="og:image" content="https://site.com/image.jpg">
<meta property="og:url" content="https://site.com/page.html">Без этого твоя ссылка в соцсетях будет выглядеть уныло и сиротливо, доверия ебать ноль.
И отдельно, для птички (Twitter):
<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.jpg">Вот и вся магия, блядь. Кажется, хуйня, а без них — сайт как человек без паспорта: вроде тут, а доказать, что он тот, за кого себя выдаёт, — нихуя. Так что не ленись, прописывай, и будет тебе счастье, а не «му-му».