random
أخبار ساخنة

شرح وافي لعنصر head في HTML وأثرها على السيو والأداء

Samouel Ghaly
الصفحة الرئيسية
شرح وافي لعنصر head في HTML وأثرها على السيو والأداء

شرح وافي لعنصر <head> في HTML

عنصر <head> بييجي فوق مباشرة بعد <html>، وبيحتوي على بيانات مهمة عن الصفحة زي العنوان، الترميز، الربط بملفات خارجية، وخلافه.

1. عنوان الصفحة باستخدام <title>

العنصر ده بيظهر في تاب المتصفح، وهو مهم جدًا للـ SEO.

<title>عنوان صفحتك هنا</title>

2. عنصر <meta>

بيستخدم لإضافة معلومات مخفية مثل الترميز والوصف والكلمات المفتاحية.

<meta charset="UTF-8">
<meta name="description" content="وصف الصفحة لأرشفة محركات البحث">
<meta name="keywords" content="HTML, head, meta">
<meta name="author" content="مهندس صموئيل">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="60">

3. ربط ملفات خارجية باستخدام <link>

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="alternate" href="feed.xml" type="application/rss+xml">

4. تحديد الرابط الأساسي باستخدام <base>

وبتستخدم لو عايز الروابط في الصفحة تبقى مرجعة لأساس معين، وكمان تحديد طريقة الفتح بتاعتها. 

<base href="https://www.example.com/" target="_blank">

5. إضافة تنسيقات مباشرة باستخدام <style>

<style>
  body { margin: 0; color: #333; }
  h2 { margin-top: 30px; }
</style>

6. إضافة سكريبتات جافاسكربت باستخدام <script> و<noscript> 

<script src="app.js" defer></script>
<script>
  console.log("JavaScript داخل head!");
</script>
<noscript>
يرجى تفعيل الجافاسكربت لمشاهدة كامل المحتوى.

</noscript>

تأثير عناصر <head> على الأداء و الـ SEO

العنصر التأثير
<meta charset> يحدد الترميز لتفادي أخطاء عرض الأحرف.
<title> مؤشر رئيسي لمحركات البحث.
<meta name="description"> الوصف اللي بيظهر في نتائج البحث.
<link rel="stylesheet"> ربط ملفات CSS خارجية للمظهر.
<script defer> تحميل أسرع بدون تعطيل الخط.

نموذج كامل لاستخدام كل العناصر

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="أمثلة شاملة لعناصر head في HTML">
  <meta name="keywords" content="HTML, head, meta">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال للعناصر في head</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.png">
  <base href="https://www.example.com/" target="_self">
  <style>
    body { font-family: sans-serif; }
    h1 { color: #555; }
  </style>
  <script src="app.js" defer></script>
  <noscript>يُرجى تفعيل السكربت لمواصلة التصفح</noscript>
</head>
<body>
  <h1>أهلا بك في المثال الشامل</h1>
  <p>ده مثال كامل لتوضيح عناصر <head> في صفحة HTML.</p>
</body>
</html>

وبكده تكون حضرتك حصلت على محتوى متكامل من حيث المعلومات، الأكواد، والأمثلة، مصمم للنشر على بلوجر والربح من AdSense.

google-playkhamsatmostaqltradent