ابرداده های مفیدی را برای محتوای وب خود ارائه دهید و جایگاه جستجوی خود را با متا تگ ها ارتقا دهید.
خلاصه عناوین
- متا تگ ها چیست؟
- متا تگ های ضروری
- متا تگ های سفارشی
تعاریف کلیدی
- متا تگ ها اطلاعات حیاتی در مورد یک صفحه وب برای موتورهای جستجو، مرورگرها و خدمات وب ارائه می دهند.
- انواع ضروری عبارتند از توضیحات متا، نمودار باز، نمای و تگ HTTP-equiv.
- متا تگ های سفارشی انعطاف پذیری را ارائه می دهند اما نیاز به مستندات و برنامه ریزی دقیق دارند.
در کنار عنوان صفحه شما، و اسکریپت ها و شیوه نامه هایی که استفاده می کند، یک بخش سر HTML می تواند متا تگ ها را نیز شامل شود. اینها برای سئو، دسترسی و عملکرد کلی وب سایت حیاتی هستند.
نحوه استفاده از متا تگ ها را بیاموزید و از اطلاعاتی که آنها می توانند ارائه دهند مطلع شوید.
متا تگ ها چیست؟
متا تگ ها عناصری هستند که اطلاعات بیشتری در مورد یک صفحه وب ارائه می دهند. مرورگرها این ابرداده را مستقیماً نمایش نمی دهند، اما هر ابزاری می تواند از آن برای اهداف مختلف استفاده کند. این شامل موتورهای جستجو، مرورگرها و سایر خدمات وب می شود.
داده‌هایی که در متا تگ‌ها ارائه می‌کنید به بهبود رتبه‌بندی موتورهای جستجو کمک می‌کند، به واکنش‌پذیری و دسترسی وب‌سایت کمک می‌کند و نمایش صفحات شما را در رسانه‌های اجتماعی بهبود می‌بخشد.
متا تگ ها تگ های خود بسته شونده هستند. هیچ وجود ندارد زیرا آنها هیچ محتوایی را در بر نمی گیرند. آنها تمام داده های خود را در ویژگی ها دارند. می توانید متا تگ ها را به قسمت head فایل HTML خود اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
این نمونه HTML boilerplate شامل دو متا تگ در قسمت head است. آنها به ترتیب اطلاعات مربوط به مجموعه کاراکتر (UTF-8) و viewport را ارائه می دهند.
متا تگ های ضروری
اکثر متا تگ ها از ترکیبی از ویژگی های زیر برای حاوی داده های خود استفاده می کنند.
- name and content: ویژگی name مانند یک برچسب است، در حالی که ویژگی content داده های مرتبط با آن برچسب را ذخیره می کند. این یک سیستم منعطف و قابل گسترش برای ذخیره هر متادیتای مورد نیاز شما را فراهم می کند.
- ویژگی: گاهی اوقات از این ویژگی به عنوان جایگزینی برای نام استفاده می شود و تقریباً همان هدف را دنبال می کند.
- http-equiv: مخفف “HTTP equivalent”، این ویژگی یک هدر HTTP را برای مقدار مشخص شده در ویژگی محتوا تعریف می کند.
- scheme: این ویژگی که با name استفاده می شود، نوع داده را در ویژگی محتوا مشخص می کند.
متوجه خواهید شد که متا تگ های زیر معمولاً توسط سرویس های وب و مرورگرهای مختلف پشتیبانی می شوند.
برچسب توضیحات متا
این قطعه دارای حداکثر 155 کاراکتر، محتوای یک صفحه را خلاصه می کند. موتورهای جستجو اغلب آن را زیر عنوان صفحه و URL نمایش می دهند. ارائه توضیحات مختصر و دقیق برای تشویق کاربران به کلیک بر روی لینک و بازدید از صفحه شما ضروری است.
<meta name="description" content="A brief description of your page">
متا تگ های گراف را باز کنید
فیس بوک و دیگر پلتفرم های رسانه های اجتماعی از این برچسب ها استفاده قابل توجهی می کنند. آنها از اطلاعات موجود در این تگ ها برای بهبود نمایش لینک ها به صفحه شما در زمانی که کاربران آن را به اشتراک می گذارند استفاده می کنند. متا تگ های گراف باز شامل ویژگی هایی مانند og:title، og:description و og:image است:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">
متا تگ های سئو
این تگ ها اطلاعاتی را برای موتورهای جستجو فراهم می کنند و می توانند به بهبود رتبه صفحه شما کمک کنند. آنها همچنین در لیست بهترین شیوه های ضروری SEO گنجانده شده اند. آنها شامل ویژگی هایی مانند روبات ها، نویسنده و غیره می شوند. در حالی که اهمیت این برچسب ها در طول زمان کاهش یافته است، هنوز هم ضروری است که آنها را در سند HTML خود قرار دهید.
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
متا تگ Viewport
متا تگ viewport یک عنصر ضروری در طراحی وب سایت ریسپانسیو است. این به مرورگر می‌گوید که طرح‌بندی صفحه وب را با توجه به عرض دستگاه تنظیم کند و اطمینان حاصل کند که محتوا به درستی نمایش داده می‌شود و در دستگاه‌های تلفن همراه قابل خواندن است.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
متا تگ HTTP-Equiv
این متا تگ ها برای کنترل جنبه های خاصی از نحوه پردازش صفحات وب توسط مرورگرها و سرورها ضروری هستند. آنها شامل ویژگی هایی مانند refresh و X-UA-Compatible هستند. در حالی که تأثیر مستقیم آنها بر سئو ممکن است متفاوت باشد، آنها نقش مهمی در تأثیرگذاری بر رفتار و سازگاری صفحه دارند.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
شما از همه آنها به یکباره در پروژه های خود استفاده نخواهید کرد، اما همچنان مهم است که درک خوبی از متا تگ های مختلف موجود داشته باشید. همچنین استفاده از متا تگ ها مزایایی را در بهبود سازماندهی اسناد HTML فراهم می کند.
متا تگ های سفارشی
متا تگ ها انعطاف پذیر هستند زیرا:
- شما آزاد هستید که از نام دلخواه خود برای ذخیره هر داده ای که می خواهید استفاده کنید.
- مرورگرها محتوای خود را نمایش نمی دهند، اگرچه همیشه در منبع صفحه قابل مشاهده خواهد بود.
در اینجا نمونه ای از متا تگ سفارشی آورده شده است:
<meta name="target-audience" content="developers">
در این مثال، تگ سفارشی، مخاطبان هدف محتوا را مشخص می کند، که نشان می دهد توسعه دهندگان را هدف قرار می دهد.
متا تگ های سفارشی راهی برای گسترش مجموعه استاندارد تگ ها ارائه می دهند که به طور گسترده ای شناخته شده اند. با این حال، مهم است که برچسب های سفارشی مورد استفاده خود را با دقت مستند کنید و درک خوبی از نحوه استفاده از آنها داشته باشید. سایر سرویس‌ها به‌طور پیش‌فرض از آنها استفاده نمی‌کنند یا آنها را تشخیص نمی‌دهند، بنابراین احتمالاً در مقطعی کد خود را برای پردازش آنها می‌نویسید.