درس نهم: متا تگ‌ها (مغزِ هوشمند سایت شما)

درس نهم: متا تگ‌ها (مغزِ هوشمند سایت شما)

تا اینجای دوره، هر چه یاد گرفتیم مربوط به ظاهر سایت (تگ‌های داخل Body) بود. اما تگ‌هایی وجود دارند که در بخش <head> قرار می‌گیرند و اطلاعات حیاتی سایت را به گوگل و مرورگرها منتقل می‌کنند.

🔤 ۱. حل مشکل فونت فارسی (Charset)

بدون این تگ، ممکن است متون فارسی شما به صورت علامت سوال یا حروف عجیب نمایش داده شود. این تگ به مرورگر می‌گوید از استاندارد جهانی UTF-8 استفاده کند:

<meta charset="UTF-8">

🔍 ۲. متای توضیحات (Description)

این تگ همان متنی است که وقتی در گوگل جستجو می‌کنید، زیر نام سایت شما نمایش داده می‌شود. نوشتن یک متن جذاب در اینجا باعث افزایش کلیک کاربران می‌شود:

<meta name="description" content="آموزش صفر تا صد برنامه نویسی وب در سایت سی‌اس لرن">

📱 ۳. تگ Viewport (واکنش‌گرایی)

بدون این کد، سایت شما در گوشی‌های موبایل بسیار ریز و بدشکل دیده می‌شود. این تگ به مرورگر دستور می‌دهد عرض سایت را با عرض صفحه گوشی هماهنگ کند:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
🚩 تمرین درس نهم:

یک فایل HTML کامل بسازید و در بخش head آن، هر سه متا تگ بالا را قرار دهید. دقت کنید که این تگ‌ها هرگز در بدنه اصلی سایت (Body) نمایش داده نمی‌شوند اما تاثیر شگرفی بر سئو دارند.