ماذا تفعل هذه الأداة
يكتب مولّد وسوم meta الوسوم التي توضع داخل <head> في صفحة HTML: عنصر <title>، ووصف meta، والكلمات المفتاحية والمؤلف، وتوجيه robots، والرابط الأساسي، ولون السمة، وتصريحَي viewport وcharset، والمجموعة الكاملة من وسوم Open Graph (og:title وog:description وog:image وog:url وog:type وog:site_name وog:locale)، ووسوم بطاقات X / تويتر.
أثناء الكتابة تعرض الأداة كيف قد تبدو الصفحة في نتيجة بحث وفي بطاقة اجتماعية، وتتحقق من الأخطاء الشائعة: عنوان يتجاوز نحو 60 حرفًا، ووصف مفقود أو قصير جدًا أو يتجاوز نحو 160 حرفًا، ورابط أساسي نسبي، وصورة مشاركة بلا رابط كامل، ولغة ومنطقة أو لون بصيغة خاطئة. يجري كل شيء في متصفحك، والمعاينة لا تحمّل صورتك عمدًا، لذا لا ترسل الصفحة أي طلبات شبكة.
طريقة الاستخدام
- املأ بيانات الصفحة. العنوان والوصف هما الأساس، وتعرض العدادات طولهما مقارنةً بحدود العرض المعتادة. انقر مثال لرؤية حالة كاملة.
- أدخل الرابط الأساسي للصفحة وصورة المشاركة. يُحلَّل المسار النسبي مثل
/images/cover.jpgاستنادًا إلى الرابط الأساسي. - في الخيارات، اختر نوع Open Graph (
websiteلمعظم الصفحات وarticleلتدوينات المدونة)، وحجم البطاقة، وهل يُسمح لمحركات البحث بفهرسة الصفحة وتتبّع روابطها، وأي مجموعات الوسوم تُدرج. - اقرأ التحذيرات أسفل HTML، وتحقق من المعاينات، ثم انسخ HTML إلى قالب صفحتك.
تُحفظ الخيارات في عنوان الصفحة والنموذج في متصفحك، فيمكنك العودة إليه لاحقًا أو مشاركة رابط بالإعدادات نفسها.
مثال
تنتج صفحة المثال وسومًا كهذه (مختصرة):
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">تُهرَّب القيم لـ HTML، فلا تُفسد علامات الاقتباس وعلامة & في العنوان الترميز، وتُحوَّل اللغة والمنطقة en-US إلى الصيغة en_US التي يتوقعها Open Graph.
نصائح
- اكتب عنوانًا ووصفًا فريدين لكل صفحة؛ فالتكرار عبر الموقع يصعّب التمييز بين النتائج.
- ضع أهم الكلمات في بداية العنوان، لأن العناوين الطويلة تُقتطع من نهايتها.
- يجب أن يكون الرابط الأساسي هو العنوان الدقيق المراد فهرسته، بما في ذلك البروتوكول والصيغة المفضلة مع
wwwأو بدونها. - ضبط robots على
noindexيُخرج الصفحة من نتائج البحث، لكن بشرط أن تظل الزواحف قادرة على جلبها: لا تحجبها أيضًا في robots.txt.
الأسئلة الشائعة
› ما وسوم meta المهمة فعلًا لتحسين محركات البحث؟
أهمها عنصر title ووسم meta description: فالعنوان إشارة ترتيب وهو عنوان نتيجة البحث، والوصف يُستخدم غالبًا مقتطفًا تحته. يخبر رابط canonical محركات البحث بالرابط الأساسي، ويتحكم robots في الفهرسة. يتجاهل Google وBing وسم keywords؛ فلا تضفه إلا إذا كان نظام آخر تستخدمه يقرؤه.
› ما هو Open Graph؟
Open Graph مجموعة من وسوم og: قدّمتها Facebook، تخبر الشبكات الاجتماعية وتطبيقات المحادثة بالعنوان والوصف والصورة التي تُعرض عند مشاركة رابطك. تقرؤها LinkedIn وSlack وDiscord وWhatsApp وTelegram وغيرها كثير، ويعتمد عليها X (تويتر) عند غياب وسوم twitter: الخاصة به.
› ما الحجم المناسب لصورة المشاركة؟
استخدم 1200 × 630 بكسل (نسبة تقارب 1.91:1) للبطاقات الكبيرة، وأبعد المحتوى المهم عن الحواف، وأبقِ الحجم دون بضعة ميغابايت. يجب أن يكون الرابط كاملًا ومتاحًا للعامة؛ ويُحلَّل المسار النسبي استنادًا إلى الرابط الأساسي الذي تُدخله.
› لماذا ما يزال العنوان القديم يظهر عند مشاركة الرابط؟
تخزّن المنصات الاجتماعية معاينات الروابط مؤقتًا. بعد تحديث الوسوم، اطلب من المنصة جلب الصفحة مجددًا بأداتها الخاصة، مثل Sharing Debugger من Facebook أو Post Inspector من LinkedIn، أو أضف معامل استعلام إلى الرابط الذي تشاركه.