Meta property что это

Руководство для веб-мастера: meta property og title content

Теперь вы знаете, что мета-значения тега «meta property» явля ю тся частью специализированной технологии структурирования Open Graph. Возможности этой технологии помогают адаптировать показ веб-страницы на популярных социальных площадках. Продвижение сайта в соцсетях — это важный этап интернет-маркетинга, поэтому технологией Open Graph часто пользуются SEO — и SMM-профессионалы. Освоить его очень просто.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Всё о метатегах простым языком

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

Метатеги (от англ. meta tags) — это элементы (html-теги) веб страницы, используемые для передачи структурированных метаданных, как правило, размещаются в разделе веб-документа.

Простыми словами, метатеги — это строки кода страницы, которые передают поисковой системе краткую информацию о тематике (содержимом) страницы.

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

• Title (что такое, как заполнять);
• Description (что такое, как заполнять);
• Keywords;
• Content-type.

Что такое Title и как его правильно составить

Тег Title (Тайтл) является базовым элементом HTML разметки, по которой поисковые системы и пользователи могут определить тематику и содержание контента страницы онлайн ресурса.

Как выглядит метатег Title

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

Как посмотреть Title на сайте

Содержимое тега Title можно увидеть на сайте в заголовке вкладки браузера (в т.ч. при наведении на нее).

Title в сниппете поисковой выдачи

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

Основные мета-теги для социальных сетей

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

HTML · 17.09.2019 · читать 4 мин �� · Автор: Alexey Myzgin

При передаче ссылки — и Facebook, и Twitter берут указанную веб-страницу, и читают её теги , чтобы отобразить соответствующую информацию.

Facebook использует протокол Open Graph , систему классификации для веб-страниц, выходящую за рамки тех тегов , которые уже определены в HTML5. Полный список доступных тегов можно найти на веб-сайте Open Graph. Их довольно много, но на самом деле требуется несколько:

meta property="og:title" content="Frontend Stuff" /> meta property="og:type" content="Blog" /> meta property="og:description" content="Frontend Stuff. Everything for front-end developers." /> meta property="og:image" content="https://frontend-stuff.com/logo.jpg" /> meta property="og:url" content="https://frontend-stuff.com/" />

У Twitter есть свои собственные теги , которые похожи на протокол Open Graph , но используют префикс twitter вместо og . Как и в случае с Facebook, требуется всего несколько. Тип формата отображения, также указывается:

meta name="twitter:title" content="Frontend Stuff" /> meta name="twitter:description" content="Frontend Stuff. Everything for front-end developers." /> meta name="twitter:image" content="https://frontend-stuff.com/logo.jpg" /> meta name="twitter:site" content="@StuffFrontend" /> meta name="twitter:creator" content="@AlexMyzgin" /> meta name="twitter:card" content="summary_large_image" /> meta name="twitter:card" content="summary" />

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

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

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

Но, для наших целей и ради краткости мы можем использовать тот факт, что Twitter позволяет нам заменять теги Open Graph своими собственными. В конце концов, за исключением необходимости указания формата отображения, ни один из пользовательских тегов в Twitter не требуется. Это даёт нам возможность использовать минимум тегов , необходимых для того, чтобы сделать веб-страницу доступной для публикации в социальных сетях:

meta property="og:title" content="Frontend Stuff" /> meta property="og:description" content="Frontend Stuff. Everything for front-end developers." /> meta property="og:image" content="https://frontend-stuff.com/logo.jpg" /> meta property="og:url" content="https://frontend-stuff.com/" /> meta name="twitter:card" content="summary_large_image" /> meta name="twitter:site" content="@StuffFrontend" /> meta name="twitter:creator" content="@AlexMyzgin" />

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

Аналитика социальных сетей

Если собираемся использовать аналитику Facebook — Facebook Analytics, мы должны предоставить уникальный идентификационный номер, связанный с учетной записью. Тег будет выглядеть примерно так:

meta property="fb:app_id" content="your_app_id" />

У Twitter есть нечто похожее — Twitter Card Analytics. Чтобы получить максимальную отдачу от этого инструмента, Twitter рекомендует использовать следующий тег , содержащий имя пользователя Twitter, которое хотим связать с общей веб-страницей:

meta name="twitter:site" content="@StuffFrontend" />

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

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

meta property="og:site_name" content="Frontend Stuff" />

Twitter также предлагает один тег , который рекомендуется, но не является обязательным:

meta name="twitter:image:alt" content="Alt text for image" />

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

Повторим ещё раз: когда просматриваем документацию из Facebook и Twitter для публикации веб-страниц, есть много других доступных тегов , которые можно использовать для указания различных типов контента. Но, в целом, достаточно этих:

meta property="og:title" content="Frontend Stuff" /> meta property="og:description" content="Frontend Stuff. Everything for front-end developers." /> meta property="og:image" content="https://frontend-stuff.com/logo.jpg" /> meta property="og:url" content="https://frontend-stuff.com/" /> meta name="twitter:card" content="summary_large_image" /> meta property="og:site_name" content="Frontend Stuff" /> meta name="twitter:image:alt" content="Alt text for image" /> meta property="fb:app_id" content="your_app_id" /> meta name="twitter:site" content="@StuffFrontend" />

1. Facebook Analytics
2. Optimize Tweets with Cards
3. Twitter Card Validator

Микроразметка Open Graph: базовые принципы и настройка

Микроразметка помогает роботам ориентироваться на страницах сайта и забирать для формирования поисковой выдачи или превью ссылок в социальных сетях то, что владелец сайта хочет отдать.

Что такое Open Graph и какая от нее польза

Open Graph – это технология разметки страниц, которая помогает настроить их отображение в социальных сетях при публикации. У хорошего информационного блока (сниппета), который формируется при репосте страницы сайта, есть несколько признаков:

• заголовок не обрезается;
• в описании – цепляющий лид или другая важная информация;
• картинка соответствует требованиям соцсети и тоже не обрезается.

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

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

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

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как размечать страницы

Микроразметка Open Graph – это просто набор тегов, которые описывают для разных соцсетей, какой контент взять для репоста и как его отобразить. Из одного тега соцсеть берет заголовок, из другого – картинку для сниппета.

Для разметки страницы нужно в раздел добавить дополнительные теги . Внутри тегов указываются атрибуты – property и content. В property прописывается свойство, а в content – сам контент: текст заголовка или описания, ссылка на изображение и другая информация для формирования сниппета.

Обязательные свойства

У атрибута property есть четыре обязательных свойства.

1. og:title – заголовок поста или страницы. Сам текст добавляется в атрибут content.
2. og:type – тип передаваемого объекта: article, audio, image, video. Полный перечень смотрите в документации.
3. og:url – канонический URL, который ведет к объекту.
4. og:image – ссылка на изображение, которое опубликуется при репосте.

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

Дополнительные свойства

Кроме обязательных есть и дополнительные свойства.

• og:audio – адрес звукового файла указанного объекта.
• og:video – адрес видеофайла указанного объекта.
• og:description – описание передаваемого объекта.
• og:determiner – актуально для постов на английском: можно выбрать артикль перед названием объекта в предложении. Тип enum (a, an, the, «», auto), по умолчанию выбрано «» (нет артикля).
• og:locale – свойство для указания локации. Формат language_TERRITORY. По умолчанию: en_US.
• og:locale:alternate – свойство для добавления альтернативных локалей.
• og:site_name – название сайта, которое будет отображаться на всех страницах. Отличное решение для популярных проектов, например Кинопоиска или Timeweb.

Из опциональных свойств часто используют og:description и og:site_name. Первое свойство позволяет добавить краткое описание, которое состоит из одного или нескольких предложений. ВКонтакте и на Facebook количество символов в описании сильно ограничено, зато в Telegram сниппет выглядит информативно.

С помощью og:site_name вы можете добавить в сниппет название сайта и несколько слов для описания его предназначения. Но это свойство обрабатывают не все соцсети. Например, на Facebook отобразится только URL сайта. А вот в Telegram в превью ссылки подтягивается все, что вы укажете внутри свойства og:site_name.

У свойств og:image, og:video и og:audio есть дополнительные метаданные, которые вы можете указать. Изучим их на примере og:image:

• og:image:secure_url – альтернативный адрес, который используется на страницах с HTTPS.
• og:image:type – например jpeg или png.
• og:image:width – ширина изображения в пикселях.
• og:image:height – высота изображения в пикселях.

У свойства og:video доступны такие же дополнительные метаданные: secure_url, type, width и height. А вот у og:audio дополнительных данных width и height нет, что логично – у звукового объекта не может быть длины и ширины, в отличие от изображения и видео.

Ссылки на дополнительные материалы

Больше подробностей про разные свойства атрибута property – в документации протокола Open Graph. Она очень емкая и практичная, так что изучение не займет много времени.

Также можно посмотреть информацию об использовании Open Graph в справке Яндекс.Вебмастера. Там много сведений из официальной документации протокола, но есть и другие полезные примеры – например, использование OG для разметки видео. Это помогает улучшить индексацию роликов по запросам пользователей поисковой системы Яндекса.

Есть также специальные руководства по настройке разметки Open Graph для отдельных социальных сетей:

Примеры разметки для разного контента

Это пример минимальной разметки – в ней только базовые свойства:

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

Это рекомендуемые размеры изображений для Facebook. С ним картинка в сниппете будет выглядеть хорошо.

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

• vk:image
• fb:image
• twitter:image

Например, пользователь делает репост в Twitter. Соцсеть будет учитывать только контент, указанный в свойстве twitter:image. Остальные картинки Twitter проигнорирует.

В справке Яндекс.Вебмастера уделено много внимания разметке видео. Если вы хотите передать поисковой системе больше информации о своих роликах, то используйте этот минимальный набор свойств:

В этот набор можно добавить структурированные свойства. Например, указать ширину и высоту видео.

Как внедрить Open Graph на сайте

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

1. В самом начале страницы располагается префикс , который указывает на использование протокола Open Graph.
2. Затем в прописываются метатеги с нужными атрибутами и свойствами.

Чтобы сэкономить время, можно не прописывать все метатеги вручную, а использовать генераторы. Например, есть сервис The Ultimate Open Graph Generator. Вам нужно выбрать тип объекта, а затем добавить основные данные: заголовок, URL, изображение. В ответ вы получите код, который необходимо вставить на страницу сайта.

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

Как проверить разметку

Если хотите посмотреть, как конкуренты делают разметку, используйте парсер. Он проверит страницу по указанной вами ссылке и выдаст все используемые на ней атрибуты и свойства Open Graph.

Чтобы проверить корректность разметки, используйте валидаторы. Ссылки на некоторые инструменты есть в документации Open Graph. Можно также использовать валидатор в Яндекс.Вебмастере или сервис Open Graph Check. Они проверяют страницы по указанным адресам и показывают, есть ли ошибки в разметке.