لقد تعلمت قيمة العلامات الوصفية بالطريقة المحرجة. منذ سنوات مضت، قمت بشحن صفحة مقصودة كنت فخورًا بها، ونشرت الرابط في أماكن قليلة، وشاهدتها تظهر في كل مكان كعنوان URL مجرد بدون عنوان أو وصف أو رمز صورة مكسور. كانت الصفحة نفسها جيدة - لكنني لم أضفها أبدًا افتح الرسم البياني العلامات، لذلك عادت كل منصة اجتماعية إلى التخمين، وكل واحدة منها أخطأت في التخمين. كان المحتوى جيدًا وكان عرض الرابط غير مهم، وهو ما يعني عمليًا نقرات أقل بكثير مما تستحقه الصفحة.
العلامات الوصفية هي كتلة صغيرة من HTML التي تقرر كيف تبدو صفحتك في كل مكان باستثناء الصفحة نفسها: في نتائج Google'؛s، في فتح Slack، في بطاقة Facebook أو LinkedIn، في تغريدة. من السهل أن تخطئ لأن هناك ثلاثة معايير متداخلة - علامات تحسين محركات البحث القياسية، والرسم البياني المفتوح، وبطاقات تويتر - وكل منها يريد أسماء خصائص مختلفة قليلاً لما غالبًا ما يكون نفس المعلومات. أنا أبني تولز.ديف وأكتب الكثير من المحتوى حوله، لذلك أقوم بإعداد البيانات الوصفية باستمرار، وقمت ببناء مولد العلامات لإنتاج كتلة علامات صحيحة وكاملة وجاهزة للنسخ من مجموعة واحدة من المدخلات - مع تحذيرات طولية حتى لا أقوم أبدًا بشحن عنوان يتم اقتطاعه مرة أخرى.
ليرة تركية؛DR: تتحكم العلامات الوصفية في مقتطف البحث ومعاينات الارتباط الاجتماعي. أنت بحاجة إلى ثلاث مجموعات متداخلة - علامات تحسين محركات البحث القياسية، والرسم البياني المفتوح لمعظم الأنظمة الأساسية، وبطاقات تويتر - وهم يشاركون معظم المحتوى الخاص بهم ولكنهم يستخدمون أسماء سمات مختلفة. ال مولد العلامات يبني الثلاثة من نموذج واحد، ويحذرك عندما يمر عنوانك ~ 60 حرفًا أو يمر الوصف ~ 160، ويهرب من النص الخاص بك بأمان، ويمكنه إصدار كتلة JSON-LD مطابقة، كل ذلك في متصفحك.
ما هي العلامات الوصفية ولماذا تهم؟
العلامات التعريفية هي عناصر تعيش داخل صفحة '؛s <head> وحمل معلومات حول الصفحة بدلاً من المحتوى المعروض عليها. ال <title> العلامة و <meta name="description"> العلامة هما الأقدم والأكثر أهمية: فعادةً ما يشكلان معًا العنوان القابل للنقر وسطر الملخص الرمادي في نتيجة بحث Google. احصل عليها بشكل صحيح والنتيجة الخاصة بك تقرأ جيدًا وتكسب النقرات؛ اتركها للخارج وتقوم محركات البحث بتجميع شيء ما من نص صفحتك، وغالبًا ما يكون ذلك محرجًا.
وراء هذه الأساسيات يوجد معياران اجتماعيان. Open Graph، أصله من Facebook ولكن يتم تكريمه الآن بواسطة LinkedIn وSlack وDiscord وPinterest وWhatsApp وغيرها الكثير، يستخدم علامات مثل og:title، og:description، و og:image للتحكم في كيفية ظهور الرابط المشترك كبطاقة. تقوم بطاقات Twitter بنفس المهمة مع Twitter/X twitter: علامات. هناك تداخل كبير - العنوان والوصف متطابقان عادةً عبر الأنظمة الثلاثة - ولكن كل نظام أساسي يقرأ مساحة الاسم الخاصة به، لذلك يتعين عليك توفير الثلاثة لتغطية كل مكان قد تتم مشاركة الرابط الخاص بك فيه.
السبب وراء أهمية هذا هو النفوذ. يحصل المحتوى نفسه على قدر أكبر من التفاعل بشكل كبير عندما تكون معاينة الارتباط الخاصة به كاملة وجذابة مقابل عارية. عنوان ووصف جيد يرفعان النقرات من البحث؛ تعمل بطاقة Open Graph المناسبة على رفع النقرات من كل مشاركة اجتماعية. العلامات التعريفية عبارة عن إعداد لمرة واحدة لكل صفحة يستمر في السداد في كل مرة يتم فيها العثور على الصفحة أو مشاركتها، وهو بالضبط نوع العمل الذي يستحق القيام به بعناية. ال مولد العلامات موجود بحيث يكون الإعداد عبارة عن مهمة ملء النموذج بدلاً من مهمة النسخ واللصق من الذاكرة.
كيف يقوم منشئ العلامات الوصفية ببناء العلامات؟
يأخذ المولد مجموعة منظمة واحدة من المدخلات - العنوان والوصف والصورة وعنوان URL واسم الموقع ومجموعة من الخيارات - ويقوم بتعبئتها في ثلاث كتل منسقة من HTML. إن فهم عملية الدمج يفسر سبب إنتاج نموذج واحد للعديد من العلامات.
من حقولك الأساسية يكتب أولاً العلامات الأولية: ال <title>، الوصف التعريفي، والكلمات الرئيسية الاختيارية، والمؤلف، والروبوتات، واللغة، ولون الموضوع، والرابط الأساسي. ثم يعيد استخدام نفس العنوان والوصف والصورة لكتابة افتح كتلة الرسم البياني مع ال og: أسماء العقارات، إضافة og:type، og:url، و og:site_name. وأخيرا يكتب كتلة بطاقة تويتر مع twitter: الأسماء، بما في ذلك نمط البطاقة والمقبض المعين لها twitter:site و twitter:creator. نظرًا لأن الثلاثة جميعًا يعتمدون على نفس المدخلات، فإنهم يظلون متزامنين تلقائيًا - لا يمكنك عن طريق الخطأ إعطاء Facebook عنوانًا وتويتر عنوانًا آخر.
هناك تفصيلان يجعلان عملية اللصق آمنة للإخراج. أولاً، الحقول التي تملأها فعليًا فقط هي التي تنتج العلامات، لذلك لا يتم شحنها فارغة أبدًا content="" سمات. ثانيًا، يتم تجنب كل قيمة بتنسيق HTML: يتم تحويل علامة الاقتباس أو علامة العطف أو قوس الزاوية في الوصف الخاص بك إلى كيانه بحيث لا يمكنه الخروج من السمة وإفساد العلامات الخاصة بك. ال مولد العلامات تُصدر أيضًا بشكل اختياري كتلة بيانات منظمة JSON-LD مطابقة، وهي طريقة منفصلة ولكنها متكاملة لوصف الصفحة لمحركات البحث.
كم من الوقت يجب أن يكون العنوان والوصف التعريفي؟
هذا هو السؤال الذي يثير اهتمام معظم الأشخاص، والإجابة تدور حول عرض العرض، وليس الحد الأقصى للأحرف الصلبة. تقوم محركات البحث باقتطاع العناوين والأوصاف التي تتجاوز المساحة المخصصة لها، وبالتالي فإن الحدود العملية هي النقاط التي يبدأ بعدها قطع النص الخاص بك بحذف.
بالنسبة للعناوين، استهدف ما يقرب من 50 إلى 60 حرفًا. يعرض Google عناوين يصل عرضها إلى حوالي 600 بكسل، وهو ما يصل إلى حوالي 60 حرفًا للنص النموذجي، وبعد ذلك يقطع النهاية. بالنسبة للأوصاف الوصفية، استهدف حوالي 120 إلى 160 حرفًا؛ يمكن أن يصل عدد الأوصاف إلى 160 تقريبًا قبل الاقتطاع على سطح المكتب، ويكون الهاتف المحمول أقصر في بعض الأحيان. لا يوجد حد دقيق لأن كلاهما يتم قياسهما بالبكسل، وليس الأحرف - العنوان المليء بالأحرف العريضة يتم اقتطاعه في وقت أقرب من عنوان مليء بالأحرف الضيقة - ولكن إرشادات الأحرف قريبة بما يكفي للتصميم حولها.
ال مولد العلامات يحسب الأحرف مباشرة ويحذرك عند تجاوز الحدود: يتم وضع علامة على العنوان الذي يزيد عن 60 أو الوصف الذي يزيد عن 160 حتى تتمكن من قصه قبل شحنه. كما أنه يدفعك عندما يكون العنوان قصيرًا جدًا، لأن العنوان المكون من 20 حرفًا يضيع المساحة التي يمكنك استخدامها للكلمات الرئيسية. هذه إرشادات وليست قواعد - العنوان الطويل قليلاً ليس كارثة - ولكن رؤية العد أثناء الكتابة يبقيك صادقًا. إذا كنت تقوم بضبط العناوين والأوصاف كثيرًا، فإن عداد الكلمات مفيد للنسخ الأطول الذي يحتاج إلى الوصول إلى هدف طويل.
ما الفرق بين علامات تحسين محركات البحث والرسم البياني المفتوح وبطاقات تويتر؟
إنها تخدم مستهلكين مختلفين، ومعرفة أيهما يمنعك من التفكير في أنك انتهيت عندما قمت بتغطية واحدة فقط. وإليك كيفية اصطفاف المجموعات الثلاث للحقول التي يتشاركونها.
| غرض | علامة تحسين محركات البحث | افتح الرسم البياني | بطاقة تويتر |
|---|---|---|---|
| عنوان الصفحة | <title> |
og:title |
twitter:title |
| ملخص | meta name="description" |
og:description |
twitter:description |
| معاينة الصورة | - | og:image |
twitter:image |
| العنوان الكنسي | link rel="canonical" |
og:url |
twitter:url |
| نمط البطاقة | - | og:type |
twitter:card |
| الإسناد | meta name="author" |
og:site_name |
twitter:site |
عمود تحسين محركات البحث هو ما تقرأه Google لنتيجة البحث. عمود الرسم البياني المفتوح هو ما تقرأه معظم منصات التواصل الاجتماعي والدردشة لبطاقات الارتباط الخاصة بها. عمود تويتر هو ما يقرأه تويتر/X. التداخل واضح - العنوان والوصف يتكرران عبر الثلاثة - ولكن نظرًا لأن كل منصة تبدو فقط في مساحة الاسم الخاصة بها، فإن حذف عمود يعني أن النظام الأساسي يعود إلى التخمين. ال مولد العلامات يملأ جميع الأعمدة الثلاثة من نموذج واحد بدقة حتى لا تترك تخمينًا للمنصة أبدًا.
هل ما زلت بحاجة إلى بيانات منظمة JSON-LD؟
تجيب العلامات الوصفية والبيانات المنظمة على أسئلة مختلفة، لذا فإن الأسئلة المفيدة تكمل بعضها البعض بدلاً من استبدالها. تخبر العلامات الوصفية الأنظمة الأساسية بكيفية عرض صفحتك؛ يخبر JSON-LD محركات البحث عن موضوع صفحتك بطريقة يمكن قراءتها آليًا ويمكنها فتح نتائج غنية.
JSON-LD عبارة عن كتلة من JSON ملفوفة في ملف <script type="application/ld+json"> العلامة، التي تصف صفحتك ككيان مكتوب - موقع ويب، أو مقال، أو منتج، أو وصفة، وما إلى ذلك - بخصائص مسماة. تستخدمه محركات البحث لفهم العلاقات، وفي الحالات الصحيحة، لإظهار نتائج محسنة مثل الخطوط الثانوية للمقالة، أو تقييمات النجوم، أو أكورديون الأسئلة الشائعة التي يتم البحث عنها مباشرة. ولا يتحكم في مقتطفك بالطريقة التي يفعلها العنوان والوصف؛ فهو يضيف طبقة من المعنى في الأعلى.
ال مولد العلامات يصدر كتلة JSON-LD بداية إلى جانب العلامات التعريفية، مكتوبة كموقع ويب أو مقالة بناءً على نوع الرسم البياني المفتوح الخاص بك ويتم ملؤها من نفس الحقول. إنه أساس متين يمكنك توسيعه بخصائص خاصة بالنوع. تستحق البيانات المنظمة إضافتها عندما تريد أن تكون مؤهلاً للحصول على نتائج غنية، على الرغم من أنها ليست رافعة تصنيف سحرية - فهي تتيح الميزات، ولا تجبرها. للحصول على الصورة الأوسع لكيفية توافق هذه القطع معًا، فإن مجموعة أدوات مطور الويب يغطي Roundup الأدوات المحيطة التي أستخدمها.
حالات الاستخدام الشائعة لمولد العلامات الوصفية
إطلاق صفحة أو موقع جديد
الواضح. تحتاج كل صفحة جديدة إلى عنوان ووصف وبطاقة اجتماعية، كما أن كتابة المجموعة الكاملة من علامات تحسين محركات البحث والرسم البياني المفتوح وتويتر يدويًا أمر ممل وعرضة للخطأ. يؤدي ملء النموذج مرة واحدة ونسخ كتلة كاملة وصحيحة إلى تحويل مهمة تافهة إلى مهمة مدتها ثلاثون ثانية، وتعني تحذيرات الطول أن الصفحة تبدأ بمقتطف يتم عرضه بالكامل بدلاً من اقتطاعه في اليوم الأول.
إصلاح معاينات الارتباط السيئة أو المفقودة
عندما يظهر رابط مشترك بدون صورة أو نص خاطئ، يكون السبب دائمًا مفقودًا أو مشوهًا في علامات Open Graph. إعادة بناء العلامات باستخدام المولد - التأكد og:image، og:title، و og:description كلها موجودة وصحيحة - يصلح المعاينة. بعد التحديث، تحتاج ذاكرة التخزين المؤقت للنظام الأساسي '؛s ذات الصلة أحيانًا إلى التحديث من خلال أداة تصحيح الأخطاء الخاصة بها، لكن العلامات نفسها تظهر بشكل صحيح.
توحيد البيانات الوصفية عبر الفريق
في مشروع يضم العديد من المساهمين، تنحرف العلامات الوصفية: تحتوي إحدى الصفحات على علامات تويتر، بينما لا تحتوي صفحة أخرى على علامات تويتر، بينما تحتوي الصفحة الثالثة على وصف ضعف الطول الموصى به. يؤدي استخدام مولد واحد كمرجع لما تبدو عليه مجموعة العلامات الكاملة إلى إبقاء الجميع ينتجون نفس شكل البيانات الوصفية. يتضاعف الإخراج كتوثيق للعلامات التي يتوقعها المشروع بالضبط.
إعداد البيانات الوصفية لإطار العمل
في Next.js أو Nuxt أو React أو ما شابه ذلك، لا تقوم بلصق الخام <meta> العلامات - تقوم بتغذية القيم في واجهة برمجة تطبيقات الرأس أو البيانات التعريفية. لا يزال المولد مفيدًا كمصدر للحقيقة فيما يتعلق بالعلامات والقيم التي تحتاجها: املأ النموذج، واقرأ المجموعة الكاملة، وترجمها إلى كائن البيانات التعريفية الخاص بإطار العمل '؛. فهو يزيل التخمين حول أي منها og: و twitter: الحقول المراد تضمينها.
لماذا يتم إنشاء علامات التعريف في المتصفح؟
ال مولد العلامات يعمل بالكامل من جانب العميل. العناوين والأوصاف وعناوين URL وروابط الصور التي تدخلها تبقى في متصفحك ولا يتم تحميلها مطلقًا، وتعمل الأداة دون اتصال بالإنترنت بمجرد تحميلها. هذه الخصوصية مهمة لأنك غالبًا ما تقوم بإعداد بيانات التعريف للصفحات التي لم يتم نشرها بعد - منتج لم يتم إصداره، أو حملة مسودة '؛، أو أداة داخلية. إن لصق ذلك في مولد من جانب الخادم يعني تسليم خططك غير المعلنة إلى شخص آخر وسجلات #39؛؛ القيام بذلك داخل المتصفح يعني أنه لن يترك جهازك أبدًا. ال خصوصية البيانات في الأدوات عبر الإنترنت يشرح الدليل سبب تعاملي مع هذا على أنه غير قابل للتفاوض.
يتصل عمل البيانات الوصفية أيضًا ببعض المهام المجاورة. ال مولد البزاق يبني عنوان URL النظيف الذي يحتوي عليه الأساسي و og:url العلامات تشير إلى. ال ترميز كيانات HTML مفيد عندما تحتاج إلى الهروب يدويًا من شخصية عنيدة. و ال URL ترميز/فك تشفير URL يعالج ترميز معلمات الاستعلام التي يتم تعليقها أحيانًا على عنوان URL الأساسي. وهي تغطي معًا المهام الصغيرة والصارمة التي تحيط بشحن الصفحة بشكل صحيح.
أسئلة وأجوبة
ما هي العلامات الوصفية التي ينشئها المولد؟
يقوم بإنشاء علامات تحسين محركات البحث القياسية - العنوان والوصف والكلمات الرئيسية والمؤلف والروبوتات واللغة ولون الموضوع والأساسية - بالإضافة إلى علامات الرسم البياني المفتوح مثل og:title وog:description وog:image وog:url و علامات بطاقة Twitter المطابقة. يمكنه أيضًا إصدار كتلة بيانات منظمة JSON-LD. فقط الحقول التي تملأها تنتج علامات، بحيث يظل الإخراج نظيفًا.
إلى متى يجب أن يكون العنوان والوصف التعريفي؟
تهدف إلى الحصول على عنوان يتكون من حوالي 50 إلى 60 حرفًا ووصفًا لحوالي 120 إلى 160 حرفًا. يقوم Google باقتطاع النص بعد تلك النقاط لأنه يقيس العرض بالبكسل، وليس الأحرف الدقيقة. يقوم المولد بالعد كما تكتب ويحذرك عندما يكون من المحتمل قطع عنوان أو وصف في نتائج البحث.
ما هي علامات الرسم البياني المفتوح وهل أحتاجها؟
تتحكم علامات Open Graph في شكل صفحتك عند مشاركتها على Facebook وLinkedIn وSlack وDiscord والعديد من الأنظمة الأساسية الأخرى. بدونها، قد لا يُظهر الرابط المشترك أي صورة أو نص احتياطي غريب. إذا كنت تريد معاينات ارتباط جذابة ويمكن التنبؤ بها في أي مكان تتم فيه مشاركة المحتوى الخاص بك، يوصى بشدة باستخدام علامات Open Graph ويقوم المولد بإنشائها لك.
ما الفرق بين نوعي بطاقة تويتر؟
تعرض بطاقة الملخص صورة مصغرة مربعة صغيرة بجانب العنوان والوصف، بينما تعرض summit_large_image صورة لافتة كبيرة فوقهما. استخدم بطاقة الصورة الكبيرة عندما يكون لديك صورة مشاركة واسعة وعالية الجودة تريد السيطرة على المعاينة، واستخدم الملخص للحصول على بطاقة أكثر إحكاما. يتيح لك المولد التبديل بينهما وكتابة قيمة البطاقة الصحيحة على تويتر.
أين أضع العلامات الوصفية التي تم إنشاؤها؟
الصق الكتلة داخل العنصر الرئيسي لصفحة HTML الخاصة بك، ومن الأفضل أن تكون بالقرب من الجزء العلوي قبل البرامج النصية الأخرى. في إطار عمل مثل Next.js أو React أو Vue، أضف العلامات المكافئة من خلال واجهة برمجة تطبيقات رأس الإطار '؛s أو البيانات التعريفية باستخدام HTML الذي تم إنشاؤه كمرجع للعلامات والقيم التي يجب تضمينها بالضبط.
هل ما زلت بحاجة إلى عنوان URL أساسي إذا كان لدي علامات بيانية مفتوحة؟
نعم. يخبر الرابط الأساسي محركات البحث بعنوان URL هو الإصدار الرسمي للصفحة لتجنب مشكلات المحتوى المكرر، بينما يقوم og:url بتعيين عنوان URL المستخدم في المعاينات الاجتماعية. إنها تخدم أغراضًا مختلفة على الرغم من أن القيم متطابقة عادةً، لذا فإن إعداد كليهما يعد ممارسة جيدة.
هل مولد العلامات الوصفية مجاني وخصوصي؟
نعم. إنه مجاني تمامًا بلا حدود، وكل علامة مدمجة في JavaScript داخل متصفحك. لا يتم إرسال النص وعناوين URL وروابط الصور التي تدخلها أبدًا إلى الخادم، حتى تتمكن من إعداد البيانات التعريفية بأمان للصفحات غير المنشورة أو الداخلية.
هل تؤدي إضافة العلامات الوصفية إلى تحسين تصنيفات البحث الخاصة بي؟
تساعد العلامات الوصفية محركات البحث والمنصات الاجتماعية على عرض صفحتك بشكل صحيح، ولكنها عامل واحد من بين عوامل كثيرة. يمكن للعنوان والوصف القويين رفع معدل النقر إلى الظهور، ويمكن للبيانات المنظمة أن تتيح نتائج غنية، ومع ذلك فإن جودة المحتوى والروابط وصحة الموقع لا تزال تقود التصنيفات. تعامل مع العلامات الوصفية الجيدة باعتبارها أساسًا ضروريًا بدلاً من اختصار التصنيف.
