Коллекция полезных фрагментов мета-тегов

Автор:
Nurlan Kemelbekov

Эта коллекция фрагментов состоит из весьма полезных мета-тегов, которые вы можете рассмотреть при осуществлении в ваших проектах на WordPress.

Мета-теги являются одними из первых тегов, которые видят браузеры на нашем сайте. Они предоставляют широкий спектр функциональных возможностей, от определения наборов символов и описания до Open Graph данных для социальных медиа. Это набор из наиболее полезных тегов фрагментов мета-тегов, а также информация о том, как, когда и почему нужно их реализовать.

Кодировка мета-тег является весьма полезным и важным,так как это указывает кодировку страницы. В старых версиях HTML, кодировка была определена в более длинном теге, но они считаются устаревшими в документах HTML5. В большинстве случаев можно будет включать мета-тег вроде этого:

<meta charset="UTF-8">

Этот мета-тег должен находиться внутри head HTML документа, и в течение первых 512 байт страницы.

Этот мета-тег представляет нам несколько вариантов для получения ценной информации в документе. Эти биты информации сообщают браузеру, что наша страница о себе, кто автор, и другие биты информации. Давайте взглянем на некоторые важные из них:

Description

Description описывает документ. Это полезно для роботов, чтобы получить информацию о содержании документа, и он действует как маленький фрагмент, который показывается под названием в результатах поисковой системы. Вот как это выглядит:

<meta name="description" content="Описание страницы здесь...">

Author

Поисковые системы должны знать кто является автором документа. Вот как это может выглядеть:

<meta name="author" content="Nur Kem">

Robots

Декларация robots определяет поведение, что сканеры должны знать при индексации страницы. Вот пример, который будет наставлять поисковиков не индексировать страницу (если они желают следовать):

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

Viewport

Декларация Viewport, вероятно, один из наиболее важных тегов, который вы будете использовать сейчас, особенно учитывая, что мы находимся в период отзывчивого дизайна. У нас есть множество вариантов, чтобы выбрать из при использовании этой декларации, что позволит нам установить ширину, высоту и способность масштабирования.

Возможные варианты: width, height, initial-scale, minimal scale, и user-scalable. Для вариантов width и height, мы можем указать либо положительное целое число в пикселях, device width или device-height. Для масштабных вариантов мы можем указать положительное число от 0,0 до 10,0. Пользовательский масштабируемый – логическое значение “yes” или “no”.

Использование этой декларации откроет страницу при ширине 320px и высотой 480px:

<meta name="viewport" content="width=320,height=480">

Этот пример заставит окно браузера открыть по ширине устройства, и отключить пользовательское масштабирование:

<meta name=”viewport” content=”width=device-width,user-scalable=no”>

И по большей части, если вы имеет в производстве отзывчивые веб-проекты, Вы можете использовать это заявление:

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

Это устанавливает начальный вид на шкале 1,0 и ширину в ширину устройства пользователя, который должен быть желаемой отправной точкой, если ваш сайт / приложение полностью адаптирован. Он также позволяет пользователям масштабировать вверх и вниз по желанию, что рекомендуется в целях доступности / юзабилити.

Вы, возможно, будете использовать это заявление, если хотите реализовать обновления страницы после определенного количества времени. Некоторые из его параметров являются устаревшими, так что я бы держался подальше от них. Вот как мы можем использовать эту декларацию для реализации обновления страницы каждые 10 секунд:

<meta http-equiv="refresh" content="10">

Если бы мы хотели перенаправить страницу через 10 секунд, мы объявили его как:

<meta http-equiv="refresh" content="10;url=http://redirect-url.com">

Open Graph мета-теги

Вы не найдете коллекцию Open Graph (OG) мета-теги и их значения на любом из сайтов для HTML. Тем не менее, теги OG имеют весьма функциональное назначение, когда дело доходит до социальных связей и обмена медиа. Эти теги покажут различные социальные медиа-каналы, какие данные тянуть и т.д. Эти данные включают в name, описание (description), изображение (image), backup image, и автора страницы (author). Если вы блоггер и толкаете свои статьи в социальных медиа каналы, настоятельно рекомендуется реализовать эти теги. Определим тег OG вроде этого:

<meta property="og:_____" content="...">

Вот основные параметры, которые рекомендуются для реализации его на страницу:

<meta property="og:title" content="Название страницы">
<meta property="og:site_name" content="Имя сайта">
<meta property="og:url" content="http://pageurl.com">
<meta property="og:image" content="http://pageurl.com/images/fallback.jpg">
<meta property="og:image" content="http://pageurl.com/images/page-image.jpg">

Перейдите В мета-теги Open Graph и вы можете найти более подробную информацию о Open Graph Protocol для сайта. Если ваш блог на платформе WordPress, это весьма вероятно, что есть плагин для решения автоматической реализации OG тегов и данных.

Статьи по теме: Мета описание веб-страницы сайта без плагина 

Это очевидно, что мета-теги служат большой и важной цели в наших проектах. Необходимо иметь хорошее представление о них и знать, что включать и где. Эти мета-теги, как правило, очень важны и полезны для получения дополнительной информации. Я надеюсь, вам понравилась эта коллекция фрагментов мета-тегов и нашли полезным! Спасибо за чтение.

Коллекция полезных фрагментов мета-тегов обновлено: Август 26, 2014 автором: Nur Kem


Рекомендуемый контент

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!