111 0  

meta

Элемент HTML <meta> - служит для передачи служебной информации поисковикам, соцсетям и представляет метаданные, которые не могут быть представлены другими элементами, связанными с мета-HTML, такими как <base>, <link>, <script>, <style> или <title>.

fellow Стандартные meta

sadДля соцсетей meta

bullyДля бизнеса meta

winkedДля роботов meta

wassatДля управления маштабом meta


Отдельной категорией следует расматривать мета теги для предзагрузки.

  • charset  - Задаёт кодировку документа. 
  • content - Устанавливает значение атрибута, заданного с помощью name или http-equiv.
  • http-equiv - Предназначен для конвертирования метатега в заголовок HTTP.
  • name - Имя метатега, также косвенно устанавливает его предназначение.
  • property - в эго значениях содержится инструкция для соцсетей и называется она Протокол Open Graph


lol Не обращайте внимание на то что в квадратных скобках []  и фигурных  {}! - это для пользователей движка DLE.

Стандартные мета описания:

<meta charset="utf-8">
<base href="https://layout.rullan.in.ua/">
[not-available=showfull]<meta property="og:type" content="website" />[/not-available][available=showfull]<meta property="og:type" content="article" />[/available] 
<meta name="viewport" content=" initial-scale=1.0, width=device-width" /> 
<!--  описание сайта -->
<meta property="og:site_name" content="конструктор шаблонов darya для dle" />
<meta name='copyright' content='dle конструктор-шаблон darya - rullan © 2018' />
<meta name='development' content='website created rullan.in.ua' />
<meta http-equiv="reply-to" content="gamessutra@gmail.com"/>
<meta name="geo.position" content="48.686661;26.586963" />
<meta name="geo.placename" content="кам'янець-подільський, хмельницька область, україна" />
<meta name="geo.region" content="ua-хмельницька область" />
<meta name="icbm" content="48.686843, 26.586933" />
<!-- / описание сайта -->
<link rel="icon" type="image/png" sizes="32x32" href="/templates/darya2/images/ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/templates/darya2/images/ico/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="144x144" href="/templates/darya2/images/ico/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="180x180" href="/templates/darya2/images/ico/apple-touch-icon.png">
<link rel="manifest" href="/templates/darya2/images/ico/manifest.json">
<link rel="mask-icon" href="/templates/darya2/images/ico/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="format-detection" content="telephone=no"/><meta name="format-detection" content="address=no"/>
[aviable=main]<meta name="revisit-after" content="1 days" />[/aviable][aviable=cat]<meta name="revisit-after" content="4 days" />[/aviable][aviable=showfull]<meta name="revisit-after" content="11 days" />[/aviable]

Выполняем предзагрузку внешних ресурсов:

am боле подробно об этом

<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//connect.facebook.net">
<link rel="dns-prefetch" href="//securepubads.g.doubleclick.net">
<link rel="preconnect" href="//securepubads.g.doubleclick.net">
<link rel="dns-prefetch" href="//cm.g.doubleclick.net">
<link rel="preconnect" href="//cm.g.doubleclick.net">
<link rel="dns-prefetch" href="//counter.yadro.ru">
<link rel="dns-prefetch" href="//certify.alexametrics.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">

Метатеги для Соцсетей:

[available=cat][page-count=1]
<meta property="og:image:width" content="1140">
<meta property="og:image:height" content="420">
<meta property="og:title" content="{category-title}">
<meta property="og:description" content="{category-description}">
<link rel="image_src" type="image/png" href="https://rullan.in.ua/uploads/cat/{category-id}.jpg">
<meta property="og:image" content="https://rullan.in.ua/uploads/cat/{category-id}.jpg">
<meta name="twitter:image:src" content="https://rullan.in.ua/uploads/cat/{category-id}.jpg"/>
<meta name="twitter:card" content="summary_large_image">  <!-- тип окна -->
<meta name="twitter:site" content="Создание сайтов"/>
<meta name="twitter:creator" content="https://twitter.com/rullan.in.ua"/>
<meta name="twitter:title" content="{category-title}">
<meta name="twitter:description" content="{category-description}"/>
[/page-count][/available]
[available=main][page-count=1]
<meta property="og:image:width" content="1140">
<meta property="og:image:height" content="420">
<meta property="og:title" content="{category-title}">
<meta property="og:description" content="{category-description}">
<meta property="og:image" content="https://rullan.in.ua/images/rullan.jpg">
<meta name="twitter:image:src" content="https://rullan.in.ua/images/rullan2.jpg"/>
<meta name="twitter:card" content="summary_large_image">  <!-- тип окна -->
<meta name="twitter:site" content="Создание сайтов"/>
<meta name="twitter:creator" content="https://twitter.com/rullan.in.ua"/>
<meta name="twitter:title" content="{category-title}">
<meta name="twitter:description" content="{category-description}"/>
[/page-count][/available]

Метатеги для Бизнеса:

<meta property="place:location:latitude" content="49.5512647"/>
<meta property="place:location:longitude" content="25.5934695"/>
<meta property="business:contact_dаta:street_address" content="Небесної сотні, 27"/>
<meta property="business:contact_dаta:locality" content="Кам'янець-подільський"/>
<meta property="business:contact_dаta:postal_code" content="46001"/>
<meta property="business:contact_dаta:country_name" content="Україна"/>
<meta property="business:contact_dаta:email" content="gamessutra@gmail.com"/>
<meta property="business:contact_dаta:phone_number" content="+380974791218"/>
<meta property="business:contact_dаta:website" content="https://rullan.in.ua/"/>

Мета для роботов:

<meta name="googlebot" content="noindex">


all Нет ограничений на индексирование и показ контента. Эта директива используется по умолчанию и не влияет на работу поисковых роботов, если нет других указаний.
noindex Не показывать эту страницу, а также ссылку "Сохраненная копия" в результатах поиска.
nofollow Не выполнять переход по ссылкам на этой странице.
none Аналогично метатегам noindex, nofollow.
noarchive Не показывать ссылку "Сохраненная копия" в результатах поиска.
nosnippet Не показывать фрагмент текста этой веб-страницы в результатах поиска. При этом уменьшенное статическое изображение (если оно есть) останется видимым.
notranslate Не предлагать в результатах поиска перевод этой страницы.
noimageindex Не индексировать изображения на этой странице.
unavailable_after: [RFC-850 date/time] Не отображать эту страницу в результатах поиска после указанного времени/даты. Время/дату следует указать в формате RFC 850.


Мета тег для управления маштабом:

Если у Вас адаптивный сайт то должен стоять:

<meta name="viewport" content="width=device-width, initial-scale=1">

Первый параметр (width=device-width) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройства.

Второй параметр initial-scale - устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.


  • minimal-scale - задаёт минимальный масштаб;
  • maximal-scale - устанавливает максимальный масштаб;
  • user-scalable - указывает, может ли пользователь управлять масштабом или нет. (Имеет 2 значения yes и no )
    <!-- viewport, без возможности его увеличения пользователем -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- viewport, c возможностью его увеличения пользователем -->
    <meta name="viewport" content="width=device-width, user-scalable=yes">

    <!-- viewport, имеющий ширину 1024 пикселя -->
    <!-- Веб-страница, с фиксированным макетом (например, с шириной 1024px или меньше) будет изначально отображаться на экране мобильного просмотра без прокрутки -->
    <meta name="viewport" content="width=1024">


Если у Ва сайт не адаптивный нужно добавить:

<meta name="viewport" content="width=device-width">

И тогда он на смартфоне будет отображатся как на большом мониторе....

 


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019