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

جزئیات صفحه را پر کنید و یک بلوک از تگ‌های og: و twitter:card را کپی کنید، اسکیپ‌شده و آماده برای جای‌گذاری در head صفحه شما. بررسی‌ها از پروتکل Open Graph و محدودیت‌هایی که X، LinkedIn و Meta منتشر می‌کنند استفاده می‌کنند که هر کدام در پایین لینک شده‌اند.

ابزار رایگان تگ‌ها را در مرورگر شما می‌نویسد. هیچ چیزی ارسال، ذخیره یا ثبت نمی‌شود، و URL تصویر هرگز واکشی نمی‌شود.

پیش‌نمایش تقریبی: یک تخمین، نه آن‌طور که هر اپ واقعاً آن را نمایش می‌دهد

تگ‌هایی که پیش‌نمایش لینک از آن‌ها ساخته می‌شود

وقتی کسی لینک شما را در یک پست یا پیام می‌چسباند، اپ یک خزنده به صفحه می‌فرستد و چند تگ <meta> را در <head> می‌خواند. این تگ‌ها از پروتکل Open Graph می‌آیند که چهار مورد را الزامی فهرست می‌کند:

  • og:title: عنوانی که باید در پیش‌نمایش ظاهر شود.
  • og:type: اینکه صفحه چیست. website برای بیشتر صفحه‌ها و article برای یک پست وبلاگ مناسب است. پروتکل انواعی مثل profile، book، video.movie و music.song را هم تعریف می‌کند.
  • og:image: نشانی تصویری که نماینده صفحه است.
  • og:url: نشانی کانونیکال، که پروتکل آن را شناسه دائمی شیء می‌نامد.

پروتکل تگ‌های اختیاری هم تعریف می‌کند و این ابزار موارد مفید را می‌نویسد: og:description، og:site_name و جزئیات تصویر og:image:width، og:image:height و og:image:alt. درباره متن جایگزین پروتکل صریح است: اگر صفحه‌ای og:image را مشخص می‌کند، باید og:image:alt را هم مشخص کند، و آن متن محتوای تصویر را توصیف می‌کند، نه یک زیرنویس.

آنچه X اضافه می‌کند: twitter:card

X هم Open Graph را می‌خواند. مرجع نشانه‌گذاری کارت‌های آن (مستندات توسعه‌دهنده X که اینجا به دلیل تغییر مسیر صفحه اصلی، از طریق Internet Archive پیوند داده شده) جایگزین هر تگ را فهرست می‌کند: twitter:title به og:title، twitter:description به og:description، twitter:image به og:image و twitter:image:alt به og:image:alt بازمی‌گردد. پس تنها تگی که ارزش افزودن دارد twitter:card است که چیدمان را انتخاب می‌کند. اگر آن را حذف کنید، همان مرجع می‌گوید X ممکن است به کارت خلاصه کوچک بازگردد، حتی اگر کارت بزرگ را می‌خواستید:

  • summary_large_image: یک تصویر تمام‌عرض بالای عنوان. صفحه کارت تصویر بزرگ X می‌گوید تصاویر آن از نسبت 2:1 پشتیبانی می‌کنند، با حداقل ابعاد 300 × 157 و حداکثر 4096 × 4096 پیکسل، کمتر از 5MB، در فرمت‌های JPG، PNG، WEBP یا GIF. SVG پشتیبانی نمی‌شود.
  • summary: یک کارت کوچک‌تر با تصویر مربع. صفحه کارت خلاصه X می‌گوید تصویر از نسبت 1:1 پشتیبانی می‌کند، از 144 × 144 تا 4096 × 4096 پیکسل، و در همه پلتفرم‌ها به شکل مربع برش می‌خورد.

همین مرجع کارت‌های app و player را فهرست می‌کند که به فیلدهای اضافی App Store یا پخش‌کنندهٔ ویدیو نیاز دارند، پس اینجا کنار گذاشته شده‌اند. همچنین محدودیت‌هایی را که بررسی‌های بالا از آن استفاده می‌کنند مستند می‌کند: ۷۰ کاراکتر برای عنوان، ۲۰۰ برای توضیح و ۴۲۰ برای متن جایگزین.

اندازهٔ تصویرهایی که پلتفرم‌ها اعلام می‌کنند

  • LinkedIn: راهنمای آن برای قابل‌اشتراک کردن یک وب‌سایت به og:title، og:image، og:description و og:url نیاز دارد و حداکثر حجم فایل ۵ مگابایت، حداقل ۱۲۰۰ × ۶۲۷ پیکسل و نسبت پیشنهادی ۱.۹۱:۱ را فهرست می‌کند.
  • Meta: بهترین روش‌های اشتراک‌گذاری آن می‌گوید برای صفحه‌نمایش‌های با وضوح بالا از تصویرهایی با عرض دست‌کم ۱۰۸۰ پیکسل استفاده کنید و برای نمایش تبلیغات لینک تصویری دست‌کم ۶۰۰ پیکسل عرض. همین صفحه به og:image:width و og:image:height نیاز دارد تا خزنده بتواند تصویر را بی‌درنگ و بدون نیاز به دانلود و پردازش اولیه رندر کند.

یک تصویر ۱۲۰۰ × ۶۳۰ همهٔ این‌ها را برآورده می‌کند: دست‌کم ۱۲۰۰ × ۶۲۷ برای LinkedIn، عریض‌تر از ۱۰۸۰ برای Meta، و ۱.۹۰۵:۱ که با اختلاف کمتر از ۵٪ به نسبت ۲:۱ در X نزدیک است.

بررسی‌اش کنید و پیش‌نمایش‌های قدیمی را تازه کنید

اپ‌ها آنچه را خزیده‌اند در حافظهٔ موقت نگه می‌دارند، پس اصلاح تگ‌ها پیش‌نمایشی را که از قبل ذخیره شده درست نمی‌کند. هر دو شبکهٔ بزرگ ابزاری برای این کار در اختیار شما می‌گذارند:

  • Sharing Debugger متعلق به Meta تگ‌هایی را که خزندهٔ آن می‌خزد همراه با هر خطا یا هشدار نشان می‌دهد و یک خزش تازه را فعال می‌کند. راهنمای وب‌مستر متعلق به Meta آن را شرح می‌دهد و صفحهٔ بهترین روش‌ها اشاره می‌کند که محتوای خزیده‌شده در غیر این صورت در یک دورهٔ استاندارد ۲۴ ساعته به‌روز می‌شود.
  • Post Inspector متعلق به LinkedIn یک URL ذخیره‌شده را تازه می‌کند. صفحهٔ راهنمای LinkedIn اشاره می‌کند که این تازه‌سازی فقط روی پست‌های جدید اثر می‌گذارد: پست‌هایی که از قبل این URL را دارند پیش‌نمایش قدیمی را حفظ می‌کنند.

این ابزار چه کارهایی را انجام نمی‌دهد

این ابزار صفحه یا تصویر شما را واکشی نمی‌کند، پس نمی‌تواند ببیند واقعاً چه چیزی آنلاین است و پیش‌نمایش بالا به‌جای یک رندر، طرحی متنی است. تگ‌ها را می‌نویسد؛ سایت شما هنوز باید آن‌ها را در <head> صفحه، در همان HTML‌ای که خزنده دریافت می‌کند، ارائه دهد. تگ‌هایی که بعداً با JavaScript افزوده شوند ممکن است هرگز دیده نشوند. و کارت‌های app یا player یا ویژگی‌های اضافی‌ای را که انواعی مانند book یا video.movie تعریف می‌کنند نمی‌نویسد.

اگر ترجیح می‌دهید این را دستی ننویسید

Hermoso بازاریابی روی حالت خودکار است: تبلیغاتی که همین حالا در بازار شما جواب می‌دهند را بررسی می‌کند، تبلیغات تصویری و ویدیویی متناسب با برند می‌سازد، پست‌ها را زمان‌بندی می‌کند و کمپین‌های پولی را روی حساب‌های تبلیغاتی خودتان اجرا می‌کند. در وب‌اپ کار می‌کند، یا داخل Claude و ChatGPT و Cursor از طریق سرور MCP آن.

ابزارهای رایگان: سازنده لینک UTM · سازنده کد QR · راهنمای اندازه‌های شبکه‌های اجتماعی

پرسش‌های متداول

کدام تگ‌های Open Graph الزامی هستند؟

پروتکل Open Graph چهار ویژگی الزامی را فهرست می‌کند: og:title، og:type، og:image و og:url. تگ‌های og:description، og:site_name و عرض، ارتفاع و alt برای og:image اختیاری‌اند اما افزودن‌شان ارزش دارد.

اگر تگ‌های og: دارم، آیا به twitter:title و twitter:image نیاز دارم؟

نه. مرجع نشانه‌گذاری کارت‌های X می‌گوید twitter:title، twitter:description، twitter:image و twitter:image:alt به معادل‌های og: خود بازمی‌گردند. تگی که ارزش افزودن دارد twitter:card است که چیدمان کارت را انتخاب می‌کند.

اندازه تصویر Open Graph چقدر باید باشد؟

LinkedIn دست‌کم 1200 × 627 پیکسل با نسبت 1.91:1 و زیر 5 MB می‌خواهد. Meta دست‌کم 1080 پیکسل عرض پیشنهاد می‌دهد. کارت تصویر بزرگ X نسبت 2:1 را از 300 × 157 تا 4096 × 4096 پشتیبانی می‌کند. تصویر 1200 × 630 با هر سه جور درمی‌آید.

چرا لینک من بعد از تغییر تگ‌ها هنوز تصویر قدیمی را نشان می‌دهد؟

برنامه اسکرپ قدیمی را کش کرده است. URL را از طریق Sharing Debugger متعلق به Meta یا Post Inspector متعلق به LinkedIn اجرا کنید تا دوباره آن را واکشی کند. LinkedIn اشاره می‌کند که پست‌هایی که قبلاً این URL را به اشتراک گذاشته‌اند، پیش‌نمایش قدیمی را نگه می‌دارند.

چرا کوتیشن‌ها و امپرسندها در خروجی تغییر کرده‌اند؟

آن‌ها HTML-escaped شده‌اند تا تگ معتبر بماند. عنوانی مانند Tom & Jerry's "Sale" در داخل ویژگی content به Tom &amp; Jerry&#39;s &quot;Sale&quot; تبدیل می‌شود، و مرورگرها و خزنده‌ها آن را دوباره به‌صورت متن اصلی می‌خوانند.

آیا این ابزار تصویر من را بارگذاری می‌کند؟

نه. هیچ چیزی که تایپ می‌کنید به جایی ارسال نمی‌شود و URL تصویر هرگز واکشی نمی‌شود، به همین دلیل پیش‌نمایش به‌جای عکس یک جانگهدار نشان می‌دهد.

Hermoso تبلیغات را می‌سازد، پست‌ها را زمان‌بندی می‌کند و کمپین‌ها را اجرا می‌کند. رایگان شروع کنید، بیش از ۲۵۰ اعتبار رایگان قابل کسب، بدون کارت.

رایگان شروع کنید →   مشاهده قیمت‌ها