آموزش تگ head در HTML
در این آموزش از سری مطالب آموزشی آموزشگاه طراحی سایت پرتو، با تمام عناصر ضروری داخل تگ head آشنا می‌شوید و یاد می‌گیرید چگونه آن را طبق استانداردهای روز دنیا بهینه کنید تا سایتتان سریع‌تر لود شود، در گوگل بهتر رتبه بگیرد و روی همه دستگاه‌ها (موبایل، دسکتاپ) عالی نمایش داده شود.
تگ head یکی از مهم‌ترین بخش‌های هر صفحه وب است که تنظیمات پایه‌ای سایت شما را تعیین می‌کند.
اگر به دنبال یادگیری عملی و پروژه‌محور این مباحث هستید، شرکت در کلاس آموزش HTML-CSS آموزشگاه طراحی سایت پرتو گزینه‌ای عالی برای شماست. در این دوره‌ه، مستقیماً روی پروژه‌های واقعی کار می‌کنید و سربرگ صفحات حرفه‌ای را از صفر می‌سازید.
ساختار کلی تگ head در HTML
تگ head همیشه بعد از !DOCTYPE html و قبل از body قرار می‌گیرد:
DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
head>
<body>
body>
html>عناصر ضروری داخل تگ head
1. تگ title – عنوان صفحه
مهم‌ترین عنصر برای سئو و نمایش در تب مرورگر.
<title>آموزش تگ Head در HTML5 | بهینه‌سازی سربرگ صفحهtitle>2. متا تگ‌های ضروری
charset (اولین متا تگ باشد):
<meta charset="utf-8">viewport (برای responsive بودن):
<meta name="viewport" content="width=device-width, initial-scale=1">description (توضیح صفحه در نتایج گوگل):
<meta name="description" content="آموزش کامل و کاربردی تگ head در HTML5 با تمرکز روی سئو، متا تگ‌ها و بهینه‌سازی سرعت صفحه">robots (کنترل ایندکس شدن):
<meta name="robots" content="index, follow">۳. لینک به فایل‌های خارجی با link
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://pan-ac.ir/current-page/">۴. استایل داخلی با style
<style>
body { font-family: 'Vazir', sans-serif; }
style>۵. اسکریپت‌ها با script
<script src="js/main.js" defer>script>متا تگ‌های پیشرفته
- Open Graph (برای نمایش بهتر در شبکه‌های اجتماعی):
<meta property="og:title" content="عنوان صفحه"> <meta property="og:description" content="توضیح کوتاه"> <meta property="og:image" content="https://yoursite.com/og-image.jpg"> - theme-color (رنگ تم مرورگر در موبایل):
<meta name="theme-color" content="#0066ff">
نکات مهم
- متا keywords را استفاده نکنید (گوگل از ۲۰۰۹ آن را نادیده می‌گیرد).
- تگ base را اجتناب کنید (مشکلات امنیتی دارد).
- ترتیب قرارگیری مهم است: charset → viewport → title → بقیه متاها.
- برای سایت‌های چندزبانه از hreflang استفاده کنید.
جمع‌بندی
تنظیم درست تگ head تفاوت بین یک سایت معمولی و یک سایت حرفه‌ای، سریع و سئو شده است.
با رعایت این نکات، هم تجربه کاربری بهبود می‌یابد و هم رتبه سایتتان در موتورهای جستجو بالاتر می‌رود.
برای یادگیری عملی این مباحث و ساخت سایت‌های واقعی، میتوانید در کلاس های طراحی سایت آموزشگاه کامپیوتر پرتو ثبت نام کنید. منتظر شما هستیم تا با هم پروژه‌های حرفه‌ای بسازیم!
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید ؟در گفتگو ها شرکت کنید!