Мета-теги — это фрагменты текста, которые описывают содержание страницы. С протоколом Open Graph Protocol мета-теги стали стероидами, каждый раз, когда кто-то делится ссылками в Twitter или Whatsapp, мы видим миниатюру сайта, gif с описанием, вот что протокол Open Graph Protocol делает с мета-тегами.
Метатеги — это теги в HTML-коде вашего сайта, которые описывают различные компоненты вашего сайта для поисковых систем. Эти теги позволяют поисковым алгоритмам Bing или Google читать описание состава вашего сайта.
Протокол Open Graph позволяет любой веб-странице стать богатым объектом в социальном графе. Например, он используется в Facebook, чтобы позволить любой веб-странице иметь ту же функциональность, что и любой другой объект в Facebook.
Содержание
- Обычные теги META
- Прогрессивные веб-приложения
- Добавить на домашний экран
- Цвет темы
- Манифест
- Значки
- Метатеги протокола Open Graph
- Основные метаданные
- Пример мета-эскиза изображения для социального обмена
- Используйте этот сайт для создания и предварительного просмотра мета-тегов в реальном времени и тестирования.
Обычные теги META
<meta charset='utf-8'>
<!-- title -->
<title>···</title>
<meta property='og:title' content='···'>
<meta name='twitter:title' content='···'>
<!-- url -->
<link rel='canonical' href='http://···'>
<meta property='og:url' content='http://···'>
<meta name='twitter:url' content='http://···'>
<!-- description -->
<meta name='description' content='···'>
<meta property='og:description' content='···'>
<meta name='twitter:description' content='···'>
<!-- image -->
<meta property="og:image" content="http://···">
<meta name="twitter:image" content="http://···">
<!-- ua -->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<!-- viewport -->
<meta name='viewport' content='width=device-width'>
<meta name='viewport' content='width=1024'>
Прогрессивные веб-приложения
Добавить на домашний экран
<meta name='mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<!-- black | black-translucent | default -->
Цвет темы
<meta name='theme-color' content='#ff00ff'>
Только для Android. См: Цвет темы
Манифест
<link rel='manifest' href='/manifest.json'>
Только для Android. См: Манифест
Значки
<!-- Minimal -->
<link rel='icon' type='image/png' href='favicon@32.png'>
<link rel='icon' sizes='192x192' href='icon@192.png'>
<link rel='apple-touch-icon' href='icon@152.png'>
<meta name='msapplication-square310x310logo' content='icon@310.png'>
<!-- Apple -->
<link rel='apple-touch-icon' href='touch-icon-iphone.png'>
<link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'>
<link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'>
<link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'>
<!-- Microsoft -->
<meta name='msapplication-square70x70logo' content='icon_smalltile.png'>
<meta name='msapplication-square150x150logo' content='icon_mediumtile.png'>
<meta name='msapplication-wide310x150logo' content='icon_widetile.png'>
Метатеги протокола Open Graph
Основные метаданные
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/"
Пример
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Необязательные метаданные
Следующие свойства являются необязательными для любого объекта и обычно рекомендуются:
og:audio - A URL to an audio file to accompany this object.
og:description - A one to two sentence description of your object.
og:determiner - The word that appears before this object's title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).
og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
og:locale:alternate - An array of other locales this page is available in.
og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".
og:video - A URL to a video file that complements this object.
Пример
<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />
Пример мета-эскиза изображения для социального обмена
<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://aws-huddleup.s3.ap-south-1.amazonaws.com/meta-image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.yourwebsite.com/">
<meta property="twitter:title" content="Website Title">
<meta property="twitter:description" content="Website Description">
<meta property="twitter:image" content="https://aws-s3.ap-south-1.amazonaws.com/meta-image.png">
Используйте этот сайт для создания и предварительного просмотра мета-тегов в реальном времени и тестирования.
- https://metatags.io/
- https://www.seoptimer.com/meta-tag-generator
Ссылки:
- https://ogp.me/
- https://devhints.io/html-meta
- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/