Призначення і реалізація розмітки Open Graph

Open Graph - це тип розмітки, призначений для покращення відображення посилання сайту в соціальних мережах Facebook, Twitter. Крім цього, працює Open Graph і в деяких месенджерах, наприклад Telegram. Якщо ваш сайт приваблює трафік не тільки з пошукових систем, але і з соціальних мереж, розмітка може значно збільшити кількість кліків. Нижче наведено порівняння - відображення посилання сайту з розміткою та без неї.

На скрині відображено сайт, на якому реалізована ця мікророзмітка.

Типи даних в Open Graph

За допомогою цієї розмітки можна виділити такі типи даних:

• ✅ Відео;
• ✅ Зображення;
• ✅ 3D-об'єкти.

Окрім цього, є базовий набір даних, який є обов'язковим при формуванні даного типу розмітки для сторінки:

• ✅ og:url - url сторінки або канонічний url сторінки (для сторінок пагінації або сторінок з параметром);
• ✅ og:title – заголовок сторінки. Рекомендується не використовувати назву бренду або сайту;
• ✅ og:description - короткий опис сторінки в кілька пропозицій;
• ✅ og:image - зображення для відображення сторінки.

Сам Фейсбук рекомендує використовувати зображення шириною мінімум 1080 пікселів для того, щоб зображення коректно відображалося на пристроях з великими екранами.

Документація за цим типом розмітки представлена на сторінці розробника https://ogp.me/.

Розмітка Open Graph: інструкція з виконання

Код з розміткою необхідно помістити в розділ head в будь-якому місці в такому форматі (приклад коду Open Graph нижче можна скролити вправо, щоб побачити його повністю):

            <meta property="og:title" content="Як перевірити наявність сторінки в індексі Google безкоштовно | Індексація беклінків" />

            <meta property="og:description" content="4 методи безкоштовно перевірити наявність в індексі сторінок. Перевірка індексації власного сайту або чужого сайту, наприклад, беклінків. Порівняння методів." />

            <meta property="og:type" content="website" />

            <meta property="og:url" content="https://aboutseo.blog/articles/how-to-check-page-indexing/" />

            <meta property="og:image" content="https://aboutseo.blog/image/indexing.png" />

         

Приклад розмітки сторінки про перевірку індексації сторінок.

Після цього отримуємо такий результат під час публікації посилання:

Швидкі відповіді