Если Google скажет что-то сделать, лучше это сделать.
Тем не менее, вы знаете, как обстоят дела с Google. Алгоритмы постоянно меняются, и то, что поисковик считает важным в один год, по истечению времени быстро уходит на второй план. Вот почему некоторые из метатегов, с которыми вы можете столкнуться, являются не более чем устаревшими остатками того, что Google заботило раньше.
И когда дело доходит до использования HTML метатегов для SEO, никто из нас не должен тратить время в пустую.
Это руководство поможет сосредоточиться на только на тех метатегах, которые вам необходимы. Также здесь вы узнаете, в каких случаях и как их можно использовать.
Что такое HTML метатеги?
Заголовок веб-страницы содержит много информации о найденном там контенте. Здесь вы найдете HTML метатеги вместе со ссылками на CSS или JavaScript, которые применимы к странице.
Вы можете найти несколько важных деталей о странице только из этого фрагмента:
- (Мета) заголовок
- Мета описание
- Тип мета-содержимого и область просмотра
Это все метатеги. В большинстве случаев они написаны на HTML в виде пары названий/значений. Например:
<meta property="og:title" content="15 Best CSS Libraries for 2019 | Webdesigner Depot" />
По сути, метатеги – это не что иное, как данные о содержании вашей веб-страницы. Метатеги никогда не появляются на странице. Они существуют в фоновом режиме, в ожидании, что поисковые боты обнаружат HTML и используют его для улучшения результатов поиска страницы. Они также полезны для браузеров, RSS-каналов и социальных сетей, которые предоставляют эти данные пользователям и отображают их содержимое.
Какие метатеги нужно использовать?
Некоторые утверждают, что стоит использовать все метатеги, распознаваемые Google и другими поисковыми системами. Но, так же как и в веб-дизайне и разработке, вы должны подходить к этому с умом.
Поэтому вместо того, чтобы тратить время на заполнение своих веб-страниц всеми возможными метатегами, нужно узнать, какие из них актуальны и какие не стоит использовать вообще.
Title
HTML пример
<title>5 Ways to Beef Up Your WordPress Security Today</title>
Что он делает?
Тег <title> указывает на название страницы.
Действительно ли он необходим?
Да, это даже не подлежит обсуждению, поскольку он сообщает поисковым системам, как называется страница.
Этот тег пригодится, если вы хотите настроить свой заголовок специально для результатов поиска. Итак, допустим, вы написали кликбейт заголовок, чтобы посетители, которые его увидели, захотели узнать, о чем идет речь. Что-то вроде:
How to Earn a Six-figure Salary with Nothing More Than Your Laptop, Passport, and Your Best Friend
(Как заработать шестизначную зарплату, не имея ничего, кроме ноутбука, паспорта и лучшего друга)
Длина этой заголовочной строки составляет 98 символов, и Google никоим образом не сможет отобразить ее полностью. Вместо того, чтобы переписать заголовок для вашего сайта, вы можете использовать тег заголовка, чтобы дать Google заголовок, который больше соответствует его стандартам, например:
<title>Earn 6 Figures with Your Laptop, Passport, and Your Best Friend</title>
Это 56 символов, теперь заголовок вписывается в лимиты Google, и работает так же хорошо, как оригинал.
Description
HTML пример
<meta name="description" content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.">
Что он делает?
Это краткое изложение того, что можно найти на странице. В поиске это описание страницы, которое появляется под заголовком и URL страницы.
Действительно ли он необходим?
Да, это еще один важный метатег.
Если вы предоставите создание описания страницы Google, скорее всего, это будут первые 160 символов того, что он там найдет. И если у вас есть реклама в верхней части страницы, текстовое изображение или что-то еще, сайт может просто застрять с дерьмовым мета-описанием.
Итак, найдите время, чтобы написать описание самостоятельно.
Character Set (Набор символов)
HTML пример
<meta charset="UTF-8">
Что он делает?
Этот метатег определяет, какой набор символов должен использовать браузер для интерпретации содержимого.
Действительно ли он необходим?
UTF-8 – не единственный набор символов и не является универсально приемлемым. Итак, убедитесь, что вы определили набор символов для сайта по умолчанию, используя этот метатег.
Если вы сомневаетесь, что вашему сайту нужен именно этот набор символов, обратитесь к этому списку. Можно с уверенностью сказать, что в случае, когда веб-сайт должен переводится для международной аудитории, вам нужно использовать другой тег charset. UTF-8 в этом случае не подойдет.
Hreflang
HTML пример
<link rel="alternate" href="http://mywebsite.com/en-au/" hreflang="en-au" />
Что он делает?
Этот тег сообщает Google, на каком языке или региональном диалекте написано содержимое страницы, чтобы он мог показать его нужным пользователям.
Действительно ли он необходим?
Есть несколько причин использовать этот метатег:
- Когда вы создали международный веб-сайт с разными переведенными версиями;
- Когда вы написали контент на определенном диалекте, например, en-us или en-gb;
- Когда ваша страница содержит смесь языков или диалектов, и вы хотите, чтобы каждый из них был обнаружен.
Viewport
HTML пример
<meta name="viewport" content="width=device-width, initial-scale=1">
Что он делает?
Он содержит руководство о том, как Google должен отображать вашу страницу на всех устройствах. Это особенно важно для мобильных устройств.
Действительно ли он необходим?
Да. По сути, если вы не включите его или используете неправильно, вы можете нарушить возможности просмотра для пользователей на мобильных устройствах.
Вот почему Google рекомендует каждый раз устанавливать для контента значение width = device-width, initial-scale = 1. Если вы попытаетесь ввести такие переменные, как минимальный масштаб, вы можете испортить внешний вид вашего веб-сайта. Это происходит потому, что он трансформируется, например, из портретной ориентации в горизонтальную.
Canonical Link
HTML пример
<link rel="canonical" href="https://mywebsite.com/blog/7-ways-to-beef-up-wordpress-security" />
Что он делает?
Если на вашем веб-сайте имеется дублированный контент или страницы, которые очень похожи друг на друга, канонический метатег сообщает Google, какая страница является оригинальной, чтобы на нее был направлен трафик.
Действительно ли он необходим?
Google не принимает дубликаты контента. Но допустим, что ваша статья «5 способов повысить безопасность WordPress сегодня» – это рерайт статьи под названием «7 способов повышения безопасности WordPress» от 2015 года.
Вместо того, чтобы Google наказал вас за то, что вы разместили похожий контент на вашем веб-сайте, вы можете использовать этот метатег, чтобы показать Google, где находится оригинал.
Это также пригодится, если вы изменили структуру URL и хотите убедиться, что весь трафик идет по самой последней ссылке.
Robots
HTML пример
<meta name="robots" content="noindex,nofollow">
Или же:
<meta name="googlebot" content="noindex,nofollow">
Что он делает?
Мета-теги “robots” всем поисковым ботам (роботам) или определенным ботам-обходчикам («googlebot», «bingbot», «duckduckbot» и т. д.), как обрабатывать страницу. Обычно это связано с тем, как должна быть проиндексирована страница.
Действительно ли он необходим?
По умолчанию поисковые системы будут индексировать и переходить по ссылкам на каждой странице, которую вы создаете на своем сайте.
Есть несколько причин, по которым вы могли бы заставить поисковые системы действовать иначе:
- noindex: используйте этот тег, если вы хотите скрыть страницу от поиска. (Не полагайтесь на это в целях безопасности. Помните, это всего лишь техническое решение.)
- nofollow: это полезно для блогов, которые принимают контент от авторов, но не проверяют его. Таким образом, если партнерские ссылки будут размещены на странице, Google не будет следовать им.
- nosnippet или max-snippet: управляет отображением вашего текста, изображения или фрагмента видео в поиске.
- noarchive: если существуют более старые кэшированные версии страницы, используйте этот тег, чтобы запретить поисковым системам показывать их.
- unavailable_after:[date]: это хороший вариант для ограниченного продвижения, например, в период продаж в Черную пятницу. Если вы, захотите привлечь трафик на страницу с октября по декабрь, возможно, имеет смысл убрать все из поиска после завершения праздников и прекращения действия сделок.
Google Site Verification
HTML пример
<meta name="google-site-verification" content="https://mywebsite.com" />
Что он делает?
Это один из методов, которые вы можете использовать, чтобы подтвердить свое право собственности на сайт для Google Search Console.
Действительно ли он необходим?
Вам не нужен этот метатег, если вы выбрали один из других вариантов подтверждения. Например, вы можете подтвердить право собственности на сайт с помощью своего кода отслеживания Google Analytics или обновив запись DNS. Если вы захотите, вы можете просто добавить метатег HTML в свой заголовок.
Twitter Cards и Open Graph (Социальные сети)
Образец HTML
<meta property="og:type" content="article" /> <meta property="og:title" content="5 Ways to Beef Up Your WordPress Security Today" /> <meta property=”og:description” content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today." /> <meta property="og:image" content="https://mywebsite.com/media/wordpress-security-lock/" /> <meta property="og:url" content="https://mywebsite.com/blog/5-ways-wordpress-security/" /> <meta property=”og:site_name” content="My Website" />
Что он делает?
Метатеги Open Graph (например, в приведенном выше фрагменте) сообщают Facebook и LinkedIn, как отображать метаданные для страницы или публикации, публикуемой в этих социальных сетях.
Метатеги Twitter Card делают то же самое, за исключением того, что обычно также запрашивают дескриптор (@).
Действительно ли он необходим?
Он может помочь, но это далеко не одни из самых необходимых метатегов. По моему опыту, когда я заполняю основные метаданные (заголовок, мета-описание, избранные изображения) это именно то, что показывается, когда я продвигаю их в социальных сетях.
Подведем итоги
Это ни в коем случае не исчерпывающий список всех существующих метатегов, здесь собраны только самые необходимые.
Например, вы можете столкнуться с веб-страницами, которые содержат устаревшие метатеги, объявляющие автора, авторские права или рейтинг. Они больше не работают, и вы не должны тратить на них свое время.
Итак, сфокусируйтесь на том, чтобы поисковые системы точно знали, что им нужно, чтобы проиндексировать страницу. И проследите чтобы ваши HTML-документы не были переполнены ненужными тегами.
Превью: Florian Olivo
Читайте также:
3 бесценных урока, которые UX дизайнеры могут извлечь из взаимодействия с Netflix
Как появление 5G изменит веб-дизайн, и на что дизайнерам нужно обратить внимание
5 советов по UX, которые сделают ваше приложение лучше
