Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.
<!-- Open Graph / Facebook / LinkedIn / Slack / Discord --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" /> <meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" /> <meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." /> <meta property="og:site_name" content="Toolz" /> <meta property="og:image" content="https://toolz.dev/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" /> <!-- X / Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" /> <meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" /> <meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." /> <meta name="twitter:image" content="https://toolz.dev/og-image.png" /> <meta name="twitter:site" content="@toolz" /> <meta name="twitter:creator" content="@toolz" />

toolz.dev
Open Graph Preview: Test Social Cards Before You Ship
Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block.

toolz.dev
Open Graph Preview: Test Social Cards Before You Ship
Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a...

Open Graph Preview: Test Social Cards Before You...
Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your...
toolz.dev

Open Graph Preview: Test Social Cards Before You Ship
toolz.dev
Toolz
Open Graph Preview: Test Social Cards Before You Ship
Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block.

Toolz
Open Graph Preview: Test Social Cards Before You Ship
Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block.

Recommended image: 1200x630 (1.91:1), served over HTTPS at an absolute URL. Platforms cache scraped previews, so re-scrape the URL in each platform's debugger after you ship a change.

توضح لك أداة المعاينة Open Graph الشكل الذي سيبدو عليه الرابط المشترك قبل نشره. تقوم بإدخال حقول og:title وog:description وog:image وog:url وTwitter Card - أو لصق كتلة العلامات التعريفية الموجودة لديك بالفعل - وتعرض الأداة بطاقات اجتماعية تقريبية لـ Facebook وX/Twitter وLinkedIn وSlack وDiscord جنبًا إلى جنب. بدلاً من دفع الصفحة مباشرة ومشاركتها واكتشاف أن العنوان مقطوع إلى النصف أو أن الصورة لا يتم تحميلها أبدًا، ترى المشكلة بينما لا يزال بإمكانك إصلاحها.
بروتوكول Open Graph هو المفردات المشتركة التي يستخدمها كل نظام أساسي تقريبًا لإنشاء تلك البطاقات. تزور المكشطة صفحتك، وتقرأ og: العلامات الوصفية في <head>، وتقوم بتجميع معاينة منها. المشكلة هي أن كل منصة تعرض نفس العلامات بشكل مختلف: X يقتطع الأوصاف بحوالي 110 أحرف بينما يظهر Facebook بالقرب من 155، ويخفي LinkedIn الوصف بالكامل على بعض الأسطح، ويقوم Slack بدمج كل شيء في مرفق مضغوط. يمكن تشويه الحقل الذي يبدو جيدًا في بطاقة واحدة في بطاقة أخرى، ولهذا السبب فإن معاينتها جميعًا مرة واحدة هو الفحص الوحيد الموثوق به.
تعمل هذه الأداة بالكامل في متصفحك ولا تجري أي مكالمات عبر الشبكة إلى موقعك. لا يجلب عنوان URL الخاص بك أو يقوم بكشط صفحتك - فهو يعمل من العلامات التي تقدمها له، إما مكتوبًا في النموذج أو يتم لصقه بتنسيق HTML خام ويتم تحليله محليًا. وهذا يعني أنه يمكنك التحقق من صحة البيانات التعريفية للصفحات الموجودة خلف تسجيل الدخول، أو في مجال التدريج، أو التي لم يتم نشرها على الإطلاق، ولا يتم تحميل أي شيء تدخله على الإطلاق.
املأ OG: العنوان ، و OG: الوصف ، و OG: image ، و og: url ، وحقول بطاقة Twitter. إذا كانت الصفحة تحتوي بالفعل على علامات وصفية ، فقم بلصق HTML الخام في مربع التحليل وتقوم الأداة بتحميل كل علامة تم التعرف عليها في النموذج نيابة عنك.
يحصل كل حقل على حالة تمرير أو تحذير أو فشل مقابل حدود النظام الأساسي الحقيقية: طول العنوان وطول الوصف لكل من X و Facebook ، وما إذا كان عنوان URL للصورة مطلقًا و HTTPS ، وما إذا كانت مقابضك صالحة.
راجع بطاقات Facebook و X Large-Image و X Summary و LinkedIn و Slack و Discord. قم بقص عنوانك أو وصفك حتى تتم قراءة كل بطاقة بشكل نظيف ، وتأكيد تحميل الصورة عند نسبة العرض إلى الارتفاع الصحيحة.
انسخ كتلة العلامة <meta> النهائية والصقها في رأس صفحتك ، أو قم بإدخال القيم في واجهة برمجة تطبيقات بيانات إطار العمل الخاصة بك. ثم أعد كشط عنوان URL في كل مصحح أخطاء النظام الأساسي لمسح أي معاينة مخبأة.
يعرض بطاقات Facebook و X (كلا أنماط البطاقة) و LinkedIn و Slack و Discord من نفس مجموعة العلامات حتى تتمكن من تحديد النظام الأساسي الذي ينكسر
قم بإسقاط رأس صفحة أو كتلة فضفاضة من meta html ويقوم المحلل اللغوي المدمج بتحميل كل OG: و Twitter: علامة تتعرف عليها مباشرة في النموذج
تمرير حالات التمرير والتحذير والفشل لكل حقل مقابل حدود النظام الأساسي الحالية ، بما في ذلك حدود الوصف المختلفة المستخدمة بواسطة X و Facebook
يشير إلى المسارات النسبية والصور غير HTTPS والصور المفقودة ويذكرك بالتوصية 1200x630 (1.91: 1) التي تفترضها كل بطاقة كبيرة الحجم
Generate SEO, Open Graph, and Twitter Card meta tags for any page, with live preview and length checks
Build valid schema.org JSON-LD for Organization, Article, Product, FAQ, LocalBusiness, Breadcrumb, and more - copy the ready-to-paste script tag. 100% client-side.
Check one name across hundreds of TLDs at once. RDAP first, WHOIS fallback, and a verdict of available, taken or unknown — never a guess
Break any URL into its parts - scheme, host, port, path, query, and fragment - and read the query string as a clean, decoded key-value table.
0 comments
No comments yet. Be the first to share your thoughts!