أساسيات اتش.تي.إم.إل

أ. ما هو دور الوصف التعريفي Meta Description وكيف يؤثر على محركات البحث SEO؟

تحسين محركات البحث SEO - Search Engine Optimization هو عملية تُحسّن صفحات الويب لزيادة ظهورها وترتيبها في نتائج البحث. إحدى طرق تحسين محركات البحث SEO لموقعك هي إضافة وصف موجز short description لصفحة الويب باستخدام عنصر "ميتا" meta.

فيما يلي مثال لاستخدام عنصر "ميتا" meta لتعيين وصف الصفحة page description لموقع البستنة:

الكود :

code 

<meta
        name="description"
        content="اكتشف نصائح وتقنيات الخبراء للبستنة في المساحات الصغيرة، واختيار النباتات المناسبة، والحفاظ على حديقة مزدهرة."
/>
	

بضبط سمة الاسم the name attribute على الوصف description، يضمن ذلك أن تُفسّر المتصفحات ومحركات البحث search engines وأدوات الويب web tools الأخرى هذه البيانات الوصفية metadata بشكل صحيح. سمة المحتوى The content attribute هي المكان الذي ستضع فيه وصفك. يُنصح بأن تكون أوصافك قصيرة وموجزة short and concise. هذا لأن محركات البحث search engines غالبًا ما تُقصّر الوصف بناءً على تصميم صفحة النتائج page layout.

كما هو الحال مع أنواع أخرى من عناصر التعريف meta elements، لن يظهر وصف التعريف meta description على صفحة الويب نفسها. أحد الأماكن التي يمكن العثور فيها على وصف الصفحة page description هو مقتطف snippet صفحة نتائج محرك البحث search engine.

فيما يلي بعض الأمثلة على مقتطفات snippets نتائج الصفحات لمجموعات "سوبريدديت" subreddit ومستودعات "چيت هاب" Github الخاصة بـ "فري.كود.كامب" freeCodeCamp.org :

    r\FreeCodeCamp: This is the official subreddit for the freeCodeCamp.org community.
    code for free together with millions of other people...
	

    Our full-stack web development and machine learning curriculum is completely free and self-
    paced. We have thousands of interactive coding challenges to help you...
	

في الأمثلة، يظهر وصف كل صفحة أسفل روابط الموقع مباشرةً. في غضون ثوانٍ، يمكن للمستخدمين تكوين فكرة عامة general sense عن محتوى الصفحة، ثم النقر على الروابط لمزيد من المعلومات.

على الرغم من أن الأوصاف التعريفية meta descriptions لن تؤثر بشكل مباشر على ترتيب الموقع site's ranking في محرك البحث search engine، إلا أن وجود وصف قوي strong description قد يؤدي إلى زيادة عدد الزيارات more traffic إلى موقع الويب الخاص بك.

ب. ما هو دور علامات "اوپن ڨراف" Open Graph وكيف تؤثر على تحسين محركات البحث SEO؟

يُمكّنك بروتوكول "أوپن چراف" open graph protocol من التحكم في كيفية ظهور محتوى موقعك الإلكتروني عبر منصات التواصل الاجتماعي المختلفة Social Media Platforms، مثل "فيسبوك" Facebook و"لينكدإن" LinkedIn وغيرها الكثير. بتعيين خصائص "أوپن چراف" open graph هذه، يمكنك جذب المستخدمين للنقر على محتواك والتفاعل معه. يمكنك تعيين هذه الخصائص من خلال مجموعة من عناصر التعريف meta elements داخل قسم اتش.تي.إم.إل الرئيسي head.

أول خاصية الرسم البياني المفتوح (OG) المهمة التي يجب تضمينها هي العنوان title.

فيما يلي مثال لتعيين عنوان OG لصفحة freeCodeCamp الرئيسية:

code 

<meta property="og:title" content="freeCodeCamp.org" />
	

بالنسبة لخاصية property، ستحتاج إلى تحديد أنها og:title. أما السمة content فهي المكان الذي تكتب فيه العنوان الذي تريد عرضه في مواقع التواصل الاجتماعي.

الخاصية المهمة التالية في OG هي type.

فيما يلي مثال على استخدام type OG لصفحة freeCodeCamp الرئيسية:

code 

<meta property="og:type" content="website" />
	

تُستخدم خاصية type لتمثيل نوع المحتوى الذي يتم مشاركته على مواقع التواصل الاجتماعي. تشمل أمثلة هذا المحتوى المقالات والمواقع الإلكترونية ومقاطع الفيديو أو الموسيقى.

الخاصية الثالثة المهمة في OG هي image.

فيما يلي مثال على تعيين image OG لصفحة freeCodeCamp الرئيسية:

code 

<meta
	property="og:image"
	content="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
/>
	

في هذا المثال، تُشير صورة OG إلى شعار freeCodeCamp. يجب أن تكون جميع هذه الصور عالية الجودة وبأبعاد ونسب جيدة. توفر معظم منصات التواصل الاجتماعي معايير لمتطلبات الصور لمساعدتك على ضمان عرض المحتوى الخاص بك بشكل جيد على مواقعها. على سبيل المثال، تذكر صفحة التوثيق في developers.facebook.com أن:

«استخدم صورًا لا تقل عن 1200×630 بكسل للحصول على أفضل عرض على الأجهزة عالية الدقة. كحد أدنى، يجب استخدام صور بحجم 600×315 بكسل لعرض منشورات الروابط بصور أكبر.»

الخاصية الرابعة المهمة في OG هي url.

فيما يلي مثال على تعيين url الخاص بـ OG لصفحة freeCodeCamp الرئيسية:

code 

<meta
	property="og:url" content="https://www.freecodecamp.org"
/>
	

هناك العديد من خصائص OG الأخرى التي يمكنك تعيينها، مثل description وaudio وvideo وlocale. ومع ذلك، تُعد الخصائص url وimage وtype وtitle هي الأهم لإضافتها.

فكيف تؤثر خصائص OG هذه على تحسين محركات البحث؟ عند مشاركة المحتوى الخاص بك على مواقع التواصل الاجتماعي، يمكن أن تُحسّن خصائص OG المصممة جيدًا من مظهر المحتوى في خلاصات المستخدمين، مما قد يؤدي إلى زيادة معدل النقرات ويُشير لمحركات البحث إلى أن المحتوى الخاص بك ذو صلة وجذاب.