Какие метатеги HTML добавить на свой сайт и что они делают?

  1. Название и описание
  2. Что делает заголовок?
  3. Для чего используется описание?
  4. Написание заголовка и описания
  5. Длина заголовка и описания
  6. Schema.org, чтобы описать ваш контент
  7. Заворачивать

Так вы не можете дождаться, чтобы выпустить свой новый сайт? Хотите уточнить, какие метатеги вам нужны в разметке HTML? Нужна информация о том, где, почему и как их добавить? Могли бы использовать несколько примеров?

Не ищите больше, вот пост, который вы искали.

Мета-теги помогают компьютерам (например, роботам Google) понимать содержимое страниц вашего сайта.

Бьюсь об заклад, вы уже слышали, что вам нужны мета-теги для SEO. Я думаю, что это определение несколько узкое в 2016 году.

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

Да, это выходит за рамки SEO.

Поисковые системы в основном полагаются на некоторые метатеги, но сегодня существуют специальные метатеги для социальных сайтов, таких как Facebook, Twitter и LinkedIn.

Помимо социальных тегов, есть метатеги, которые используются для более подробного описания вашего контента. Наиболее широко используемая система описания контента обеспечивается schema.org ,

Вот мета-теги, которые вам понадобятся на вашем сайте для успешной работы с современной онлайновой экосистемой:

  • Название и описание
  • Google связанная мета
  • Теги проверки
  • Социальная мета
  • Schema.org, чтобы описать ваш контент

Название и описание

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

Каждая страница на вашем сайте должна иметь метатег заголовка и описания. Поместите эти теги в раздел <head> ваших HTML-страниц. Например:

<! DOCTYPE html> <html> <head> <! - Заголовок страницы входит в тег <title> -> <title> Это заголовок вашей страницы </ title> <! - Описание страницы определено в метаформате -> <meta name = "description" content = "Это описание вашей страницы"> </ head> <body> <! - Здесь находится содержимое страницы ... -> </ тело> </ html>

Как вы можете видеть, <title> технически не содержит формат тега <meta>, но почти всегда обсуждается, когда речь идет о мета-тегах.

Что делает заголовок?

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

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

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

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

Для чего используется описание?

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

Описание также может быть использовано в качестве описания на социальных сайтах.

Написание заголовка и описания

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

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

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

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

Длина заголовка и описания

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

Это мой пост, скопированный с 6-й позиции поиска Google.

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

Не существует ни одного магического числа для длины заголовка или описания, потому что форма букв влияет на то, сколько символов вписывается в результаты. Вы можете добавить более тонкие символы, такие как «я», например «о».

Google обычно отображает 50-60 символов из заголовка и около 150-160 из описания. Остальная информация в этих тегах не будет отображаться на странице результатов.

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

Если вы хотите узнать больше о длине, Вот богатое информацией исследование Моз.

Есть несколько метатегов, которые вы должны добавить на все свои веб-страницы в разделе <head>. Это:

  • charset определяет кодировку символов документа HTML. Браузер использует эту информацию для правильного отображения страницы.
  • http-viewport обозначает видимую пользователю область веб-страницы. Он был представлен с отзывчивым веб-дизайном. Вы можете контролировать исходные размеры и масштабирование при загрузке страницы. Вы можете прочитать хорошее объяснение http-viewport с примерами на w3schools.

Давайте расширим наш предыдущий пример:

<! 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 = "Это описание вашей страницы"> </ head> <body> < ! - Здесь появляется содержимое страницы ... -> </ body> </ html>

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

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

Это единственный способ добиться успеха в поиске изображений, потому что компьютеры еще не понимают изображения, поэтому мы должны сказать им, что на картинке. Поэтому атрибуты alt являются обязательными для всех изображений.

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

  • данные вашего сайта используются службой
  • или идентификация вашего сайта является частью идентификации вашего сервиса.

Позволь мне объяснить.

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

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

Самый простой способ подтвердить право собственности на сайт - это метатег. Код подтверждения предоставляется онлайн-сервисами, такими как Google Search Console, Pinterest и т. Д.

Давайте добавим пример Google в наш пример кода, где значением поля содержимого является код подтверждения, предоставленный 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-validation" content = "59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" /> </ head> <body> <! - сюда приходит содержимое страницы ... -> </ body> </ html>

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

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

Большинство социальных сайтов поддерживают Протокол Open Graph получить полезную информацию о веб-странице.

Twitter использует свою собственную запись, но если ее нет на вашей странице, Twitter будет использовать данные Open Graph.

Давайте определим набор тегов Open Graph, которые будут использоваться Facebook, Google Plus и LinkedIn. Я также добавлю заголовок в Твиттере.

<! 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-verify" content = "59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" /> <! - Открыть графические данные -> <meta property = "og: title" content = "Это заголовок вашей страницы <" /> <meta property = "twitter: title" content = "Это заголовок вашей страницы <" /> <meta property = "og: description" content = "Это описание вашей страницы"> <meta property = "og: image" content = "http://yourtsite.com/yourimagedir/yourthumbnail.jpg" /> </ head> <body> <! - Содержание страницы c вот здесь ... -> </ body> </ html>

Если у вас есть проблемы с мета Open Graph, начните отладку с Facebook Open Graph отладчик.

Schema.org, чтобы описать ваш контент

Schema.org предоставляет схемы для структурированных данных в Интернете.

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

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

Давайте посмотрим пример сообщения в блоге:

<article itemscope itemtype = "http://schema.org/BlogPosting"> <meta itemprop = "image" content = "http://yoursite.com/image.jpg"> <img src = "http: // ваш сайт .com / image.jpg "> <h1 itemprop =" name headline "> Заголовок сообщения </ h1> <p> <time datetime =" date_to_xmlschema "itemprop =" datePublished "> 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, которую вы помещаете в область видимости элемента, будет определять различные свойства объекта. В случае сообщения блога в примере мы указали заголовок, изображение, дату публикации, автора и свойства тела статьи.

Используйте schema.org, а Google и другие поисковые системы лучше поймут, что находится на ваших страницах. Например, вы можете выделить ваши товары, чтобы они были доступны в Google Покупки для поиска. Больше людей найдут ваши продукты и ваш интернет-магазин. Звучит хорошо, правда?

Заворачивать

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

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