PricingLoginStart free
HTML Academy · درس

meta charset وviewport وauthor وdescription

إضافة وسوم meta الأساسية للعرض وقابلية الاكتشاف

الدرس 2 من 413 خطوة

meta charset وviewport وauthor وdescription درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

عنصر meta

يوفر العنصر <meta> بيانات وصفية عن الصفحة. وهو عنصر فارغ، ولا يملك وسم إغلاق:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn HTML5 from scratch.">
  <meta name="author" content="Jane Smith">
</head>

meta charset

يعلن ترميز الأحرف:

<meta charset="UTF-8">
<!-- Must be:
  - Inside <head>
  - Within the first 1024 bytes of the file
  - Best: the first tag inside <head>
  - Always use UTF-8 for web pages
-->

meta viewport

يتحكم وسم meta viewport في العرض على الأجهزة المحمولة:

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Without this, mobile browsers render at desktop width (900-980px)
     then scale down — everything looks tiny -->
<!-- width=device-width: viewport width = device width -->
<!-- initial-scale=1: start at 1:1 zoom -->
<!-- This is REQUIRED for responsive design to work -->

قيم محتوى viewport

قيم أخرى لـ viewport قد تراها:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<!-- maximum-scale: max zoom level users can reach -->
<!-- minimum-scale: min zoom level -->

<!-- AVOID: user-scalable=no
  It prevents users from zooming, which is a WCAG 1.4.4 violation -->
<!-- <meta name="viewport" content="user-scalable=no"> BAD -->

meta description

يوفر وسم meta description ملخصًا يُستخدم في نتائج البحث:

<meta name="description" content="
  Learn HTML5 semantic elements, forms, accessibility,
  and modern web APIs. Practical lessons for real-world developers.
">
<!-- Recommended: 150-160 characters -->
<!-- Google may show this in the SERP snippet -->
<!-- Not a direct ranking factor, but affects click-through rate -->
<!-- Make every page's description unique and compelling -->

meta author

يحدد وسم meta author مؤلف الصفحة:

<meta name="author" content="Jane Smith">
<!-- Rarely used by search engines today -->
<!-- Schema.org Person is more semantic for author attribution -->
<!-- Still good practice for internal content management -->

meta keywords (مهمل)

كان وسم meta keywords مهمًا في السابق، لكنه أصبح الآن متجاهلًا:

<!-- Old and ignored by Google since 2009: -->
<meta name="keywords" content="html5, web development, tutorial">
<!-- Don't waste time on this -->
<!-- Focus on quality content and real on-page keywords instead -->

meta http-equiv

تحاكي السمة http-equiv ترويسات استجابة HTTP:

<!-- Redirect after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=/new-page">

<!-- Set Content Security Policy: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Cache control (mostly superseded by real HTTP headers): -->
<meta http-equiv="cache-control" content="no-cache">

meta robots

يتحكم وسم meta robots في زحف محركات البحث:

<meta name="robots" content="index, follow">
<!-- index: allow indexing (default) -->
<!-- follow: follow links (default) -->
<!-- noindex: don't add to search index -->
<!-- nofollow: don't follow links -->
<!-- noarchive: don't show cached version -->

<!-- Page you don't want indexed: -->
<meta name="robots" content="noindex">

معاينة Open Graph للبيانات الوصفية

قسم head مُعدّ جيدًا:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Forms Guide — CoddyKit</title>
  <meta name="description" content="Master HTML5 forms: inputs, validation, and accessibility.">
  <meta name="author" content="CoddyKit Team">
  <link rel="canonical" href="https://coddykit.com/html/forms">
</head>

meta generator

يحدد وسم meta generator الأداة التي أنشأت الصفحة:

<!-- WordPress adds: -->
<meta name="generator" content="WordPress 6.4">
<!-- Jekyll adds: -->
<meta name="generator" content="Jekyll v4.3.2">
<!-- You can add your own: -->
<meta name="generator" content="MySSG v1.0">
<!-- Security note: this reveals your CMS version to attackers
     Some recommend removing it -->

تحقق سريع

أي وسم meta ضروري للتصميم المتجاوب على الأجهزة المحمولة؟

أجب عليها في الدرس التفاعلي

مراجعة: وسوم meta

وسوم meta الأساسية:

  • <meta charset="UTF-8"> — يكون دائمًا أول وسم في head
  • <meta name="viewport" ...> — مطلوب للتصميم المتجاوب
  • <meta name="description"> — مقتطف SERP من 150 إلى 160 حرفًا
  • <meta name="author"> — نسبة المحتوى إلى مؤلفه
  • أصبح keywords قديمًا؛ ويتحكم robots في برامج الزحف
البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
40
الدروس
159
ابدأ التعلم مجانًاعرض الدورة الكاملة

الأسئلة الشائعة

هل درس «meta charset وviewport وauthor وdescription» مجاني؟

نعم — نص درس «meta charset وviewport وauthor وdescription» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «meta charset وviewport وauthor وdescription»؟

إضافة وسوم meta الأساسية للعرض وقابلية الاكتشاف تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «meta charset وviewport وauthor وdescription»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. العنصر title ودوره في SEO
  2. meta charset وviewport وauthor وdescription
  3. عناوين URL الأساسية وmeta robots
  4. Favicon وApple Touch Icon
← العودة إلى HTML Academy