تولیدکننده رایگان تصویر Open Graph

به راحتی تصاویر OG، هدرهای توییتر/X و موارد دیگر را در چند کلیک ایجاد کنید—نیازی به مهارت طراحی نیست. با استفاده از فرمت‌های PNG (توصیه شده)، JPEG یا WebP، بهترین نمایش را در پلتفرم‌های رسانه‌های اجتماعی مانند توییتر، فیسبوک و لینکدین تضمین کنید. نیاز به اتوماسیون دارید؟ با استفاده از API قدرتمند ما تصاویر Open Graph را به صورت آنی تولید کنید.

Choose a template

ویژگی‌های قالب
تصویر خود را با تغییر ویژگی‌ها سفارشی کنید.
پس‌زمینه
یک پس‌زمینه سفارشی برای تصویر خود تنظیم کنید.
جهت گرادیان
گرید روی پس‌زمینه
0.15
Preview
فرمت‌های تصویری بهینه برای Open Graph
بهترین فرمت تصویر را برای اشتراک‌گذاری در رسانه‌های اجتماعی انتخاب کنید.
  • PNG: کیفیت عالی برای متن و لوگوها ارائه می‌دهد.
  • JPEG: عالی برای عکس‌ها و تصاویر با رنگ‌های پیچیده.
  • WebP: یک فرمت مدرن که فشرده‌سازی عالی را ارائه می‌دهد در حالی که کیفیت بالا را حفظ می‌کند.
دانلود تصویر
تصویر خود را در فرمت PNG، JPEG یا WebP ذخیره کنید.

برای بهترین نمایش تصویر Open Graph (OG) در پلتفرم‌هایی مانند توییتر، فیسبوک و لینکدین، توصیه می‌شود از فرمت‌های PNG (ترجیحی)، JPEG یا WebP استفاده کنید.

یکپارچه‌سازی API
با استفاده از API ما تصاویر Open Graph را به صورت آنی تولید کنید.

بدنه درخواست را به صورت JSON یا دستور cURL کپی کنید.

اضافه کردن تصاویر Open Graph آسان شده است

به راحتی تصاویر پیش‌نمایش رسانه‌های اجتماعی را در چند دقیقه به وبسایت خود اضافه کنید. روش ترجیحی خود را از بین استفاده از HTML یا Next.js App Router انتخاب کنید.

1. ذخیره تصویر

تصویر OG تولید شده خود را به عنوان og.png در دایرکتوری ریشه وبسایت خود ذخیره کنید.

2.تولید و تگ Open Graph را به head HTML اضافه کنید

<!-- Basic OG Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og.png" />
<meta property="og:url" content="https://yourdomain.com" />

<!-- Twitter/X Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og.png" />

<!-- Optional but recommended -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

مطمئن شوید yourdomain.com را با نام دامنه واقعی خود جایگزین کنید.

نکات متخصص

  • همیشه تصاویر پشتیبان داشته باشید در صورتی که تصویر OG بارگیری نشود.
  • از ابزارهای اشکال‌زدایی رسانه‌های اجتماعی برای تست تصاویر OG خود استفاده کنید.
  • متن alt معنادار اضافه کنید تا دسترسی‌پذیری بهبود یابد.
  • برای محتوای با به‌روزرسانی مکرر، تصاویر OG پویا را انتخاب کنید.