Бесплатный вебинар
«как найти любимую работу»
Подарки на 150 000 ₽ за участие
Живой эфир
Записи не будет!
00:00:00:00
дн.ч.мин.сек.

Понимаем значение og:title в мета-тегах сайта

Быстрый ответ

Атрибут property="og:title" в теге <meta> задаёт название веб-страницы для её корректного отображения при публикации в социальных сетях. Этот атрибут является составной частью протокола Open Graph, который активно использует, в частности, Facebook.

Пример применения:

HTML
Скопировать код
<meta property="og:title" content="Название вашей страницы">

Рекомендуется размещать этот тег внутри секции <head> сайта. Таким образом, при публикации ссылки на эту страницу в социальных сетях будет отображаться указанное вами название.

Кинга Идем в IT: пошаговый план для смены профессии

Теги Open Graph: ключ к эффективному распространению контента в социальных медиа

Теги Open Graph играют важную роль в формировании внешнего вида контента, который пользователи размещают в социальных сетях, включая такую платформу как Facebook. Атрибут property="og:title" позволяет сделать ссылку более привлекательной для пользователей, что способствует её активному распространению и увеличивает вероятность кликов.

Протокол Open Graph: его значение и назначение

Протокол Open Graph представляет собой набор мер, цель которых — оптимизировать контент для социальных сетей. С использованием данных тегов можно регулировать, как страницы будут визуализироваться в социальных сетях при публикации ссылок на них, лайках или других взаимодействиях, создавая предпосылки для вирусного распространения постов.

Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Распространённые проблемы и рекомендации по работе с тегами Open Graph

Неправильное использование тегов Open Graph может создать проблемы:

  1. Некорректное отображение предпросмотра: Для корректировки внешнего вида используйте инструменты валидации, такие как Facebook Sharing Debugger или LinkedIn Post Inspector.
  2. Несоответствие содержания страницы и данных в атрибутах property: Регулярно проверяйте, чтобы вся информация была актуальной и соответствовала контенту веб-страницы.
  3. Проблемы после внесения изменений к контенту: При обновлении контента не забывайте актуализировать теги Open Graph. Для обновления кэша на социальных платформах можно добавить к URL параметр ?v=1.

Визуализация

Для наглядности можно провести следующую аналогию с использованием атрибута property="og:title":

Представьте книжную полку в библиотеке 📚, на каждой книге из которой указано название.

HTML
Скопировать код
<meta property="og:title" content="Великий Гэтсби">
// Этот тег можно сравнить с **ярлыком на книжной полке** в мире интернета.🌐 Главный герой в идеальных льняных костюмах, устраивающий самые роскошные вечеринки? Нет, это не ваш сосед — это наш Гэтсби!

Задача этого тега – сообщить библиотекарю социальных сетей (то есть, алгоритму) 🤖: "Запомни это название, оно представляет наш контент".

Когда пользователь размещает ссылку (веб-страницу) в сети, наш преданный библиотекарь представит корректное название потенциальным читателям (то есть, другим пользователям). 📖👀

og:title: "Великий Гэтсби" 🏷️ Как это отображается в социальных сетях: "Великий Гэтсби" – погрузитесь в захватывающий рассказ! 👉

Структурированные данные: введение в RDFa

Протокол Open Graph использует RDFa (Resource Description Framework in attributes) – формат встраивания структурированных данных в соответствии со спецификациями HTML5. Благодаря этому можно эффективнее размечать контент для социальных сетей.

RDFa, Microdata и JSON-LD: какой формат использовать?

RDFa, Microdata и JSON-LD являются различными способами представления структурированных данных:

  • RDFa: Встраивает данные непосредственно в HTML-код, могут усложнить структуру кода страницы.
  • Microdata: Упрощенный аналог RDFa, более понятен для новичков в разработке.
  • JSON-LD: Формат, на который делает акцент Google. Данные размещаются в теге <script> и отделяются от основного HTML-кода.

Полезные материалы

Сделаем отсылку к дополнительным ресурсам, как вы и указали.

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Что обозначает атрибут property="og:title" в мета-тегах?
1 / 5