أساسيات HTML5

وسوم الميتا وOpen Graph وتحسين محركات البحث

25 دقيقة الدرس 15 من 18

ما هي وسوم الميتا؟

وسوم الميتا هي عناصر HTML غير مرئية تعيش داخل قسم <head> في صفحتك. لا تظهر على الصفحة نفسها، لكنها توفر معلومات حيوية للمتصفحات ومحركات البحث ومنصات التواصل الاجتماعي. فكر في وسوم الميتا كتعليمات تخبر الاجهزة بكيفية تفسير صفحتك وعرضها ومشاركتها. بدون وسوم ميتا مناسبة، قد تسيء محركات البحث فهم محتواك، وستبدو روابط التواصل الاجتماعي بسيطة وغير جذابة، وقد لا تعرض صفحتك بشكل صحيح على الاجهزة المحمولة. يعتمد كل موقع احترافي على قسم head مصمم بعناية لتحقيق اداء جيد في نتائج البحث ومظهر مصقول عند المشاركة.

وسوم الميتا الاساسية التي تحتاجها كل صفحة

هناك مجموعة من وسوم الميتا التي يجب ان تظهر في كل صفحة HTML تبنيها. اعلان charset يخبر المتصفح بترميز الاحرف المستخدم. وسم viewport يتحكم في كيفية تحجيم صفحتك على الاجهزة المحمولة. وسم description يوفر ملخصا تعرضه محركات البحث في نتائجها. وسم robots يخبر الزواحف ما اذا كان يجب فهرسة صفحتك وتتبع روابطها.

مثال: وسوم الميتا الاساسية

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="تعلم وسوم HTML الميتا وافضل ممارسات SEO لبناء صفحات صديقة لمحركات البحث.">
    <meta name="robots" content="index, follow">
    <title>دليل وسوم الميتا وSEO</title>
</head>

اعلان charset="UTF-8" يجب ان ياتي اولا دائما لان المتصفح يحتاج لمعرفة الترميز قبل قراءة اي محتوى اخر. وسم viewport مع width=device-width, initial-scale=1.0 ضروري للتصميم المتجاوب -- بدونه ستعرض متصفحات الهاتف صفحتك بعرض سطح المكتب ثم تصغرها مما يجعل النص غير مقروء. يجب ان يكون الوصف بين 150 و 160 حرفا لتجنب اقتطاعه في نتائج البحث.

وسوم Open Graph للتواصل الاجتماعي

عندما يشارك شخص ما رابط صفحتك على Facebook او LinkedIn او WhatsApp او منصات اخرى، تبحث تلك المنصات عن وسوم Open Graph لانشاء بطاقة معاينة غنية. بدون وسوم OG ستحاول المنصة تخمين العنوان والصورة، غالبا بنتائج سيئة. انشئ Facebook بروتوكول Open Graph لكنه يستخدم الان من قبل كل المنصات تقريبا. وسوم OG الاربعة الاساسية هي og:title و og:description و og:image و og:url.

مثال: وسوم Open Graph

<meta property="og:title" content="دليل وسوم الميتا وSEO">
<meta property="og:description" content="دليل شامل لوسوم HTML الميتا وOpen Graph وتحسين محركات البحث.">
<meta property="og:image" content="https://example.com/images/seo-guide.jpg">
<meta property="og:url" content="https://example.com/meta-tags-guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="اكاديمية تطوير الويب">

لاحظ ان وسوم OG تستخدم خاصية property بدلا من name. يجب ان تكون صورة og:image بابعاد 1200 في 630 بكسل على الاقل لافضل جودة عرض عبر المنصات. يمكن ان يكون og:type هو "website" للصفحة الرئيسية او "article" لمنشورات المدونة وصفحات المحتوى.

وسوم Twitter Card

يستخدم Twitter (الان X) مجموعته الخاصة من وسوم الميتا تسمى Twitter Cards. تعمل بشكل مشابه لوسوم Open Graph لكنها تمنحك تحكما اكبر في كيفية ظهور محتواك على المنصة. اذا لم تكن وسوم Twitter Card موجودة، سيعود Twitter لاستخدام وسوم Open Graph، لكن اضافة وسوم Twitter محددة تضمن افضل مظهر ممكن.

مثال: وسوم Twitter Card

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="دليل وسوم الميتا وSEO">
<meta name="twitter:description" content="تعلم كل شيء عن وسوم HTML الميتا وSEO.">
<meta name="twitter:image" content="https://example.com/images/seo-guide.jpg">
<meta name="twitter:site" content="@webdevacademy">

الروابط القانونية والايقونات وتحميل الموارد

وسم الرابط القانوني canonical يخبر محركات البحث اي عنوان URL هو النسخة "الرسمية" من الصفحة. هذا مهم جدا عندما يمكن الوصول لنفس المحتوى من عناوين URL متعددة. رابط favicon يعطي موقعك ايقونة مميزة في علامات تبويب المتصفح والمفضلات. لتحميل ملفات CSS و JavaScript يجب ان تفهم الفرق بين التحميل العادي و defer و async لتحسين اداء الصفحة.

مثال: وسوم الروابط وتحميل السكريبتات

<!-- الرابط القانوني -->
<link rel="canonical" href="https://example.com/meta-tags-guide">

<!-- الايقونة المفضلة -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- اوراق الانماط -->
<link rel="stylesheet" href="/css/styles.css">

<!-- التحميل المسبق للموارد الحرجة -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/js/analytics.js">

<!-- السكريبتات مع defer و async -->
<script src="/js/app.js" defer></script>
<script src="/js/tracking.js" async></script>

خاصية defer تحمل السكريبت في الخلفية وتنفذه بعد تحليل HTML بالكامل مع الحفاظ على ترتيب السكريبتات. خاصية async تحمل وتنفذ السكريبت بمجرد جاهزيته دون انتظار تحليل HTML او سكريبتات اخرى. استخدم defer للسكريبتات التي تعتمد على DOM او سكريبتات اخرى، و async للسكريبتات المستقلة مثل التحليلات. تلميح preload يخبر المتصفح بجلب المورد فورا لانه سيحتاجه قريبا. تلميح prefetch يخبر المتصفح بجلب المورد اثناء وقت الخمول للاستخدام المستقبلي المحتمل.

قسم Head كامل

اليك قسم head جاهز للانتاج يجمع كل وسوم الميتا ووسوم Open Graph و Twitter Cards وروابط الموارد في مثال واحد كامل. هذا هو النمط الذي يجب ان تتبعه في كل صفحة تبنيها.

مثال: قسم Head كامل للانتاج

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دليل وسوم الميتا وSEO | اكاديمية تطوير الويب</title>
    <meta name="description" content="دليل شامل لوسوم HTML الميتا وOpen Graph وSEO.">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://example.com/meta-tags-guide">
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Open Graph -->
    <meta property="og:title" content="دليل وسوم الميتا وSEO">
    <meta property="og:description" content="دليل شامل لوسوم HTML الميتا.">
    <meta property="og:image" content="https://example.com/images/seo.jpg">
    <meta property="og:url" content="https://example.com/meta-tags-guide">
    <meta property="og:type" content="article">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="دليل وسوم الميتا وSEO">
    <meta name="twitter:image" content="https://example.com/images/seo.jpg">

    <!-- الموارد -->
    <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="/css/styles.css">
    <script src="/js/app.js" defer></script>
</head>
ملاحظة: ترتيب العناصر في قسم head مهم. اعلان charset يجب ان يكون دائما العنصر الاول، يليه وسم viewport. وسم title يجب ان ياتي قبل وصف الميتا حتى يتمكن المتصفح من عرضه في علامة التبويب باسرع وقت ممكن.
نصيحة: استخدم ادوات مثل Facebook Sharing Debugger و Twitter Card Validator لمعاينة كيف ستبدو صفحتك عند مشاركتها على التواصل الاجتماعي. تساعدك هذه الادوات ايضا في اكتشاف وسوم Open Graph و Twitter Card المفقودة او المعدة بشكل غير صحيح قبل نشر صفحتك.
خطا شائع: استخدام نفس وصف الميتا في كل الصفحات. تتعامل محركات البحث مع الاوصاف المكررة كعلامة على محتوى منخفض الجودة. يجب ان يكون لكل صفحة وصف فريد ومحدد يلخص بدقة ما تتحدث عنه تلك الصفحة بالذات.

تمرين عملي

انشئ صفحة HTML كاملة لمنشور مدونة وهمي. ضمن جميع وسوم الميتا الاساسية (charset و viewport و description و robots)، ومجموعة كاملة من وسوم Open Graph، ووسوم Twitter Card، ورابط قانوني، وايقونة مفضلة، وخط واحد محمل مسبقا، وورقة انماط واحدة، وملف JavaScript واحد مؤجل. ثم استخدم Facebook Sharing Debugger للتحقق من وسوم Open Graph الخاصة بك ولاحظ اي تحذيرات او اخطاء يبلغ عنها. اخيرا تحقق من طول وصف الميتا للتاكد من انه يقع ضمن 150-160 حرفا.

الدرس السابق وسائط HTML5: الصوت والفيديو والتضمين
الدرس التالي رموز HTML والاحرف الخاصة
العودة للدورة