العلامات الوصفية (Meta Tags) في HTML



6 نوفمبر، 2021 | تيتو 4 تك


  • تتيح لك HTML تحديد البيانات الأولية - معلومات إضافية مهمة حول المستند بعدة طرق. يمكن استخدام عناصر META لتضمين أزواج الاسم / القيمة التي تصف خصائص مستند HTML ، مثل المؤلف وتاريخ انتهاء الصلاحية وقائمة الكلمات الرئيسية ومؤلف المستند وما إلى ذلك.

    يتم استخدام علامة <meta> لتوفير مثل هذه المعلومات الإضافية. هذه العلامة عنصر فارغ وبالتالي لا تحتوي على علامة إغلاق ولكنها تحمل معلومات ضمن سماتها.

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

     

     

    enlightened إضافة العلامات الوصفية إلى المستندات

     

    يمكنك إضافة البيانات الوصفية إلى صفحات الويب الخاصة بك عن طريق وضع علامات <meta> داخل رأس المستند الذي يتم تمثيله بعلامات <head> و </ head>. يمكن أن تحتوي العلامة الوصفية على السمات التالية بالإضافة إلى السمات الأساسية :

     

     

    السمة 

     

    الوصف

    Name

     

    ممكن ان يكون اي شيء. تشمل الأمثلة الكلمات الرئيسية والوصف والمؤلف والمراجع وما إلى ذلك

     

    content

     

    يحدد قيمة الخاصية

     

    scheme

     

    يحدد مخططًا لتفسير قيمة الخاصية كما هو موضح في سمة المحتوى

     

    http-equiv

     

    تستخدم لرؤوس رسائل استجابة http. على سبيل المثال ، يمكن استخدام http-equiv لتحديث الصفحة أو لتعيين ملف تعريف ارتباط. تشمل القيم نوع المحتوى ، وانتهاء الصلاحية ، والتحديث 

     

     

     

    enlightened  تحديد الكلمات الرئيسية (Keywords)

     

    يمكنك استخدام علامة <meta> لتحديد الكلمات الرئيسية المهمة المتعلقة بالمستند وبعد ذلك يتم استخدام هذه الكلمات الرئيسية بواسطة محركات البحث أثناء فهرسة صفحة الويب الخاصة بك لغرض البحث.

    مثال
    فيما يلي مثال ، حيث نضيف HTML و Meta Tags و Metadata ككلمات رئيسية مهمة حول المستند.

     

    <!DOCTYPE html>
    <html>
       
       <head>
          <title> مثال علي العلامات الوصفية </title>
          <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
       </head>
       
       <body>
          <p>Hello HTML5!</p>
       </body>
       
    </html>
    

     

     

    enlightened  وصف المستند (Description)

     

    يمكنك استخدام علامة <meta> لإعطاء وصف موجز عن المستند. يمكن استخدام هذا مرة أخرى بواسطة العديد من محركات البحث أثناء فهرسة صفحة الويب الخاصة بك لغرض البحث.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي العلامات الوصفية </title>
          <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
          <meta name = "description" content = "Learning about Meta Tags" />
       </head>
    	
       <body>
          <p>Hello HTML5!</p>
       </body>
       
    </html>

     

     

    enlightened  تاريخ مراجعة المستند (Revision Date)

     

    يمكنك استخدام علامة <meta> لإعطاء معلومات حول آخر مرة تم فيها تحديث المستند. يمكن استخدام هذه المعلومات بواسطة متصفحات الويب المختلفة أثناء تحديث صفحة الويب الخاصة بك.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي العلامات الوصفية </title>
          <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
          <meta name = "description" content = "Learning about Meta Tags" />
          <meta name = "revised" content = "Tito4Tech, 06/11/2021" />
       </head>
    	
       <body>
          <p>Hello HTML5!</p>
       </body>
    	
    </html>

     

     

    enlightened  تحديث المستند (Refreshing)

     

    يمكن استخدام علامة <meta> لتحديد المدة التي سيتم بعدها تحديث صفحة الويب تلقائيًا.

    إذا كنت تريد استمرار صفحتك في التحديث بعد كل 5 ثوانٍ ، فاستخدم الصيغة التالية:

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي العلامات الوصفية </title>
          <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
          <meta name = "description" content = "Learning about Meta Tags" />
          <meta name = "revised" content = "Tito4Tech, 06/11/2021" />
          <meta http-equiv = "refresh" content = "5" />
       </head>
    	
       <body>
          <p>Hello HTML5!</p>
       </body>
    	
    </html>

     

     

    enlightened  إعادة توجيه الصفحة (Redirection)

     

    يمكنك استخدام علامة <meta> لإعادة توجيه صفحتك إلى أية صفحة ويب أخرى. يمكنك أيضًا تحديد مدة إذا كنت تريد إعادة توجيه الصفحة بعد عدد معين من الثواني.

    مثال
    فيما يلي مثال على إعادة توجيه الصفحة الحالية إلى صفحة أخرى بعد 5 ثوانٍ. إذا كنت تريد إعادة توجيه الصفحة على الفور ، فلا تحدد سمة المحتوى.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي العلامات الوصفية </title>
          <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
          <meta name = "description" content = "Learning about Meta Tags" />
          <meta name = "revised" content = "Tito4Tech, 06/11/2021" />
          <meta http-equiv = "refresh" content = "5; url = https://tito4tech.com" />
       </head>
    	
       <body>
          <p>Hello HTML5!</p>
       </body>
    	
    </html>

     

     

    enlightened  تعيين اسم المؤلف أو المالك (Author)

     

    يمكنك تعيين اسم مؤلف في صفحة ويب باستخدام علامة التعريف. انظر المثال أدناه :

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي العلامات الوصفية </title>
          <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
          <meta name = "description" content = "Learning about Meta Tags" />
          <meta name = "author" content = "Tito4Tech" />
       </head>
    	
       <body>
          <p>Hello HTML5!</p>
       </body>
    	
    </html>

     

     

    enlightened  تحديد مجموعة الأحرف (Character Set)

     

    يمكنك استخدام علامة <meta> لتحديد مجموعة الأحرف المستخدمة في صفحة الويب.

    مثال
    بشكل افتراضي ، تستخدم خوادم الويب ومتصفحات الويب ترميز ISO-8859-1 (Latin1) لمعالجة صفحات الويب. فيما يلي مثال لتعيين ترميز UTF-8 :

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي العلامات الوصفية </title>
          <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
          <meta name = "description" content = "Learning about Meta Tags" />
          <meta name = "author" content = "Tito4Tech" />
          <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
       </head>
    	
       <body>
          <p>Hello HTML5!</p>
       </body>
    	
    </html>
    

     

    لتقديم الصفحة الثابتة بأحرف صينية تقليدية ، يجب أن تحتوي صفحة الويب على علامة <meta> لتعيين تشفير Big5 :

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي العلامات الوصفية </title>
          <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
          <meta name = "description" content = "Learning about Meta Tags" />
          <meta name = "author" content = "Tito4Tech" />
          <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
       </head>
    	
       <body>
          <p>Hello HTML5!</p>
       </body>
    	
    </html>