Softonic

مولد علامات التغليف (Meta Tags Generator)

خطوة 1 / 3
أساسيات SEO
0/60
0/160
Robots
التالي

قم بملء النموذج، بما في ذلك عنوان الصفحة، الوصف، الرابط الإلكتروني القياسي، الصورة الرسمية على وسائل التواصل الاجتماعي، اسم المؤلف، اسم الموقع، واسم الحساب على تويتر، وسيقوم المولّد بإنشاء كتلة من علامات الميتا جاهزة لللصق، تشمل أساسيات تحسين محركات البحث، وOpen Graph (للفيسبوك، لينكدإن، ديسكورد، سلاك)، وبطاقة تويتر، ورمز الصورة الرمزية (favicon) أو أيقونة Apple Touch، بالإضافة إلى خياريًا ملف Schema.org بصيغة JSON-LD مخصص للمقال أو المنتج. هذا أداة مفيدة عند إعداد موقع ثابت يدويًا أو عند إضافة بيانات وصفية إلى نظام إدارة المحتوى الذي يعرض فقط واجهة تحرير خامة من نوع <head>.

كيفية إنشاء مقطع الرأس

  1. 1

    أدخل بيانات ميتادات الصفحة

    العنوان، الوصف، عنوان URL القياسي، المؤلف، اسم الموقع.

  2. 2

    أضف عنوان URL للصورة الاجتماعية

    يُستخدم لكل من `og:image` و`twitter:image`؛ ويُعد دقة 1200×630 المثالية.

  3. 3

    خيارات الاختيار

    نوع بطاقة تويتر، تعليمات الروبوتات، لون التصميم، نوع Schema.org.

  4. 4

    قم بنسخ الناتج.

    كتلة من علامات HTML `<meta>` جاهزة لللصق بين `<head>...</head>`.

ما ينتجه المولد

<!-- Primary Meta -->
<title>Page title، Site name</title>
<meta name="description" content="A 150-character summary of the page content.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Same description or a social-optimized one">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Site name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

إرشادات حقلًا تلو الآخر

  • العنوان: من 50 إلى 60 حرفًا. شمل الكلمة المفتاحية الرئيسية، ووضع اسم العلامة التجارية في النهاية: Page title، Brand.
  • الوصف: يتراوح بين 140 و160 حرفًا؛ يُقرأ بشكل جيد بمفرده؛ تجنّب استخدام النصوص النموذجية المتكررة عبر الصفحات.
  • الصيغة القياسية: عنوان URL المطلق، بما في ذلك https://؛ ويتطابق مع og:url.
  • صورة OG: حجم لا يقل عن 1200 × 630 بكسل (النسبة المفضلة لدى فيسبوك وهي 1.91:1)، بصيغة JPG أو PNG، وألا يتجاوز حجمها 8 ميغابايت.
  • بطاقة تويتر: summary_large_image إذا كانت لديك صورة جيدة؛ summary للصورة المصغرة الصغيرة.
  • الروبوتات: index, follow للصفحات العامة؛ noindex, nofollow لمحتوى التحضير أو المحتوى الخفيف.

البنود الإضافية الاختيارية

  • يسمح تنسيق JSON-LD المستخدم في المقالات أو المنتجات لشركة جوجل عرض نتائج مفصلة تشمل المعلومات التالية: المؤلف، تاريخ النشر، السعر، وعدد النجوم في التقييمات.
  • يُلون الرمز theme-color لون عناصر التصميم الخارجية للمتصفح على نظامي أندرويد كروم وآيوس سافاري.
  • og:locale للمواقع متعددة اللغات (مثل en_US، es_ES).
  • العناصر الإضافية لـ og:type=article: article:published_time، article:author، article:section، article:tag.

الأخطاء الشائعة التي يمنعها هذا المولد

  • إغفال علامة “viewport”: تظهر الصفحة بعرض سطح المكتب على الأجهزة المحمولة، عند مستوى تكبير قدره 0.3.
  • عناوين مختلفة في الملفات <title> وog:title وtwitter:title؛ كما أن بطاقات الملكية غير متسقة.
  • عناوين صور نسبية موجودة في ملف og:image؛ لا يمكن لفيسبوك معالجتها، مما يؤدي إلى فشل عرض البطاقة.
  • يغيب عنصر og:type. تعمل القيم الافتراضية بشكل جيد، لكن فيسبوك يفضل وجود قيمة محددة بشكل صريح.

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

من الناحية التقنية، يعود تويتر إلى استخدام تقنية Open Graph عندما لا توجد علامات خاصة به؛ وبالتالي، حتى عند تحديد العلامة فقط على Open Graph، سيعرض تويتر بطاقة مناسبة. ويمكنك تخصيص التجربة عن طريق إضافة علامات خاصة بتويتر (مثل تنسيق مختلف لنسبة أبعاد الصورة).

1200×630 بكسل (نسبة 1.91:1). يعرض فيسبوك ولينكدإن هذا الصورة بالحجم الكامل، بينما يقوم تويتر بقصها لعرضها على بطاقة الملخص. لا تضع المحتوى الحيوي في الحواف؛ فالمنطقة المركزية التي تمتد بنسبة 60٪ هي المنطقة الآمنة.

لا، ترتيب الصفحات يكون جيدًا حتى بدون هذا الإضافي. يتيح تنسيق JSON-LD ميزات نتائج متكاملة (بطاقات الوصفات، قوائم الأسئلة الشائعة، قوائم المنتجات) عندما يتطابق نوع المحتوى مع مخطط Schema.org؛ لذا يمكن إضافته حيثما كان مناسبًا.

يجب وضع العناصر بين <head> و</head> في ملف HTML الخاص بك، قبل أي ملفات أسلوب خارجية أو نصوص سكريبت قد تؤخر وصول مُحلل النص إلى هذه العناصر.

لا، يتم إنشاء كل شيء محليًا في متصفحك.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

مدقق البريد الإلكتروني

تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.

مولد EditorConfig

أنشئ ملف .editorconfig بقواعد نمط المسافة البادئة وحجمها ونهاية السطر ومجموعة الأحرف والمسافات البيضاء، لتنسيق موحّد عبر بيئات التطوير المتكاملة (IDEs) والمحررات.

الأداة متاحة بلغات أخرى