العلامة الوصفية ومولد الرسم البياني المفتوح
أنشئ العلامات الوصفية التي تحتاجها الصفحة لنتائج البحث والمعاينات الاجتماعية: العنوان، والوصف، وعنوان URL الأساسي، وOpen Graph، وعلامات بطاقة Twitter. املأ الحقول، وانظر إلى مجموعة العلامات أثناء الكتابة، ثم الصق الكتلة في رأس صفحتك.
Enter Page Metadata Details
Google & Social Card Live Preview
https://mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
<!-- Primary Meta Tags --> <title>My Awesome Website — Premium Tools</title> <meta name="title" content="My Awesome Website — Premium Tools" /> <meta name="description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://mywebsite.com" /> <meta property="og:title" content="My Awesome Website — Premium Tools" /> <meta property="og:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="og:image" content="https://mywebsite.com/og-image.png" /> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://mywebsite.com" /> <meta property="twitter:title" content="My Awesome Website — Premium Tools" /> <meta property="twitter:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="twitter:image" content="https://mywebsite.com/og-image.png" />
كيف يعمل
- 1
أدخل عنوان الصفحة والوصف الذي تريد أن تظهره محركات البحث والمنصات الاجتماعية.
- 2
أضف عنوان URL الأساسي وعنوان URL لصورة المعاينة - يجب أن يكون كلاهما مسارين مطلقين، وليس مسارين نسبيين.
- 3
قم بمراجعة العلامات التي تم إنشاؤها، بما في ذلك Open Graph ومكافئات بطاقة Twitter.
- 4
انسخ الكتلة والصقه داخل عنصر الرأس في صفحتك.
المزايا والفوائد الرئيسية
مصدر واحد وثلاثة مستهلكين
يتم إنشاء نتائج البحث وبطاقات Open Graph وTwitter معًا من نفس المدخلات، لذا لا يمكن أن تنفصل عن بعضها البعض.
أسماء العلامات الصحيحة
يستخدم Open Graph سمات الخاصية ويستخدم Twitter سمات الاسم - وهو تمييز يسهل الخطأ فيه يدويًا.
ردود فعل فورية
يتم تجميع العلامة أثناء الكتابة، حتى تتمكن من رؤية الكتلة النهائية قبل لصقها.
إخراج ملحد الإطار
علامات HTML عادية تعمل في موقع ثابت أو قالب أو حقل CMS أو صفحة مكتوبة بخط اليد.
فيما يستخدمه الناس
- إضافة علامات معاينة اجتماعية إلى الصفحة المقصودة التي يتم مشاركتها حاليًا كبطاقة فارغة.
- تعيين عنوان URL أساسي على صفحة يمكن الوصول إليها عبر أكثر من عنوان واحد.
- إعداد العلامات الوصفية لموقع العميل قبل تسليمه.
- التعرف على العلامات المهمة بالفعل من خلال رؤيتها يتم إنشاؤها معًا.
التنسيقات والخيارات المدعومة
| العلامات التي تم إنشاؤها | العنوان، الوصف التعريفي، الرابط الأساسي، الرسم البياني المفتوح (og:title، og:description، og:url، og:image)، علامات بطاقة Twitter |
|---|---|
| الإخراج | HTML عادي تقوم بلصقه في عنصر الرأس |
الخصوصية ومعالجة البيانات
يتم تجميع العلامات من مدخلاتك في المتصفح. لا يتم إرسال عناوين URL والنصوص التي تدخلها إلى خادمنا أو تسجيلها.
الحدود والأشياء التي يجب معرفتها
- تتم إعادة كتابة العناوين والأوصاف بواسطة محركات البحث عندما ترى أن مقتطفًا مختلفًا أكثر فائدة - تعتبر هذه العلامات مدخلات قوية وليست ضمانًا.
- يجب أن تكون صورة المعاينة عبارة عن عنوان URL مطلق يمكن الوصول إليه بشكل عام. لا تستطيع برامج الزحف الاجتماعي جلب مضيف محلي أو صفحة تمت مصادقتها أو مسار نسبي.
- معاينات ذاكرة التخزين المؤقت للمنصات الاجتماعية. بعد تغيير العلامات، تحتاج عادةً إلى إعادة مسح عنوان URL في أداة تصحيح الأخطاء الخاصة بالمنصة قبل ظهور البطاقة الجديدة.
استكشاف الأخطاء وإصلاحها
لا تزال البطاقة الاجتماعية تعرض المحتوى القديم
هذه ذاكرة تخزين مؤقت من جانب النظام الأساسي. قم بإعادة نسخ عنوان URL في مصحح أخطاء مشاركة النظام الأساسي لفرض التحديث - فتغيير العلامات وحده لا يؤدي إلى مسحها.
لا تظهر أي صورة في بطاقة المعاينة
تأكد من أن og:image هو عنوان URL مطلق لـ HTTPS، ويمكن الوصول إليه بشكل عام، وكبير بدرجة كافية (1200 × 630 هو المعيار الآمن). يتم إسقاط الصور الصغيرة أو المحظورة بصمت.
يعرض جوجل وصفا مختلفا
يقوم Google بإنشاء مقتطف يعتبره أكثر صلة بالاستعلام. تأكد من أن الوصف يلخص الصفحة بدقة؛ سيتم استخدامه في كثير من الأحيان عندما يطابق النية.
Meta Tag Generator — Title, Description & Open Graph Tags
Generate a complete set of SEO meta tags — title, meta description, canonical, Open Graph and Twitter Card — and copy them straight into your page head. A free meta tag generator with live length feedback so nothing gets truncated in the search snippet.
- Title and meta description with length guidance — live character counts keep you inside the roughly 60-character title and 155-character description that search engines display without cutting off.
- Open Graph tags for social sharing — og:title, og:description, og:image and og:url control exactly how a link previews on Facebook, LinkedIn, Slack and WhatsApp.
- Twitter Card markup — summary and large-image card tags so shared links render with a proper preview instead of a bare URL.
- Copy-paste ready HTML — the output is a valid block of head markup, ready for a template, a static site or a CMS SEO field.
- No sign-up, no plugin — everything is generated in your browser — a practical option when the site has no SEO plugin installed.
Free and unlimited. Generate the matching permalink with the URL Slug Generator and the site icon with the Favicon Generator.
الأسئلة المتداولة
Why does Google show a different description than mine?
Google rewrites snippets when it judges another passage more relevant to the query. A description that accurately summarises the page gets used far more often than one written purely for keywords.
What size should the og:image be?
1200x630 is the safe standard. It must be an absolute, publicly reachable HTTPS URL — social crawlers cannot fetch localhost, a relative path or a page behind authentication.
I updated my tags but the shared card is unchanged. Why?
Social platforms cache previews. Re-scrape the URL in the platform's own sharing debugger to force a refresh; changing the tags alone will not clear their cache.
أين يجب أن ألصق هذه العلامات الوصفية؟
الصق مقتطف HTML الذي تم إنشاؤه داخل قسم <head> بصفحات الويب الخاصة بك.
لماذا يعرض Google وصفًا مختلفًا عن وصفي؟
تعيد Google كتابة المقتطفات عندما تحكم على فقرة أخرى أكثر صلة بالاستعلام. يتم استخدام الوصف الذي يلخص الصفحة بدقة أكثر بكثير من الوصف المكتوب للكلمات الرئيسية فقط.
ما الحجم الذي يجب أن يكون عليه og:image؟
1200x630 هو المعيار الآمن. يجب أن يكون عنوان URL HTTPS مطلقًا ويمكن الوصول إليه بشكل عام - لا يمكن لبرامج الزحف الاجتماعي جلب مضيف محلي أو مسار نسبي أو صفحة خلف المصادقة.
لقد قمت بتحديث علاماتي ولكن البطاقة المشتركة لم تتغير. لماذا؟
معاينات ذاكرة التخزين المؤقت للمنصات الاجتماعية. أعد كشط عنوان URL في مصحح أخطاء المشاركة الخاص بالمنصة لفرض التحديث؛ لن يؤدي تغيير العلامات وحده إلى مسح ذاكرة التخزين المؤقت الخاصة بها.
الأدوات ذات الصلة
مولد رمز الاستجابة السريعة
قم بتحويل أي رابط أو نص إلى رمز QR قابل للمسح الضوئي
مولد CSS Glassmorphism
إنشاء تأثيرات واجهة المستخدم الزجاجية الحديثة ورمز CSS
محول حالة النص
قم بالتبديل بين العلوي والسفلي والعنوان وحالة الجمل
مولد العنصر النائب لوريم إيبسوم
إنشاء نص نائب وهمي لتخطيطات واجهة المستخدم