Генератор OG Image& Социальный превью
Рендеринг Canvas на стороне клиента. Создавайте изображения 1200x630 для социальных сетей с настраиваемыми шаблонами.
Стиль шаблона
Акцентный цвет
Размер шрифта
HTML Meta-теги
Загрузите скачанное изображение на сервер и используйте URL в этих тегах
<!-- Open Graph --> <meta property="og:image" content="https://yoursite.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/og.png" />
Предпросмотр · 1200 x 630
Этот инструмент решил вашу проблему?
Примеры кода
HTML
<!-- Open Graph meta tags --> <meta property="og:title" content="Your Title" /> <meta property="og:description" content="Description" /> <meta property="og:image" content="https://example.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:type" content="article" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og.png" />
Next.js (App Router)
// app/page.tsx
export const metadata: Metadata = {
openGraph: {
title: "My Page Title",
description: "Page description",
images: [
{
url: "https://example.com/og.png",
width: 1200,
height: 630,
alt: "Preview image",
},
],
},
twitter: {
card: "summary_large_image",
},
};React (Helmet)
import { Helmet } from "react-helmet-async";
function SEOHead({ title, image }) {
return (
<Helmet>
<meta property="og:title" content={title} />
<meta property="og:image" content={image} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
name="twitter:card"
content="summary_large_image"
/>
</Helmet>
);
}WordPress (functions.php)
// Add OG Image to WordPress
function add_og_image() {
if (is_singular()) {
$image = get_the_post_thumbnail_url(
get_the_ID(), 'full'
);
if ($image) {
echo '<meta property="og:image"
content="' . esc_url($image) . '" />';
echo '<meta property="og:image:width"
content="1200" />';
echo '<meta property="og:image:height"
content="630" />';
}
}
}
add_action('wp_head', 'add_og_image');Часто задаваемые вопросы
What is an OG Image and why do I need one?
An OG Image (Open Graph Image) is the preview image displayed when a webpage is shared on social media. When you post a link on Twitter, Facebook, LinkedIn, or messaging apps, the platform fetches the og:image meta tag to create a visual card. A well-designed OG image significantly boosts click-through rates and is a key element of SEO and social media marketing.
What is the standard OG Image size?
The recommended size is 1200x630 pixels (aspect ratio 1.91:1), which is optimal for Facebook and most social platforms. Twitter's summary_large_image card also uses this size. LinkedIn recommends 1200x627, which is close enough to be interchangeable. This tool generates 1200x630 images compatible with all major platforms.
Are the generated images uploaded to any server?
No. Images are rendered entirely in your browser using the Canvas API with no server-side processing. When you click download, the image saves directly to your device. Your titles, descriptions, and other content are never transmitted or stored anywhere.
How do I add the generated OG Image to my website?
Upload the downloaded image to your web server or CDN, then add meta tags in your HTML <head>: <meta property="og:image" content="IMAGE_URL" />. Also add og:image:width and og:image:height for faster parsing. In Next.js, set openGraph.images in generateMetadata. In WordPress, most SEO plugins like Yoast handle this automatically.
Why doesn't my OG Image update after I change it?
Social platforms cache OG images. Use Facebook's Sharing Debugger (click 'Scrape Again'), Twitter's Card Validator, or LinkedIn's Post Inspector to force a cache refresh. Adding a version parameter to the image URL (e.g., ?v=2) also helps bypass caching.
What template styles are available?
Four templates are available: Gradient (ideal for tech blogs), Dark (for developer content), Minimal (for business documents), and Split (for product showcases). Each template supports custom accent colors (10 presets + custom color picker) and 3 font size options, creating hundreds of possible visual combinations.