Статьи

Использование мета-тегов в HTML: некоторые основы и лучшие практики

Метаданные часто называют «данными о данных», и один из способов, с помощью которых они выполняются на веб-страницах, — это использование <meta> . Содержимое meta В дополнение к этому, metahttp-equivcharsetсети разработчиков Mozilla. ,

Почему мета-теги важны?

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

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

Описание метатега в результатах поиска

Еще одна важная вещь, которую стоит отметить, это то, что не весь поисковый трафик генерируется Google, Bing и Yahoo. Подумайте о других (например, Baidu ), которые придают вес метатегам , составляя миллионы поисков в день.

Использование для различных метатегов

Различные метатеги определяются путем изменения атрибута name на допустимое значение.

Наиболее часто используемый метатег используется для описания :

 <meta name="description" 
      content="A general guide on the use of meta tags in html pages">

В случае пустых описаний (или несуществующих) поисковые системы генерируют описание из содержимого страницы.

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

 <meta name="author" content="Shaumik Daityari">

Атрибут charset HTML-страница может иметь только одну кодировку. Для большинства веб-страниц вы должны использовать кодировку UTF-8.

 <meta charset="UTF-8">

Более подробную информацию о кодировках символов и выборе кодировки символов можно найти на W3C.

Подставляя заголовки HTTP

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

 <meta http-equiv="refresh" content="5;url=http://www.sitepoint.com/">

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

Устаревшее использование

Использование meta Например:

 <!-- don't use this! -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Это более длинная версия кодировки символов, которая была распространена в XHTML. Сокращения до того, что мы обсуждали выше, достаточно.

Мета-теги также используются для указания авторских прав.

 <!-- don't use this! -->
<meta name="copyright" content="SitePoint" />

Это можно улучшить, предоставив вместо этого тег ссылки, указывающий на страницу с авторскими правами (или якорь на той же странице).

 <link rel="copyright" href="copyright.html">

Наконец, хотя многие веб-сайты все еще используют значение keywordsname На самом деле, Google никогда не учитывал ключевые слова в своем алгоритме поиска.

 <meta name="keywords" content="web,design,html,css,html5,development">

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

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

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

Использование в социальных сетях (Open Graph, Twitter Cards и Schema.org)

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

Использование Open Graph на Facebook

 <meta property="og:title" content="The best site">
<meta property="og:image" content="link_to_image">
<meta property="og:description" content="description goes here">

Для дальнейшего чтения я предлагаю вам просмотреть документацию Open Graph в Facebook .

Как и в Open Graph, в Twitter есть карточки Twitter (с использованием name="twitter:title"name="twitter:url"Schema.org (с использованием itemscopeitemprop

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

Инструменты метаданных

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

Если вы используете WordPress, у вас есть много возможностей для генерации метаданных при создании или редактировании поста, наиболее популярным из которых является WordPress SEO от Yoast . Joomla и Drupal также имеют набор связанных с мета плагинов и модулей. Если вы не используете ни один из них, всегда есть возможность использовать онлайн-генератор метатегов .

Вывод

Мета-теги не решат все ваши проблемы с SEO и доступностью, но они играют важную роль в этих областях. Если вы являетесь владельцем веб-сайта, вы можете отслеживать эффективность своего веб-сайта, зарегистрировавшись в Инструментах Google для веб-мастеров . После регистрации вы можете получать уведомления в случае возникновения ошибок сканирования, которые могут быть связаны с неправильным использованием метатегов.