Метки META для повышения SEO и рейтинга страницы

Мета-теги — это фрагменты текста, которые описывают содержание страницы. С протоколом Open Graph Protocol мета-теги стали стероидами, каждый раз, когда кто-то делится ссылками в Twitter или Whatsapp, мы видим миниатюру сайта, gif с описанием, вот что протокол Open Graph Protocol делает с мета-тегами.

Метатеги — это теги в HTML-коде вашего сайта, которые описывают различные компоненты вашего сайта для поисковых систем. Эти теги позволяют поисковым алгоритмам Bing или Google читать описание состава вашего сайта.

Протокол Open Graph позволяет любой веб-странице стать богатым объектом в социальном графе. Например, он используется в Facebook, чтобы позволить любой веб-странице иметь ту же функциональность, что и любой другой объект в Facebook.

Обычные теги 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/

Оцените статью
devanswers.ru
Добавить комментарий