Основная функция мета тегов на сайте — продвижение в поисковой выдачи. Теги также используются для публикации ссылок сайта в соц.сетях, за счёт мета тегов ссылка при публикации превращается в блок представления о сайте и картинкой.
Основными мета тегами являются:
title — название страницы\сайта
description — описание страницы\сайта
keywords — ключевые слова.
Именно по этим тегам поисковые боты понимают о чём Ваш сайт и как правильно его индексировать.
Мета теги прописываются в странице сайта между тегами <head></head> и имеют следующий вид:
<title>Название сайта\страницы </title> <meta name="description" content="Описание Вашей замечательной страницы сайта не должно превышать 160 символов"> <meta name="keywords" content="релевантные слова, не превышает 255 символов, спам повторными словами будет игнорироваться" />
Важно отметить, существуют оригинальные теги популярных соц.сетей Facebook и Twitter, которые при публикации ссылок вашего сайта превращают ссылку в карточку.
Пример мета тегов для Facebook:
<meta property="og:title" content="Название сайта\страницы" /> <meta property="og:description" content="Описание Вашей замечательной страницы сайта не должно превышать 160 символов" /> <meta property="og:url" content="https://example.com" /> <meta property="og:site_name" content="example.com"> <meta property="og:image" content="https://example.com/metalogo.jpg" /> <meta property="og:article:author" content="example.com"> <meta property="og:locale" content="ru_Ru">
Пример мета тегов для Twitter:
<meta name="twitter:site" content="@АККАУНТ САЙТА" /> <meta property="og:description" content="Описание Вашей замечательной страницы сайта не должно превышать 160 символов" /> <meta name="twitter:creator" content="@АККАУНТ АВТОРА\САЙТА" /> <meta name="twitter:title" content="Название сайта\страницы" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/metalogo.jpg"> <meta name="twitter:url" content="https://example.com">
В тегах » og:image » и » twitter:image » — указывается картинка, которая будет отображаться при публикации в одной из соц.сетей. Картинка должна быть указана исключительно полноценной ссылкой, нельзя прописывать относительные ссылки, так как робот их не принимает.
Пример НЕПРАВИЛЬНОЙ ссылки:
<meta name="twitter:image" content="/images/metalogo.jpg"> <meta property="og:image" content="/images/metalogo.jpg" />
Пример ПРАВИЛЬНОЙ ссылки:
<meta name="twitter:image" content="https://example.com/metalogo.jpg"> <meta property="og:image" content="https://example.com/metalogo.jpg" />
Если вы изменили мета теги — очистить кэш расшариваемых страниц можно по ссылкам:
Facebook . Отладчик репостов: https://developers.facebook.com/tools/debug/
Twitter . Card validator: https://cards-dev.twitter.com/validator
ВКонтакте . pages.clearCache: https://vk.com/dev/pages.clearCache
Telegram . Webpage Bot: https://telegram.me/webpagebot
