Что такое OpenGraph изображение

OpenGraph изображения - это изображения, используемые для тегов OpenGraph, которые отображаются в Twitter, Facebook и предварительных просмотрах Open Graph.

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

Изображения, созданные с помощью генератора OpenGraph, обычно статичны, поскольку они генерируются на основе метаданных, которые вы предоставляете, которые обычно статичны. Например, если вы предоставляете метаданные для блог-поста, генератор OpenGraph создаст статическое OpenGraph изображение на основе этих метаданных.

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

Создать OpenGraph изображения с помощью инструментов

HTML-код OpenGraph

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="Заголовок моей статьи">
<meta property="og:description" content="Это описание моей статьи">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

С этим HTML-кодом страница будет отображать изображение https://example.com/og-image.png в OpenGraph.

Эффекты предварительного просмотра

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