Чи запитували ви коли-небудь себе, що означають ці "og" мета-теги в тегах вебсайтів?
OG розшифровується як Open Graph — це протокол, введений Facebook для покращення процесу поширення вебсайтів через соціальні мережі. Давайте розглянемо, як ви можете додати OG, щоб покращити ваш сайт.
Структура
Використовуйте html мета-тег у секції з двома атрибутами:
- property: назва властивості (title, description…)
- content: фактичний вміст властивості.
Заголовок
Відображає заголовок вашого сайту, коли його ділять
Опис
Короткий опис, який з'являється під заголовком. Декілька платформ не показують цей тег, щоб уникнути захаращення.
Зображення
Цей тег, поряд із тегом заголовка, є, мабуть, найважливішим для Open Graph. Він надає візуальну інформацію про сайт до того, як користувач відкриє посилання.
Ви також можете включити інформацію про розмір за допомогою тегів og:image:width і og:image:height.
URL
Цей тег є важливим для SEO, оскільки він надає базову URL-адресу сайту без будь-яких параметрів (наприклад, utm параметрів). Ви можете ділитися кількома посиланнями з різними параметрами, і без цього тегу платформи можуть сприймати їх як різні посилання, що впливатиме на SEO та аналітику.
Тип
Вказує тип контенту, що представлений на сайті. Ось приклади:
- Стаття
- Відео
- Музика
- Книга
Для кожної категорії є додаткові специфічні теги, які надають більше інформації.
Я починаю серію на популярні, але, можливо, заплутані концепти веб-розробки. Якщо це було корисно, подумайте про те, щоб підписатися, щоб дізнаватися більше. Побачимося завтра✌️
Перекладено з: Guide to Open Graph