تخطَّ إلى المحتوى الرئيسي

مولّد علامات Meta وOpen Graph مجانًا

أنشئ علامات وصفية لتحسين محركات البحث وOpen Graph وترميز بطاقة Twitter باستخدام معاينة Google المباشرة والمشاركة الاجتماعية. انسخ مباشرة إلى رأس صفحتك.

يعمل دون اتصال بعد التحميل
0 · 0/580px
0 · 0/920px

الأفضل: 1200×630 بكسل، أقل من 5 MB، برابط https:// مطلق.

تضمين أيضًا
العنوان 0/580px (يُنصح 30-60)الوصف 0/920px (يُنصح 70-160)

معاينة نتيجة Google

example.com
عنوان صفحتك يظهر هنا
وصف الميتا يظهر هنا. اجعله مقنعًا لتحسين نسبة النقر من نتائج البحث.

العروض تقديرية: يقتطع Google بالبكسل لا بعدد الأحرف.

معاينة بطاقة الوسائط الاجتماعية

معاينة og:image
example.com
عنوان الصفحة
وصف الصفحة
الصق داخل <head>

املأ حقلاً واحداً على الأقل أعلاه لإنشاء العلامات الفوقية.

الاستخدامات الشائعة

  • علامات Meta لمنشورات المدونةتوليد العنوان والوصف والعلامات الاجتماعية لكي تبدو مقالاتك رائعة عند مشاركتها.
  • علامات Meta لصفحات المنتجاتاجعل صفحات المنتجات تشاركه بجمال وتقرأ جيداً في نتائج البحث.
  • علامات Meta لصفحات الهبوطتحكم بدقة في كيفية ظهور صفحات الهبوط الخاصة بحملتك عند المشاركة والبحث.
  • توليد علامات Meta لأي تطبيق ويبقم بسرعة بإنشاء مجموعة كاملة من علامات meta الرأسية لصفحة أو موقع جديد.
  • إصلاح معاينات الروابط القبيحةتوقف روابطك عن الظهور كعناوين URL عارية — أضف العلامات التي تنشئ بطاقات معاينة غنية.

كيف يعمل

يتم كل تجميع الوسوم وتحليل head مباشرة في متصفحك — دون أي خادم. تستخدم الأداة useMemo في React لبناء سلاسل HTML بشكل تفاعلي، وواجهة DOMParser الأصلية في المتصفح لقراءة وسوم الصفحة الموجودة لميزة الاستيراد/التدقيق.

  1. 1
    إدخال النموذج يقود التجميع المباشر
    أثناء الكتابة، يعيد خطاف useMemo فورًا تجميع كتلة الوسوم كاملة — العنوان، ووصف meta، وخصائص Open Graph، وسمات Twitter Card — مع تهريب الأحرف الخاصة (&، <، >، ") فيكون الإخراج آمنًا للصق مباشرة في HTML.
  2. 2
    التحقق من الروابط عبر مُنشئ URL في المتصفح
    يُتحقق من كل حقل رابط (رابط الصفحة، الصورة الاجتماعية) باستخدام مُنشئ URL المدمج في المتصفح. لا تمر إلا عناوين http:// أو https:// سليمة بأسماء مضيفين تحتوي على نقاط؛ والقيم غير الصالحة تعطّل زر النسخ وتعرض خطأ مضمّنًا.
  3. 3
    الاستيراد: DOMParser يقرأ وسوم head الموجودة
    إذا لصقت HTML <head> موجودًا لتدقيقه، تمرره الأداة عبر DOMParser في الوضع الخامل — لا تُنفَّذ نصوص برمجية ولا تُجرى طلبات شبكة. ثم تستعلم المستند المحلَّل عن محددات meta المعروفة (og:title وtwitter:description ورابط canonical وغيرها) وتملأ حقول النموذج مسبقًا بما تجده.
  4. 4
    معاينات مباشرة لـ Google والبطاقات الاجتماعية
    تعرض الأداة نتيجة بحث Google منسّقة ومعاينة بطاقة Open Graph في الوقت الفعلي باستخدام حالة النموذج نفسها، فترى بالضبط كيف سيُقتطع العنوان والوصف قبل نسخ الإخراج.

أدوات ذات صلة

الأسئلة الشائعة