Open Graph (OG-теги) в HTML: Полное руководство для парсинга данных

Open Graph (OG-теги) в HTML: Полное руководство для парсинга данных

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

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

Разберем:

  • Что такое Open Graph (OG-теги) и зачем они нужны

  • Основные OG-теги и их назначение

  • Как правильно их внедрять в HTML

  • Как парсить OG-данные для последующего использования

  • Частые ошибки и их исправление

Что такое Open Graph?

Open Graph Protocol (OGP) был разработан Facebook в 2010 году для улучшения представления ссылок в социальных сетях. Используя OG-теги, веб-мастера могут указать, какие элементы страницы должны отображаться в постах Facebook, Twitter, LinkedIn и других платформах.

Когда ссылка публикуется в соцсетях, сервис пытается извлечь информацию с веб-страницы. Если OG-теги присутствуют, платформа использует их, а если нет – берет данные из обычных <title>, <meta name="description"> и других элементов страницы.

Пример разметки OG в HTML:

<head>
 <meta property="og:title" content="Как правильно использовать Open Graph" />
 <meta property="og:description" content="Полное руководство по OG-тегам для социальных сетей и парсеров." />
 <meta property="og:image" content="https://example.com/image.jpg" />
 <meta property="og:url" content="https://example.com/article.html" />
 <meta property="og:type" content="article" />
</head>

Основные OG-теги и их назначение

Вот список ключевых OG-тегов и их описание:

OG-тег Описание Пример
og:title Заголовок страницы <meta property="og:title" content="Название статьи" />
og:description Краткое описание страницы <meta property="og:description" content="Описание контента" />
og:image Изображение для предпросмотра <meta property="og:image" content="https://example.com/image.jpg" />
og:url Канонический URL страницы <meta property="og:url" content="https://example.com" />
og:type Тип контента (website, article, video, music, и т. д.) <meta property="og:type" content="article" />
og:site_name Название сайта <meta property="og:site_name" content="Example Site" />
og:locale Язык страницы <meta property="og:locale" content="ru_RU" />

Дополнительные теги для статей (article)

Для страниц с типом article можно указать дополнительные метаданные:

<meta property="article:published_time" content="2024-03-26T12:00:00Z" />
<meta property="article:modified_time" content="2024-03-27T15:30:00Z" />
<meta property="article:author" content="https://www.example.com/authors/john-doe" />
<meta property="article:tag" content="OG-теги, SEO, Социальные сети" />

Эти метаданные помогают поисковикам и соцсетям корректно интерпретировать данные статьи.

Как парсить OG-данные?

Сервисы парсинга, работающие с веб-страницами, должны уметь извлекать OG-метаданные из HTML-документов. Это можно делать с помощью различных технологий, например:

1. Использование Python и BeautifulSoup

Библиотека BeautifulSoup позволяет легко извлекать OG-данные:

from bs4 import BeautifulSoup
import requests

url = "https://example.com"
response = requests.get(url)
soup = BeautifulSoup(response.text, 'html.parser')

og_tags = {}
for tag in soup.find_all("meta"):
 if tag.get("property", "").startswith("og:"):
 og_tags[tag["property"]] = tag["content"]

print(og_tags)

2. Парсинг с помощью JavaScript (Node.js + Cheerio)

Для серверных приложений на Node.js можно использовать cheerio:

const axios = require("axios");
const cheerio = require("cheerio");

async function getOpenGraphData(url) {
 const { data } = await axios.get(url);
 const $ = cheerio.load(data);
 
 let ogData = {};
 $("meta[property^='og:']").each((_, elem) => {
 ogData[$(elem).attr("property")] = $(elem).attr("content");
 });

 return ogData;
}

getOpenGraphData("https://example.com").then(console.log);

Проверка OG-тегов

Перед публикацией страницы важно проверить корректность OG-разметки. Это можно сделать с помощью инструментов:

Они показывают, как социальные сети интерпретируют вашу страницу, и позволяют выявить ошибки.

Частые ошибки и их исправление

1. Отсутствие OG-тегов

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

2. Неверный og:image

Ошибка: Указанное изображение недоступно или имеет низкое разрешение.
Решение: Загружать изображения с разрешением не менее 1200x630 пикселей и доступом по прямой ссылке.

3. Несоответствие og:url и canonical

Ошибка: Разные значения og:url и <link rel="canonical">.
Решение: Убедиться, что og:url указывает на каноническую страницу.

4. Отсутствие og:description

Ошибка: Если описание не указано, соцсети могут взять произвольный текст со страницы.
Решение: Добавить осмысленное описание в og:description.

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

Для сервисов парсинга OG-данные – это структурированная информация, которую можно легко извлекать и анализировать. Используя Python, JavaScript и другие технологии, можно эффективно парсить OG-метаданные и использовать их в своих проектах.