Справочник по метатэгам в HTML: правила использования и примеры

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

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

Метатэги находятся в секции

веб-страницы и имеют атрибуты name или property, которые указывают на название метатэга, и content, который содержит его значение. Например, метатэг <meta name="description" content="Описание страницы"> используется для предоставления краткого содержания страницы, которое будет отображаться в поисковой выдаче.

Что такое метатэги (мета-теги) в HTML?

Метатэги указываются в секции head HTML-документа и представляют собой элементы с атрибутами name и content. Атрибут name задает тип информации, передаваемой метатэгом, а атрибут content содержит соответствующую информацию. Важно отметить, что метатэги должны быть указаны внутри элемента head, перед закрывающим тегом head.

Наиболее распространенными метатэгами являются:

title - указывает заголовок документа, который отображается в строке заголовка браузера или в результате поиска;
description - содержит краткое описание содержания страницы, которое отображается в результатах поиска;
keywords - определяет ключевые слова страницы, которые помогают поисковой системе определить тематику содержания;
charset - задает набор символов, используемых на странице;
viewport - определяет параметры отображения страницы на мобильных устройствах;

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

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

Глава 1: Основные метатэги

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

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

1. Тэг определяет кодировку символов для страницы. Использование UTF-8 рекомендуется, так как эта кодировка поддерживает множество языков и символов.

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

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

4. Тэг позволяет указать ключевые слова или фразы, связанные с содержимым страницы. Хотя поисковые системы уже не используют эту метатег, некоторые другие системы могут использовать ключевые слова при обработке страницы.

5. Тэг

определяет заголовок страницы, который отображается на вкладке браузера или в результатах поиска. Хороший заголовок должен быть информативным, кратким и привлекательным.При использовании этих основных метатэгов следует обратить внимание на их правильное форматирование и заполнение, чтобы обеспечить максимальную эффективность и удобство для пользователей и поисковых систем.<h2>Метатэг "title"</h2><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='Метатэг "title"' title='Метатэг "title"' data-lazy-src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22title%22"><noscript><img src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22title%22" alt='Метатэг "title"' title='Метатэг "title"'></noscript>Правильное использование метатэга "title" позволяет улучшить SEO-оптимизацию вашего сайта и привлечь больше посетителей. В заголовке следует указывать ключевые слова и фразы, которые наиболее полно отражают содержание страницы.Длина заголовка не должна превышать 60-70 символов, так как большие заголовки могут быть обрезаны поисковыми системами. Помимо этого, заголовок должен быть информативным и привлекательным для пользователей, чтобы они хотели перейти на вашу страницу.Пример использования метатэга "title":<pre> <code> <head> <title>Справочник по метатэгам в HTML: правила использования и примеры</title> </head> </code> </pre>В данном примере заголовок страницы содержит ключевые слова "справочник", "метатэги HTML" и "примеры", которые максимально точно описывают содержание страницы. Такой заголовок привлечет внимание пользователей и повысит вероятность их перехода на вашу страницу.<h2>Метатэг "meta description"</h2><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='Метатэг "meta description"' title='Метатэг "meta description"' data-lazy-src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22meta+description%22"><noscript><img src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22meta+description%22" alt='Метатэг "meta description"' title='Метатэг "meta description"'></noscript>Метатэг "meta description" используется для описания содержимого веб-страницы и отображается в результатах поиска. Он помогает поисковым системам понять, о чем именно страница, что позволяет улучшить ее видимость в поисковых запросах.Описание, указанное в метатэге "meta description", должно быть кратким и содержательным, а также привлекать внимание пользователей. Обычно оно ограничивается двумя предложениями и состоит из ключевых слов, которые отражают основную тематику страницы.Правильное использование метатэга "meta description" может помочь увеличить кликабельность страницы в результатах поиска. Следует помнить, что каждая страница на сайте должна иметь свой уникальный метатэг "meta description" для более точного отображения ее содержимого.Пример использования метатэга "meta description": <code><meta name="description" content="Данный сайт предоставляет информацию о лучших туристических направлениях по всему миру. Узнайте, что посетить, где остановиться и какие достопримечательности посетить на каждом из этих маршрутов."></code>В данном примере метатэг "meta description" описывает содержимое сайта, который предоставляет информацию о туристических направлениях.Важно отметить, что метатэг "meta description" не влияет на ранжирование страницы поисковыми системами, но его правильное использование значительно помогает привлечь потенциальных посетителей.<h2>Глава 2: Дополнительные метатэги</h2><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Глава 2: Дополнительные метатэги" title="Глава 2: Дополнительные метатэги" data-lazy-src="https://zhivemnadache.ru/img/?q=%D0%93%D0%BB%D0%B0%D0%B2%D0%B0+2%3A+%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5+%D0%BC%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3%D0%B8"><noscript><img src="https://zhivemnadache.ru/img/?q=%D0%93%D0%BB%D0%B0%D0%B2%D0%B0+2%3A+%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5+%D0%BC%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3%D0%B8" alt="Глава 2: Дополнительные метатэги" title="Глава 2: Дополнительные метатэги"></noscript>В предыдущей главе мы рассмотрели основные метатэги, необходимые для определения основных параметров страницы, таких как заголовок, описание и ключевые слова. В этой главе мы поговорим о дополнительных метатэгах, которые позволяют уточнить информацию о странице и ее содержимом.Метатэг "author"Метатэг "author" позволяет указать имя автора веб-страницы. Это может быть полезно, если на сайте публикуются статьи или другие материалы, написанные разными авторами. Указание имени автора помогает посетителям сайта лучше ориентироваться в контенте и устанавливать авторство.Метатэг "robots"Метатэг "robots" определяет правила индексации и проиндексированности страницы поисковыми системами. С помощью данного тэга можно запретить поисковым роботам индексацию страницы или указать необходимость переиндексации. Например, следующий код запрещает роботам индексировать страницу:<code><meta name="robots" content="noindex"></code>Метатэг "viewport"Метатэг "viewport" позволяет определить, как будет масштабироваться и отображаться содержимое страницы на мобильных устройствах. Это важно для того, чтобы контент был отображен корректно на различных экранах с разными размерами. Например, следующий код указывает, что ширина страницы должна быть равна ширине экрана устройства и запрещает масштабирование:<code><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"></code>Метатэг "refresh"Метатэг "refresh" позволяет автоматически перенаправить пользователя на другую страницу через указанное количество времени. Это может быть полезно, если вы хотите сделать автоматическую переадресацию на другую страницу или реализовать обновление содержимого на текущей странице. Ниже приведен пример кода, который перенаправляет пользователя на другую страницу через 5 секунд:<code><meta http-equiv="refresh" content="5; url=http://example.com"></code>В этой главе мы рассмотрели несколько дополнительных метатэгов, которые позволяют уточнить информацию о странице и ее содержимом. Они позволяют указать автора веб-страницы, задать правила индексации для поисковых систем, определить масштабирование на мобильных устройствах и реализовать автоматическую переадресацию на другую страницу.<h2>Метатэг "meta keywords"</h2><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='Метатэг "meta keywords"' title='Метатэг "meta keywords"' data-lazy-src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22meta+keywords%22"><noscript><img src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22meta+keywords%22" alt='Метатэг "meta keywords"' title='Метатэг "meta keywords"'></noscript>Метатэг "meta keywords" в HTML используется для указания ключевых слов, связанных с содержимым веб-страницы. Этот тэг позволяет поисковым системам понять, какие ключевые слова и фразы связаны с вашим контентом.Ключевые слова играют важную роль в оптимизации страницы для поисковых систем. Они помогают поисковым роботам лучше понять о чем идет речь на вашей веб-странице и насколько она соответствует поисковому запросу.Здесь приведены основные правила использования метатэга "meta keywords":<ol><li>Перечислите ключевые слова через запятую.</li><li>Используйте только те слова, которые релеванты содержимому страницы.</li><li>Ставьте самые важные ключевые слова первыми, затем по порядку важности.</li><li>Не повторяйте одно и то же ключевое слово несколько раз.</li><li>Не используйте слишком много ключевых слов. Больше ≠ лучше.</li><li>Используйте только релевантные ключевые слова для данной страницы. Не ставьте бесполезные или неверные ключевые слова.</li></ol>Пример использования метатэга "meta keywords":<pre> <head> <meta name="keywords" content="HTML, метатэги, ключевые слова"> </head> </pre>В этом примере мы указали, что ключевые слова нашей страницы - "HTML", "метатэги" и "ключевые слова". Это позволит поисковым системам лучше понять о чем идет речь на странице и улучшит ее видимость в результатах поиска.Важно отметить, что в настоящее время многие поисковые системы не учитывают метатэг "meta keywords" при ранжировании страниц. Они предпочитают анализировать содержимое страницы для определения ее релевантности поисковому запросу. Тем не менее, метатэг "meta keywords" все еще может быть полезен для поисковой оптимизации в некоторых случаях.<h2>Метатэг "meta robots"</h2><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='Метатэг "meta robots"' title='Метатэг "meta robots"' data-lazy-src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22meta+robots%22"><noscript><img src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22meta+robots%22" alt='Метатэг "meta robots"' title='Метатэг "meta robots"'></noscript>Метатэг "meta robots" используется для указания средствам индексации и поисковым системам правил индексации и сканирования содержимого веб-страницы. Он позволяет контролировать доступ поисковых роботов к контенту страницы и указывать, следует ли индексировать страницу или следует ли переходить по ссылкам на ней.Этот метатэг может иметь следующие значения в атрибуте "content":<table><tr><th>Значение</th><th>Описание</th></tr><tr><td>index, follow</td><td>Поисковые системы могут индексировать страницу и следовать по ссылкам на ней (значение по умолчанию).</td></tr><tr><td>noindex, follow</td><td>Поисковые системы не должны индексировать страницу, но могут следовать по ссылкам на ней.</td></tr><tr><td>index, nofollow</td><td>Поисковые системы могут индексировать страницу, но не должны следовать по ссылкам на ней.</td></tr><tr><td>noindex, nofollow</td><td>Поисковые системы не должны индексировать страницу и не должны следовать по ссылкам на ней.</td></tr></table>Например, чтобы запретить индексацию и сканирование страницы роботами, можно использовать следующий код:<pre> <code> <meta name="robots" content="noindex, nofollow"> </code> </pre>Метатэг "meta robots" очень полезен, когда требуется скрыть содержимое страницы от поисковых систем, например, при создании страниц администрирования или при временной блокировке страницы от индексации.Обратите внимание, что метатэг "meta robots" не является абсолютным способом запрета индексации. Некоторые поисковые системы могут не учитывать данную директиву или использовать ее с определенной оговоркой. Чтобы быть уверенным в блокировке доступа к странице, рекомендуется использовать другие способы, такие как robots.txt или парольную защиту.<h2>Глава 3: Метатэги для социальных сетей</h2><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Глава 3: Метатэги для социальных сетей" title="Глава 3: Метатэги для социальных сетей" data-lazy-src="https://zhivemnadache.ru/img/?q=%D0%93%D0%BB%D0%B0%D0%B2%D0%B0+3%3A+%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3%D0%B8+%D0%B4%D0%BB%D1%8F+%D1%81%D0%BE%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D1%85+%D1%81%D0%B5%D1%82%D0%B5%D0%B9"><noscript><img src="https://zhivemnadache.ru/img/?q=%D0%93%D0%BB%D0%B0%D0%B2%D0%B0+3%3A+%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3%D0%B8+%D0%B4%D0%BB%D1%8F+%D1%81%D0%BE%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D1%85+%D1%81%D0%B5%D1%82%D0%B5%D0%B9" alt="Глава 3: Метатэги для социальных сетей" title="Глава 3: Метатэги для социальных сетей"></noscript>Метатэги для социальных сетей позволяют оптимизировать отображение вашего веб-сайта при его представлении в социальных сетях. Эти метатэги предоставляют информацию о контенте страницы, который может быть использован в качестве заголовка, описания и изображения при обмене ссылками на ваш сайт в социальных сетях.Одним из наиболее важных метатэгов для социальных сетей является метатэг "og:title". Он определяет заголовок, который будет отображаться при обмене ссылкой на ваш сайт. По умолчанию, значение этого метатэга будет использовано в качестве заголовка страницы, если вы его не указываете явно.Другим важным метатэгом является метатэг "og:description". Он определяет описание, которое будет отображаться при обмене ссылкой на ваш сайт. Это описание должно быть информативным и привлекательным для пользователей, чтобы заинтересовать их перейти на вашу страницу.Кроме того, можно использовать метатэг "og:image", чтобы указать URL изображения, которое будет отображаться при обмене ссылкой на ваш сайт. Это изображение должно быть привлекательным и соответствовать содержимому страницы.Используя метатэги для социальных сетей, вы можете контролировать информацию, которая будет отображаться при обмене ссылками на ваш сайт в социальных сетях, и сделать ее более привлекательной для пользователей. Не забывайте, что эти метатэги должны быть размещены в разделе head каждой страницы вашего веб-сайта.<h2>Метатэг "og:title"</h2><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='Метатэг "og:title"' title='Метатэг "og:title"' data-lazy-src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22og%3Atitle%22"><noscript><img src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22og%3Atitle%22" alt='Метатэг "og:title"' title='Метатэг "og:title"'></noscript>Значением атрибута "og:title" является текст, который вы хотите видеть в качестве заголовка поста, когда его пользователь поделится в социальных сетях. Длина заголовка влияет на его видимость и может быть ограничена, поэтому важно правильно подобрать заголовок.Вот пример того, как выглядит тег "og:title" в HTML:<meta property="og:title" content="Название страницы">Когда пользователь поделится вашей страницей в социальной сети, заголовок, указанный в метатэге "og:title", будет отображаться вместе с текстом и ссылкой. Поэтому важно выбрать привлекательный и информативный заголовок, который будет привлекать внимание и заинтересует пользователей.Оптимизация и использование метатэга "og:title" помогут улучшить визуальное представление вашего контента при его распространении в социальных медиа. Благодаря правильно подобранному заголовку, пользователи будут лучше понимать, о чем идет речь на вашей странице и будут больше склонны к ее посещению.<h2>Метатэг "og:image"</h2><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='Метатэг "og:image"' title='Метатэг "og:image"' data-lazy-src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22og%3Aimage%22"><noscript><img src="https://zhivemnadache.ru/img/?q=%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D1%8D%D0%B3+%22og%3Aimage%22" alt='Метатэг "og:image"' title='Метатэг "og:image"'></noscript>При использовании метатэга "og:image" в HTML-коде страницы необходимо указать URL-адрес изображения. Это может быть ссылка на изображение, находящееся на сервере сайта или внешнем ресурсе.Пример использования метатэга "og:image" в HTML:<pre> <meta property="og:image" content="https://example.com/image.jpg" /> </pre>В данном примере указывается URL-адрес изображения "https://example.com/image.jpg". Это означает, что при публикации данной страницы в социальных сетях будет использоваться именно это изображение.Рекомендуется использовать изображения с соотношением сторон 1.91:1 и размером не менее 1200x630 пикселей, чтобы обеспечить наилучшее отображение изображения в различных социальных сетях.Метатэг "og:image" важен для улучшения привлекательности и информативности публикаций в социальных сетях, так как изображение играет важную роль в графическом представлении контента. Кроме того, правильно настроенный метатэг "og:image" может помочь повысить уровень вовлеченности пользователей и привлечь больше трафика на ваш сайт.

Справочник по метатэгам в HTML — как использовать метатеги для оптимизации и привлечения внимания пользователей и поисковых систем

Что такое метатэги (мета-теги) в HTML?

Глава 1: Основные метатэги