Мета-теги
Содержание:
Setting the Viewport
The viewport is the user’s visible area of a web page. It varies with the device
— it will be smaller on a mobile phone than on a computer screen.
You should include the following element in all your web pages:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
This gives the browser instructions on how
to control the page’s dimensions and scaling.
The part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
Without the
viewport meta tag
With the
viewport meta tag
You can read more about the viewport in our Responsive Web Design — The Viewport Tutorial.
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
HTML Ссылки
HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши
HTML Теги
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Атрибут viewport
Слово viewport можно перевести как “окно просмотра”. Этот атрибут используется, чтобы мобильные устройства правильно отображали контент страницы. С этого тега начинается адаптивный дизайн. Он помогает масштабировать и изменять текст и изображения на сайте, в зависимости от положения экрана. Без этого тега шрифты не будут увеличиваться до нужного размера, и пользователь просто не сможет прочитать, что написано на странице. Атрибут viewport задает определенную ширину окна, в которое нужно поместить сайт. Для каждого браузера она будет различной. Пример того, как может выглядеть мета-тег с этим атрибутом: <meta name=»viewport» content=»width=device-width, maximum-scale=1.0, minimum-scale=1.0″>.
Мы рассмотрели основные мета-теги, которые можно использовать при создании документа на языке HTML, но их гораздо больше. Ознакомиться с другими тегами и их возможными атрибутами можно в спецификации HTML5.1.
Schema.org для описания контента
Schema.org предоставляет схемы для структурированных данных в Интернете.
Используйте их для описания статей, записей в блогах, списков товаров, событий, людей и так далее. Таким образом, вы поможете поисковым системам распознать содержимое вашей страницы.
Рассмотрим пример статьи в блоге:
<article itemscope itemtype="http://schema.org/BlogPosting">
<meta itemprop="image" content="http://yoursite.com/image.jpg">
<img src="http://yoursite.com/image.jpg">
<h1 itemprop="name headline">Тайтл статьи</h1>
<p>
<time datetime="date_to_xmlschema" itemprop="datePublished">Apr 4, 2016</time>
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Имя автора статьи</span>
</span>
</p>
<div itemprop="articleBody">
<!—Тело статьи -->
</div>
</article>
Используйте атрибут itemscope, чтобы обозначить начало нового объекта schema.org. itemtype определяет тип элемента, начинающегося с itemscope. Используйте атрибут itemprop в пределах открывающегося и закрывающегося тегов элемента с атрибутом itemscope.
Разметка itemprop, которую вы поместите в пределах itemscope, будет определять различные свойства объекта. В нашем примере статьи мы определили свойства мета тега для сайта title, изображения, дату публикации, автора и тело статьи.
Используйте schema.org, и тогда поисковые системы будут лучше понимать, что содержится на страницах вашего сайта. Например, обозначить свои товары, чтобы они были доступны для поиска в .
Basic HTML Meta Tags
<meta name="keywords" content="your, tags"/> <meta name="description" content="150 words"/> <meta name="subject" content="your website's subject"> <meta name="copyright"content="company name"> <meta name="language" content="ES"> <meta name="robots" content="index,follow" /> <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" /> <meta name="abstract" content=""> <meta name="topic" content=""> <meta name="summary" content=""> <meta name="Classification" content="Business"> <meta name="author" content="name, email@hotmail.com"> <meta name="designer" content=""> <meta name="copyright" content=""> <meta name="reply-to" content="email@hotmail.com"> <meta name="owner" content=""> <meta name="url" content="http://www.websiteaddrress.com"> <meta name="identifier-URL" content="http://www.websiteaddress.com"> <meta name="directory" content="submission"> <meta name="category" content=""> <meta name="coverage" content="Worldwide"> <meta name="distribution" content="Global"> <meta name="rating" content="General"> <meta name="revisit-after" content="7 days"> <meta http-equiv="Expires" content=""> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache">
Особенности взаимодействия атрибутов name и content
Для того чтобы взаимодействие атрибутов тега <meta> name и content стало понятнее, рассмотрим еще одно значение name – author. Используя его вместе с content, можно указать автора страницы. Пример: <meta name=»author» content=»имя автора»>. Еще одним важным значением атрибута name тега HTML <meta> является keywords, или ключевые слова. Они перечисляются через запятую и нужны для SEO-оптимизации страницы. В настоящее время ведутся споры, так ли важны ключевые слова и действительно ли они оказывают влияние на ранжирование, но точный ответ на этот вопрос знают только технические специалисты, работающие на крупные поисковики. Рядовым же специалистам по созданию и раскрутке сайтов рекомендуется все же добавлять этот мета-тег в <head>.
Характеристики хорошего мета-описания
Почти каждая статья о мета-описаниях будет содержать некоторые из приведенных характеристик. Но здесь собраны все характеристики, которые имеют весомое значение для правильного составления мета-описания:
1. Длина до 155 символов, а иногда и больше
Правильная, или конкретная длина на самом деле не существует; это зависит от вида сообщения, которое вы хотите передать. Вы должны использовать достаточно места, чтобы донести сообщение при помощи символов, но в то же время ваше сообщение должно быть кратким и емким.
Время от времени Google меняет длину. В настоящее время вы в основном увидите мета-описания длиной до 155 символов, с некоторыми выбросами ― в 300 символов. По крайней мере, постарайтесь включить важную информацию в первые 155 символов вашего мета-описания.
2. Требующее конкретных действий и написанное в активном стиле
Конечно ваше мета-описание должно соответствовать данным характеристикам. Если вы считаете, что мета-описание ― это приглашение на страницу, то вы не можете просто сделать его «смешанной метафорой, описывающей несуществующий, но неявно высокий уровень квалификации».
Это скучное описание, и люди не будут знать, что они получат. Но об этом чуть позже, подкрепив некоторыми примерами из практики.
3. Включающий призыв к действию
«Здравствуйте, у нас есть такой-то новый продукт, и вы его хотите
Узнайте больше!» Это совпадает с тем, что я сказал об активном стиле, о котором уже шла речь, но я лишь хотел заострить на этом моменте особое внимание. Это ваш рекламный текст, где вашим продуктом является связанная страница, а не продукт на этой странице
Приглашения типа: «Узнай больше», «Получи сейчас», «Попробуй бесплатно» очень пригодятся здесь и будут как нельзя к месту.
4. Содержать ключевое слово с определенным акцентом
Если ключевое слово поиска соответствует части текста в мета-описании, Google будет более склонен использовать это мета-описание и выделять его в результатах поиска. Это сделает ссылку на ваш сайт еще более привлекательной.
5. По возможности показать спецификацию
Например, если у вас есть продукт для технически подкованных пользователей, то конечно же стоит обратить внимание на технические характеристики продукта ― производитель, размеры, мощность, цена и тому подобное. Если посетитель ищет именно этот продукт, скорее всего, вам не придется его убеждать, а наличие информации, такой как цена, вызовет клик
Обратите внимание, что вы можете, конечно, попытаться получить и более «богатые» на контент фрагменты.
6. Соответствие содержания
Это важно. Google узнает, когда мета-описания обманом заставляют посетителей нажимать, и может даже оштрафовать сайты, которые делают это
Но кроме этого, вводящие в заблуждение описания, вероятно, увеличат показатель отказов. Это плохая идея хотя бы только по этой причине. Нам же надо, чтобы мета-описание соответствовало содержанию на странице.
7. Уникальность описания
Если ваше мета-описание такое же, как и для других страниц, то взаимодействие с пользователем в Google будет затруднено. Хотя заголовки страниц могут различаться, но все страницы будут выглядеть одинаково, потому, что все описания одинаковы. Если вы намеренно хотите создать дублированное мета-описание, лучше оставить описание пустым. Google сам выберет фрагмент страницы, содержащий ключевое слово, используемое в запросе.
Посетите Инструменты Google для веб-мастеров > Улучшения HTML или используйте Screaming Frog SEO Spider, чтобы найти дубликаты мета-описаний.
Подытожим: все еще есть над чем работать
Понимание того, как выглядит средняя веб-страница, дает представление о текущих тенденциях. И тут же возникают вопросы.
Почему вебмастера редко прописывают alt для изображений? Почему заголовки h1 есть только на 60% страниц? Почему title и description заполняют далеко не все? Почему не спешат внедрять микроразметку JSON-LD? А ведь это базовое SEO…
Хочется сказать, что все это неважно — все-таки анализировались страницы из ТОП-20 Google. То есть Google считает их в общей массе авторитетными — даже без «альтов»
Но не забываем, что SEO — это комплекс факторов. Мы рассмотрели лишь малый технический аспект. Даже если взять только оптимизацию сайта, то там более 60 разных работ. А еще ссылки, упоминания, локализация, поведенческие факторы…
Атрибуты http-equiv и content тега
Атрибут content используется в паре не только с атрибутом name, но и
с атрибутом http-equiv, который применяется для конвертирования метатега в заголовок
HTTP. Заголовки представляют собой текстовые строки, которые используются при обмене сообщениями браузера с сервером
и состоят из пар имя: значение (разделяются двоеточием). Сам атрибут http-equiv
задает имя пары, аналогично атрибуту name, а атрибут content, соответственно,
значение пары: <meta http-equiv=»имя http-заголовка» content=»значение»>. Однако в одном элементе
«meta» допускается использовать только один из атрибутов: или name или
http-equiv. Браузеры преобразовывают значение атрибута http-equiv, заданное с
помощью атрибута content, в формат заголовка HTTP-ответа и обрабатывают их так,
как будто они прибыли непосредственно от сервера. Атрибут может принимать значения:
-
default-style – указывает предпочтительный для данной страницы стиль; при этом
атрибут content должен содержать
id элемента
<link>, ссылающегося на требуемую внешнюю таблицу стилей, или элемента
<style>, содержащего требуемую внутреннюю таблицу стилей; -
refresh – задает время в секундах до перезагрузки страницы (например,
<meta http-equiv=»refresh» content=»15″>) или перенаправления на другую
страницу, если атрибут content содержит целочисленное положительное число (время в секундах), после
которого идет строка с корректным url-адресом (например,
<meta http-equiv=»refresh» content=»15; url=httрs://site.com»>).
Теги верификации
Блогеры, веб-мастера должны подтвердить право собственности на сайт при использовании онлайн-сервисов. Вы обязаны делать это, когда:
- данные вашего сайта используются сервисом;
- идентификация вашего сайта является частью идентификации сервиса.
Позвольте мне объяснить.
Google Search Console (известный как «инструменты для веб-мастеров») предоставляет информацию о статистике вашего сайта. Также с его помощью можно повлиять на то, как видит ваш сайт. Но для этого вы должны подтвердить, что сайт является вашим.
Примером второго сценария является . Вы можете отслеживать взаимодействия с вашим сайтом на , а также встроить на сайт свою ленту записей . Чтобы сделать это, нужно подтвердить, что вы представляете конкретный сайт.
Самый простой вариант доказать право собственности на сайт — это метатег. Коды верификации предоставляются Google Search Console, и т.д.
Добавим в наш пример использования мета-теги для сайта, код в котором значение поля Content является кодом верификации, предоставляемым Google Search Console:
<!DOCTYPE html>
<html>
<head>
<!—Кодировка символов UTF8 -->
<meta charset="utf-8">
<!—Установка ширины страницы на ширину для устройства с масштабом 1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!—Тайтл страницы заключается в тег <title> -->
<title>Это тайтл вашей страницы</title>
<!—Описание страницы определяется в мета-формате -->
<meta name="description" content="Это описание вашей страницы">
<!—Верификация сайта в Google -->
<meta name="google-site-verification" content="59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" />
</head>
<body>
<!—Содержимое страницы... -->
</body>
</html>
Ключевые слова и их значение для оптимизации
Ключевые слова помогают поисковому роботу быстро находить сайт и выдавать его по определенному запросу пользователя. Без их указания поисковая машина обращается к странице, находит несколько слов на ней и уходит, если необходимая информация не найдена. Поэтому ключевые слова необходимо указывать
Важно учитывать, что одни и те же слова не должны повторяться более трех раз, иначе сайт будет помечен как “спам”. Общее их количество – 50
Составление description и keywords – это работа человека, занимающегося поисковой оптимизацией, продвижением сайтов и их ранжированием в поисковых системах. Верстальщику нужно понимать важность значения этих атрибутов тега HTML для помощи SEO-специалисту.
Мета тег robots
Мета тег robots с атрибутом content=”noindex” на уровне страницы даёт указание поисковым системам не индексировать какую-либо страницу вашего сайта. Атрибут nofollow предписывает не переходить по ссылкам на этой странице.
Хотя эти теги не связаны напрямую с ранжированием, в некоторых случаях они могут оказывать определённое влияние на то, как ваш сайт выглядит в глазах поисковых систем в целом. Например, Google очень сильно не любит слабый контент.
Вы может целенаправленно его и не создавали, но так получилось, что на вашем сайте есть контент, который не представляет особой ценности для посетителей. И при этом существует необходимость его присутствия.
Также у вас могут иметься в арсенале черновики или страницы-заглушки, которые нужно опубликовать, и уже потом завершать их наполнение и оптимизацию. Скорее всего, вы не хотите, чтобы они учитывались при оценке общего качества вашего сайта.
Наконец, если у вас есть возможность поиска по сайту, Google рекомендует закрывать страницы с получаемыми результатами, которые можно сканировать бесконечно и тратить ресурсы бота на неуникальный контент.
В приведённых выше случаях очень помогают теги noindex и nofollow, поскольку они дают вам определённый контроль над вашим сайтом в плане предоставления доступа поисковым системам.
Использование noindex и nofollow в meta robots
- Закройте ненужные и незавершённые страницы со слабым контентом, который не имеет особой ценности и не должен появляться в результатах поиска.
- Закройте страницы, которые неоправданно расходуют краулинговый бюджет.
- Убедитесь, что вы не ограничили по ошибке индексирование важных страниц.
Виды мета-тегов и их предназначение
Самыми популярными мета-данными, которыми пользуются веб-мастера:
- Title.
- Keywords;
- Description.
Мета-тег «Title»
Тег «title» является основным показателем определения релевантности web-страницы и одним из важнейших не только для поисковиков, но и для интернет-пользователей.
Для целевой аудитории его содержимое можно увидеть на экране монитора в качестве заголовка окна интернет-браузера, а также в поисковике в виде заголовка результатов поискового запроса, нажав на который, пользователь попадет на сайт. Поисковые системы, в свою очередь, интересуются ключевыми словами, содержащимися в данном теге. Если правильно внести ключи, это положительно скажется на ранжировании сайта.
В целом, мета-тег «title» имеет несколько параметров:
- название страницы сайта в HTML;
- название вкладки браузера с открытой страницей web-ресурса;
- смысловое значение страницы для поисковиков – позволяет повышать позиции при определенных запросах;
- название документа в результатах пользовательского запроса – от него зависит, захочет ли человек нажать на ссылку для перехода на сайт.
«Description»
Еще один важнейший для поискового продвижения meta tag – «description». В поисковике он отображается в виде небольшого описания страницы, еще известного, как сниппет. Данное описание, состоящее из одного-двух предложений, несет смысловое значение документа для поисковиков и вкратце рассказывает пользователям, для чего и для кого он предназначен.
Как правило, поисковые машины в качестве сниппета используют не то, что прописывает вебмастер в теге «description», а берут релевантный запросу «кусок» текста на странице в виде одного или нескольких предложений. Из-за этого сложно манипулировать сниппетами. Но если правильно составлять краткие и, в то же время, понятные описания страниц, включив в них только самые необходимые ключи, поисковая система Google составит сниппет именно на их основе. Яндекс же, практически всегда составляет сниппет по своему усмотрению взяв нужны предложения из вашего текста.
Дескрипшн стоит обязательно писать для любой страницы, ведь в сочетании с «title» он формирует важнейшие мета-данные, от которых зависит продвижение страницы и перейдет ли пользователь из результатов выдачи поисковика на ваш сайт, или пролистает дальше, сделав выбор в пользу конкурента.
«Keywords»
Этот тег представляет собой ключи (отдельные слова либо фразы), полностью характеризующие то, что содержится в HTML-странице. Они однозначно должны быть в тексте, который находится на странице. Например, учитывая тематику данной статьи, для нее можно прописать такие ключевые слова, как «мета-теги», «title» и т.п. Перечень ключей прописывается в теге «keywords» по слову или фразе раздельно, через запятую, в единственном числе.
Важно! Некоторые веб-мастера, желая вывести свои проекты на ТОП позиции в поисковиках, записывали в «keywords» помимо ключей еще и огромное количество их производных. По этой причине, сегодня данный мета-тег практически не оказывает никакого влияния на ранжирование сайта, в связи с чем его применять не обязательно
Мета тег nofollow
Внешние, исходящие ссылки – это ссылки вашего сайта, указывающие на другие веб-проекты. Они используются для перенаправления пользователей на проверенные источники информации или по какой-либо другой причине.
Эти ссылки имеют большое значение для SEO. Они могут сделать ваш контент похожим на, бережно созданный вручную, исчерпывающий материал по теме, подкреплённый надёжными источниками, или на, сгенерированную роботом, свалку ссылок.
Поисковые системы уже давно научились распознавать сайты без дополнительной ценности для пользователей, основной целью которых является продажа ссылок в биржах. Пингвин, Минусинск и другие типы санкций активно применяются поисковиками к сайтам вебмастеров за манипуляцию ссылочной массой.
С другой стороны, в эпоху семантического поиска, Google и Яндекс могут рассматривать источники, на которые вы ссылаетесь, как контекст, чтобы лучше понимать контент на страницах сайта.
По обеим этим причинам определённо стоит обращать внимание на то, где и как вы ставите ссылки. По умолчанию все ссылки являются открытыми для роботов поисковых систем
Их обычно называют dofollow-ссылками. Боты свободно переходят по таким ссылкам и сканируют всё, что находится «на том конце». То есть, ставя открытую ссылку на другой сайт, вы заочно выражаете ему доверие
По умолчанию все ссылки являются открытыми для роботов поисковых систем. Их обычно называют dofollow-ссылками. Боты свободно переходят по таким ссылкам и сканируют всё, что находится «на том конце». То есть, ставя открытую ссылку на другой сайт, вы заочно выражаете ему доверие.
Каждый специалист самостоятельно поддерживает SEO-гигиену на своём проекте, сохраняя здоровый баланс между nofollow и dofollow ссылками. Обычно мета тег nofollow устанавливают на следующие типы ссылок:
- Ссылки на любые ресурсы, которые по каким-либо причинам могут рассматриваться, как «ненадёжный контент».
- Любые платные или спонсорские ссылки (вы же не хотите, чтобы поисковые системы уличили вас в продаже ссылок).
- Ссылки из комментариев или другой пользовательский контент, который может подвергаться спаму, помимо вашего желания.
- Внутренние ссылки «Вход» или «Регистрация», так как это является пустой тратой краулингового бюджета.
Definition and Usage
The tag defines metadata about an
HTML document. Metadata is data (information) about data.
tags always go inside the <head> element,
and are typically used to specify character set, page description,
keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page),
search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport
(the user’s visible area of a web page), through the tag (See «Setting
The Viewport» example below).
Viewport мета тег
Метатег Viewport позволяет вам настроить, как страница будет масштабироваться и отображаться на любом устройстве. Обычно этот тег и его значение выглядят следующим образом:
Где «width=device-width» заставляет страницу соответствовать ширине экрана в пикселях, независимо от устройства, а «initial-scale=1» устанавливает соотношение 1:1 между пикселями CSS и пикселями устройства, с учётом ориентации экрана.
Этот тег легко добавить, и одного скриншота из Google достаточно, чтобы показать разницу:
Мета тег Viewport не имеет ничего общего с ранжированием, но напрямую влияет на пользовательский опыт
Это особенно важно, учитывая разнообразие устройств, которыми люди пользуются в настоящее время, и знаменитый переход Google на индексирование с приоритетом мобильного контента
Как и в случае со многими тегами и настройками, которые мы с вами обсуждали в этой статье, заботу о метатеге области просмотра ваши пользователи по достоинству оценят. В противном случае ждите ухудшения показателя отказов и негативных отзывов.
Проверка мета-тегов онлайн +анализ
Для проверки мета тегов на собственном сайте, можно воспользоваться панелью вебмастеров Яндекс. Для этого зайдите в Вебмастере «Диагностика — Диагностика сайта». На открывшейся странице нажмите «Ознакомиться». После этого вам будет показан список страниц, у которых не заполнен <description>.
Для комплексной проверки или для анализа мета описаний у конкурентов, можно использовать сервисы, которые быстро и в режиме онлайн показывают нужную информацию.
Вот несколько таких сервисов:
- Промопульт
- Серпстат
- Пиксельплюс
Заключение
Мета-теги — первое на что обращает внимание поисковая система. Именно они являются ключевыми факторами ранжирования страниц сайта в результатах поисковой выдачи
Нельзя оставлять мета описания пустыми, напротив нужно очень тщательно подходить к их заполнению и теперь вы знаете, как это сделать.
Настройка видового экрана
Окно просмотра — это видимая пользователю область веб страницы.
Он меняется в зависимости от устройства — на мобильном телефоне он будет меньше, чем на экране компьютера.
Вы должны включить следующее, элемент на всех ваших веб страницах:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Это дает браузеру инструкции по управлению размерами и масштабированием страницы.
Часть устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).
часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Вот пример веб страницы без мета-тега viewport и той же веб страницы с мета-тегом viewport:
Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Без мета тега viewport
С помощью мета тега viewport
Подробнее о видовом окне вы можете прочитать в нашем разделе Адаптивный веб дизайн — Учебник по видовому экрану
Группа значений атрибута NAME
«keywords» (ключевые слова)
Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.
Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.
HTML-код с «keywords»:
«description» (описание страницы)
Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу. При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.
Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!
HTML-код с «description»:
«Author» и «Copyright»
Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».
HTML-код с «author»:
«Robots»
Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.
У «robots» могут быть следующие значения:
- index — страница должна быть проиндексирована;
- noindex — страница не индексируется;
- follow — гиперссылки на странице учитываются;
- nofollow — гиперссылки на странице не учитываются
- all — включает значения index и follow, включен по умолчанию;
- none — включает значения noindex и nofollow.
HTML-код с «robots»:
