Мета-теги в html

Содержание:

Указание кодировки документа
Мета-теги интернет-магазина
- Мета-тег keywords
- Мета-тег description
Проверка мета-тегов через сервис Вебмастер Яндекс
The Rating Meta Tag
NOFOLLOW в ссылках
Правильное использование метатега viewport
The Distribution Meta Tag
Мета теги для браузера
Суть тега
- Для чего же тогда нужен тег <noindex>?
Как составить мета теги Description
Мета-теги
Другие полезные мета-теги
§ 1. Тег «TITLE»
Для чего нужны мета теги
§ 2. Мета-тег «keywords» (ключевые слова)

Указание кодировки документа

Тег <meta> позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут charset (HTML тега <meta>) задает кодировку символов для HTML документа.

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" >  <!-- задаем кодировку документа UTF-8 -->
		<title>Пример использования тега <meta></title>
	</head>
	<body>
		<h2>Это заголовок.</h2>
		<p>Это параграф.</p>
	</body>
</html>

В данном примере мы задали кодировку документа UTF-8 с использованием элемента <meta> и атрибута charset. Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.

Стандарт HTML 5 не запрашивает конкретную кодировку, но дает рекомендацию использовать кодировку UTF-8.
Не рекомендуется использовать кодировки ASCII, CESU-8, UTF-7, BOCU-1, SCSU и UTF-32 по различным причинам.

Считается хорошей практикой, и настоятельно рекомендуется определять набор символов (кодировку), используя атрибут charset. Атрибут charset является лишь частью алгоритма определения кодировки страницы браузером. Рекомендуется указывать кодировку символов первым элементом (если используется несколько)

Обратите внимание, что для одного документа указывается только одна кодировка

В теории, любая кодировка может быть использована, но ни один браузер не понимает их все. Используя более распространенную кодировку символов, увеличивает шанс того, что браузер будет её понимать.
Полный перечень кодировок доступен на сайте iana.org.

Мета-теги интернет-магазина

Основные html теги форматирования текста

Мета-теги — специальный программный код с информацией о сайте для браузеров, поисковиков и сервисов.

В html-коде они выглядят как:

Существуют много разных мета-тегов. В данной статье нас интересуют только теги для продвижения в поисковых системах: keywords и description.

Рассмотрим их.

Мета-тег keywords

Keywords — это список ключевых слов, встречающихся на сайте. По ним пользователи находят страницы вашего сайта через поисковые системы.

В настоящее время google больше не учитывает мета-тег keywords. Яндекс использует keywords только для определения степени соответствия ключевых слов к тексту страницы.

Мета-тег description

Мета-тег description — это краткое описание страницы сайта для поисковых систем. Отображается в поисковике при поиске информации. Влияет на вероятность перехода пользователя на ваш сайт из поиска.

Проверка мета-тегов через сервис Вебмастер Яндекс

Структура html-документа

Каждый создаваемый сайт нужно добавить в панель Яндекс Вебмастера, где будут в последствие выводиться все рекомендации об устранении найденных проблем сайта.

В панели Яндекс Вебмастера есть пункт «Диагностика сайта». На странице есть пункт под названием «Ознакомиться».

При нажатии на данный пункт, вам будет выведен список ссылок страниц вашего сайта, где отсутствует мета-тег Description.

Чтобы проанализировать мета описания сайтов-конкурентов, то можно использовать известные сервисы, которые можно посмотреть в режиме онлайн.

Вот несколько таких сервисов:

Серпстат
Промопульт
Пиксельплюс

The Rating Meta Tag

Всё о мета-теге description

The rating meta tag alerts search engines that your content is intended for general audiences, or if it should bear a restricted nature of some kind.

Example Rating Meta Tag:

Since I only design family friendly websites that are intended for viewing by everyone, I specify that it is appropriate for general audiences. If however, you are marketing your information, products and/or services to kids, you should get one of the kid-safe rating tags. You should also get one if you are creating adult sites in an effort to keep the young and innocent away from adult materials.

NOFOLLOW в ссылках

Nofollow используется как значение атрибута rel в теге <a>. И отвечает за индексацию каждой конкретной ссылки на странице.
<a href=»url» rel=»nofollow»>ссылка</a>
Атрибут rel показывает отношение данного документа к документу, на который ссылается.
В данном случае, указывая атрибуту rel значение nofollow, мы просим поисковую систему не переходить по внешней ссылке, а также подчеркиваем то, что мы не отвечаем за содержание, на которое ссылаемся.
По ссылкам, оформленным с данным значением, не передается авторитет нашей страницы, другими словами не передается тИЦ и Page Rank. Однако стоит также учитывать и то, что в случае с PR вес все же уходит, но не на сайт, на который мы ссылаемся, а в никуда в прямом смысле этого слова. По поводу тИЦ точной информации о том, уходит вес или остается на сайте — нет.
Остановимся подробнее на распределении и передаче веса в Google.

Итак, абсолютно не важно, сколько ссылок у вас имеют атрибут rel=»nofollow», а сколько без него. Если на странице стоит 10 ссылок, то каждая ссылка получит часть авторитета вашей страницы, и каждая из них передаст этот вес, но если в одном случае вес передастся на конкретный сайт, то в другом случае – вес просто уйдет в никуда

Давайте представим немного, как видит всемирную паутину поисковая система. Все сайты связаны между собой ссылками, абсолютно все. Первый ссылается на второй, второй на третий … тысячный на тысяча первый и миллион какой-то в итоге обязательно будет ссылаться на первый.

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

Теперь представим, что первый сайт закрыл свои ссылки атрибутом rel=»nofollow». Вес не перейдет на второй сайт, а утечет в никуда, и второй сайт не получит ту часть веса, которую должен был, не сможет передать его дальше по цепочке, и в итоге, пройдя весь цикл, Х-какой-то сайт, который должен был передать вес на первый сайт, передаст его в значительно меньшем количестве, чем мог бы. Итак, каждый раз не получая ту часть веса, которую вы самостоятельно пускаете в никуда, закрывая свои ссылки атрибутом rel=»nofollow», сайт не может передать вам ее, из чего следует, что закрывая свои ссылки, вы сами лишаете себя увеличения веса, и такого показателя, как PR.

Чтобы было проще это понять, представим, что каждая ссылка передает вес, равным единице.

Таким образом, если первый сайт не закрыл ссылку атрибутом rel=»nofollow», то в конце цикла получит больший вес от входящих ссылок, чем в случае, если исходящие ссылки будут закрыты.

Но есть ситуации, когда действительно необходимо закрывать ссылки значением nofollow. Обратимся к источникам, Яндекс и Google, что они говорят по этому поводу?
Выдержка из раздела Помощь Яндекса:

Выдержка из раздела Справка Google:

Мы должны закрывать ссылки в тех разделах своего сайта, где любой пользователь может оставить свою ссылку, за которую мы не сможем поручиться, гарантировать, что там качественное содержание.

Также мне хотелось бы уделить внимание ещё одному моменту. Некоторые ярые борцы за закрытые ссылки ставят rel=»nofollow» не только в самих ссылках, т.е

в теге , но и везде, на что только хватает фантазии. И в теге , и

Давайте не будем выдумывать свои собственные стандарты, а обратимся к существующим, которые разрабатывает международная организация W3C.
Значение rel=»nofollow» можно использовать только в теге , и в других тегах его использовать нельзя!

Итак, мы выяснили, когда стоит пользоваться атрибутом ссылки rel=»nofollow», а когда это не целесообразно. Также мы больше не будем вставлять его никуда, кроме одного единственного тега, обозначающего ссылку

Теперь уделим внимание тегу noindex.

Правильное использование метатега viewport

Для области просмотра можно определить следующие параметры:

width — ширина области viewport. Принимает значение device-width или фактическое число пикселей в виде целого неотрицательного числа — например, 320px.
height — высота области viewport. Принимает значение device-height или фактическое число пикселей.
initial-scale — коэффициент масштабирования начального размера viewport. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.
user-scalable — указывает, может ли пользователь масштабировать страницу жестами. Принимает значение yes или no.
minimum-scale — минимальное значение масштабирования. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.
maximum-scale — максимальное значение масштабирования. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.

Универсальное использование метатега viewport выглядит так:

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

В этом правиле мы указываем, что ширина видимой области равна ширине устройства, а изначального масштабирования нет. Чаще всего это оптимальный сценарий работы страницы.

Мы также можем поиграть со значениями — например, задать конкретную ширину в пикселях:

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

Посмотрим, что стало со страницей.

Появился горизонтальный скролл. Это очень неудобно, особенно когда на странице много текста. Все из-за того, что браузер отображает страницу шириной 980px.

Добавление ширины страницы в пикселях может быть полезным, если у шаблона неадаптивный дизайн. Например, если ширина макета 1024 пикселя, нужно указать ее в атрибуте width. Тогда браузеры не будут обрезать стороны. Главное, не запрещать пользователям масштабирование, чтобы они могли приблизить страницу, и не добавлять атрибут initial-scale:

<meta name="viewport" content="width=1024">

Можно поиграть со значением изначального масштабирования. Например, сделать его не 1.0, а 5.0. Тогда страница при открытии в браузере будет увеличена в 5 раз. Можно также указать минимальное и максимальное значения масштабирования, которое доступно пользователям.

Очень аккуратным нужно быть с атрибутом user-scalable. По умолчанию его значение yes — то есть пользователи могут увеличить страницу жестами. Спецификация HTML настоятельно не рекомендует запрещать масштабирование страницы.

<!--ТАК ДЕЛАТЬ НЕ НУЖНО-->

<meta name="viewport" content="user-scalable=no">

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

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

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

The Distribution Meta Tag

The distribution meta tag is not necessary unless you are seeking an international audience and want to make sure you reach it, or you only want to be listed for local searches (perhaps because you are a mom & pop store that doesn’t ship).

Example Global Distribution Meta Tag:

The above example tells the visiting bot to make this page available on a global scale to all users, worldwide, searching with the web page’s active language.

Example Regional Distribution Meta Tag:

The above regional distribution meta specifies a local, the largest town in South Dakota, and the state itself both by abbreviation and name (to cover variances in search engine preferences). This example tells the search engine only to offer your web page’s listing in results for users in a specific state or a specific town. You can list multiple regions (separated by commas), or just specify a country, as well.

Мета теги для браузера

Главная задача мета тегов для браузера — это корректно отображать страницу сайта для пользователя.

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

Могут быть использованы следующие параметры атрибута:

Content-Type — служит для задания кодировки страницы сайта. Обычно используется кодировка кириллицы Windows-1251 или UTF-8
Content-Language — задает язык, на котором написана страница. На мой взгляд не очень важный тег
Cache-Control — параметры кэширования документа
Refresh — этот мета тег задает промежуток времени для 301 редиректа

Суть тега

Тег <noindex> – это HTML-тег, который запрещает Яндексу индексировать ту или иную область страницы сайта. Для поисковой системы Google этот тег не работает, более того, в Google вообще не предусмотрена возможность исключения части текста страницы из индекса.

Заблуждение №1. Основная ошибка людей, которые используют этот тег, заключается в убеждении, что если часть какого-либо текста помещена между открывающимся и закрывающимся тегом <noindex>, то робот Яндекса не станет читать и анализировать этот текст.

Единственное, что данный тег запрещает – это помещение содержимого в индексную базу, но это содержимое в любом случае будет прочитано и проанализировано роботом.

Пример: На странице вашего сайта расположен некоторый текст, использующий прямые вхождения предложений из других сторонних источников. Следовательно, эти предложения снижают уникальность вашего текста, а вам необходимо, чтобы уникальность была 100%. Вы решаете закрыть эти предложения тегом <noindex>, чтобы Яндекс считал ваш текст уникальным. Это заблуждение.

Абсолютно весь текст вашей страницы будет прочитан и обработан роботом, и ему будет известно, что текст вашей страницы не является уникальным.

Сама суть тега <noindex> – «не индексировать», значит запрета на чтение нет.

Предположим, что поисковый робот зашел на вашу страницу и начал сканировать содержимое. В какой-то момент робот находит открытие тега <noindex>, что является сигналом роботу – дальше текст не индексировать. Но чтобы найти то место кода, где тег <noindex> закрывается, роботу необходимо прочесть содержимое, идущее после открытия данного тега. Следовательно, даже теоретически нельзя запретить роботам читать содержимое с помощью тега <noindex>.

Для чего же тогда нужен тег <noindex>?

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

Заблуждение №2. Ещё одно заблуждение, которое часто встречается среди владельцев сайтов, – это мнение, что ссылка, помещенная в тег <noindex>, не будет учтена поисковым роботом. Как я говорил ранее, всё, что находится внутри тега <noindex>, будет прочитано и проанализировано роботом Яндекса. И ссылки не являются исключением. Единственное отличие размещенных обычным образом ссылок от ссылок в теге <noindex> – это то, что текст (анкор) ссылки не будет проиндексирован.

Существует два способа написания тега <noindex> в коде:

<noindex>Текст, запрещённый к индексированию</noindex>
<!–noindex–>Текст, запрещённый к индексированию<!–/noindex–>

Второй вариант более верный. Так как тег не входит в официальную спецификацию языка разметки HTML, то его присутствие в коде может вызвать недопонимание у других поисковых систем, которые будут считать его наличие за ошибку. Чтобы сделать код страницы валидным, для всех поисковых роботов рекомендуется использовать закомментированный вариант написания

Яндекс такое написание распознает, а другие поисковые роботы не будет обращать внимание на его присутствие

Как составить мета теги Description

Тег Description так же является очень важным и отвечает за формирование сниппета – описание продвигаемой страницы в выдаче поисковых систем.

Основные правила составления тега Description:

Description должен сильно отличаться от тега Title. Не рекомендуем использовать в Description даже небольшие куски тега Title (от 4 слов и более)
Тег Description должен описывать то, о чем, собственно, документ: статья про породу кошек, листинг с холодильниками определенного бренда или карточка товара. Именно описывать содержание страницы или преимущества товара + магазина – нет цели впихнуть в Description ключевые слова, в данном случае они не влияют на ранжирование документа
Стоит употреблять в Description основное ключевое слово страницы, так как оно «подсвечивается» жирным шрифтом и, возможно, даст большую кликабельность сниппета
Используйте в сниппете символы юникода, например: , , ★, ①, ②, ③, и другие. Данные символы могут серьезно повысить привлекательности сниппета для пользователей в выдаче и принести больше кликов

Примеры корректного составления тега Description:

Следуя этим простым правилам оптимизации мета-тегов, вы сможете добиться высокого ранжирования ваших запросов в Яндексе и Google и не попадете под санкции поисковых систем.

Мета-теги

Каким образом разместить эти атрибуты? Например, при помощи мета тегов для HTML сайта. При публикации ссылки на ресурс и извлекают связанную веб-страницу и считывают ее meta-теги, что позволяет отображать соответствующую информацию.

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

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">

Как , так и дают рекомендации относительно использования упомянутых выше тегов. Учтите, что ссылается на публикуемую веб-страницу при помощи термина «объект» (object):

Title (Заголовок).	Заголовок или название объекта.	Продуманный заголовок для связанного контента (максимально 70 символов).
Description (Описание).	Краткое описание или содержание объекта (2-4 предложения).	Описание, которое несет в себе всю необходимую информацию. Не следует использовать одинаковые заголовки и описания для нескольких страниц (длина до 200 символов).
Image (Картинка).	URL картинки объекта. Картинка должна быть как минимум 600 на 315 пикселей в размере, но лучше использовать 1200 на 630 и выше (объемом до 5Мб). Что касается соотношения сторон, то старайтесь укладываться в 1.91:1, чтобы избежать обрезки	Ссылка на картинку, прикрепленную к контенту. Не следует использовать случайные картинки типа логотипа сайта, фотографию автора или другие картинки, которые встречаются на других ресурсах. Картинка должна иметь минимум 280 пикселей в ширину и 150 – в высоту. Вес картинки не должен превышать 1 Мб.
URL	Канонический URL страницы. Ссылка должна быть прямой, без дополнительных параметров, переменных, данных идентификации пользователей и т. д.

Другие полезные мета-теги

Ниже я приведу еще несколько мета-тегов, которые напрямую не влияют на индексацию и ранжирование страниц, но их тоже важно знать специалисту по SEO

Мета-тег Viewport

Синтаксис

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

Тег должен находиться внутри контейнера <head>…</head> в любом месте. Актуальность тега возросла с переходом значительной части аудитории в Mobile. В случае применения адаптивной верстки, наличие этого тега позволяет правильно учитывать размер используемого устройства (ПК, планшет, смартфон).

Значение адаптирует ширину окна просмотра к экрану устройства. Значение обеспечивает соотношение 1:1 между пикселями CSS и независимыми пикселями устройства.

В случае отсутствия этого тега страница будет отображаться как на десктопе, даже если адаптивная верстка настроена корректно. Поэтому при анализе соответствия сайта требованиям для мобильных устройств, наличие мета-тега ViewPort является обязательным и для Google, и для Яндекса.

Мета-тег NoYDIR

Синтаксис

<meta name="slurp" content="noydir" /> 
или 
<meta name="robots" content="noydir" />

Тег должен находиться внутри контейнера <head>…</head> в любом месте. Этот тег используется в следующих случаях. Если сайт был добавлен в каталог Yahoo!, то некоторые поисковые системы могут выводить описание сайта, взятое из Yahoo! Directory. Если это не нужно, то добавляется этот тег.

Мета-тег Generator

Синтаксис

<meta name="generator" content="WordPress 4.6.6" />

Тег должен находиться внутри контейнера <head>…</head> в любом месте.

Эти мета-теги используются некоторыми CMS с целью предоставления информации о том, на каком движке или на какой версии движка сделан данный сайт. Если он указан, специалисту будет легко определить CMS сайта.

Мета-теги Author и Copyright

Синтаксис

<meta name="author" content="Иван Иванович" />

<meta name="copyright" lang="ru" content="ООО Ромашка" />

Тег должен находиться внутри контейнера <head>…</head> в любом месте.

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

§ 1. Тег «TITLE»

Первый мета-тег очень важен. Причём этот мета-тег одинаково важен и для поисковых систем, и для посетителей. Первые в ранжировании результатов поиска придают большое значение ключевым словам, которые содержатся в теге «title», вторые видят его содержимое в виде ссылки на сайт в тех же результатах поиска:

Содержимое этого же мета-тега отображается и в заголовке окна браузера:

В HTML мета-тег «title» добавляется следующим образом:

Содержимое мета-тега «title» Основное содержимое страницы

Кроме того, как я уже сказал ранее, ключевые слова, которые ты добавишь в мета-тег «title», крайне положительно воспримутся поисковиками. Поэтому, заполняя этот тег, постарайся включить в него правильные ключевые слова. О них, кстати, и пойдёт речь дальше.

Для чего нужны мета теги

С мета тегов начинается большинство курсов по SEO. Вероятно, это связано с тем, что они обычно находятся в самой верхней части кода. При том, что многие описания любят делать акцент на негативной стороне вопроса — например, на бесполезности тега Keywords — в целом, это очень важная составляющая оптимизации сайтов. Мета теги это простой и эффективный инструмент, который решает ряд задач маркетинга.

Самые базовые и часто используемые теги — это “title” и “description”. На самом же деле существуют десятки других примеров, часть которых также важна для вебмастеров. В данной статье мы рассмотрим только самые распространённые мета теги, разделив их на несколько категорий по значимости.

Любой специалист из области SEO согласится с тем, что если вы хотите занимать высокие позиции в поиске, одних мета тегов мало. Они должны сопровождаться высококачественным контентом, который интересен пользователям и решает их проблемы.

Главный совет здесь — придерживаться необходимого минимума. Не добавляйте теги, которые вам не нужны — они просто засоряют код, которого чем меньше, тем лучше. Браузер использует код примерно так же, как пользователь следует инструкции. Если в неё включить слишком много бессмысленных лирических отступлений, любой запутается.

SEO развивается и вес ключевых слов изменяется, но следует помнить о фактическом запросе. Поисковый запрос формулируется словами и пользователи, по сути, сканируют выдачу на наличие фразы, введённой в строку поиска, в правильной последовательности и целостности.

Хотя поисковые системы могут заниматься семантическим поиском и скрытой семантической индексацией, подбирая контекст, сама фраза остаётся крайне важной

§ 2. Мета-тег «keywords» (ключевые слова)

С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».

Те слова, которые наиболее полно характеризуют содержимое html-страницы и будут для нее ключевыми. Это могут быть как отдельные слова, так и словосочетания, но они обязательно должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу.

Например, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.

Более подробно о ключевых словах, в частности, и об оптимизации сайта, вообще, мы поговорим в соответствующих разделах.

Чтобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:

Перечень ключевых слов»> Содержимое мета-тега «title» Основное содержимое страницы

Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Например, не «ключевые слова», а «ключевой, слово». К тому же, безответственное поведение вебмастеров, которые в целях получения более высоких позиций в поисковиках забивали мета-тег «keywords» не только ключевыми словами, но и многочисленными производными от них, привело к тому, что поисковые системы практически перестали обращать внимания на этот тег. В настоящее время правильно заполненный мета-тег «keywords» используется поисковиками лишь как один из многих факторов ранжирования (далеко не главный). Если же они видят перед собой «keywords», в который запихнули все возможные вариации ключевиков, то это становится для них первым сигналом о неблагонадёжности данной страницы.