ویژگی name تگ <meta> HTML
تعریف و استفاده
name ویژگی که نام داده‌های متا را تعیین می‌کند.
name ویژگی که تعیین می‌کند ویژگی content نام مقادیر.
از طریق استفاده از name و ویژگی content ویژگی، می‌تواند از طریق جفت نام/مقدار داده‌های متا برای مستند تعریف کند. در اینجاname ویژگی نشان‌دهنده نوع داده‌های متا است، در حالی که ویژگی content ویژگی برای ارائه مقادیر استفاده می‌شود.
جدول زیر چندین نوع از داده‌های پیش‌تعریف شده را نشان می‌دهد.
توجه داشته باشید:اگر تنظیم شد ویژگی http-equiv، اگر تنظیم شد name ویژگی‌ها.
توجه:HTML5 روشی را معرفی کرده است که طراحان وب بتوانند از تگ <meta> برای کنترل viewport (منطقه قابل مشاهده کاربر در وب‌سایت) استفاده کنند (لطفاً به مثال زیر "تنظیم viewport" مراجعه کنید).
مثال
ویژگی name را برای تعریف توضیحات، کلمات کلیدی و نویسنده مستند HTML استفاده کنید. همچنین باید viewport را تعریف کنید تا اندازه صفحه و نسبت انبساط برای دستگاه‌های مختلف را کنترل کنید:
<head> <meta name="description" content="تدریس وب رایگان"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
structures
<meta name="value">
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| application-name | نام برنامه وبی که صفحه نمایندگی می‌کند را مشخص می‌کند. |
| author |
نام نویسنده مستند را مشخص می‌کند. به عنوان مثال: <meta name="author" content="YK Investment"> |
| description |
توضیح صفحه را مشخص می‌کند. موتورهای جستجو می‌توانند این توضیح را برای نمایش نتایج جستجو انتخاب کنند. به عنوان مثال: <meta name="description" content="تدریس وب رایگان"> |
| generator |
یک بسته نرم افزاری که برای تولید مستندات استفاده می‌شود (برای صفحات دستیار استفاده نمی‌شود). به عنوان مثال: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
لیست کلمات کلیدی مرتبط با صفحه را با کاما جدا کنید. به موتورهای جستجو در مورد محتوای صفحه اطلاع دهید. توجه:همیشه باید کلمات کلیدی را مشخص کنید (موتورهای جستجو نیاز به طبقه‌بندی صفحات دارند). به عنوان مثال: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | کنترل منظره دید (منظره دید کاربر وب‌سایت). |
توضیحات
علاوه بر شش نوع داده‌های متا پیش‌تعریف شده در جدول، می‌توان از گسترش‌های داده‌های متا نیز استفاده کرد. برای دسترسی به لیستی که به طور مداوم به‌روزرسانی می‌شود، به این صفحه مراجعه کنید:
http://wiki.whatwg.org/wiki/MetaExtensions
برخی از این گسترش‌ها بیشتر استفاده می‌شوند، در حالی که برخی دیگر فقط کاربرد بسیار محدودی دارند و تقریباً هیچ‌کس از آن‌ها استفاده نمی‌کند. داده‌های متا robots به وضوح در گروه اول قرار دارد. نویسندگان مستندات HTML می‌توانند از آن برای اطلاع دادن به موتورهای جستجو چگونه با مستند خود رفتار کنند. به عنوان مثال:
<meta name="robots" content="noindex">
این نوع داده‌های متا سه مقدار رایجی دارد که اکثر مرورگرها آن‌ها را می‌شناسند:
- noindex - به معنای این است که این صفحه را در فهرست نویسی نکنید
- noarchive - به معنای این است که این صفحه را در آرشیو یا کاشی‌بندی نکنید
- nofollow - به معنای این است که از پیگیری لینک‌های این صفحه خودداری کنید
تعداد کمتری از داده‌های متا موجود است، توسعه‌دهندگان باید لیست آنلاین را بخوانند تا ببینند چه چیزی برای پروژه خود قابل استفاده است.
توضیحات
برای اینکه به موتورهای جستجو بگویید که چگونه محتوا را دسته‌بندی و طبقه‌بندی کنند، روش اصلی در گذشته استفاده از داده‌های متا keywords بود. اکنون، اهمیت داده‌های متا keywords به شدت کاهش یافته است زیرا می‌تواند برای ایجاد توهم ارتباط محتوای صفحه با کلمات کلیدی مورد سوءاستفاده قرار گیرد. بهترین راه برای اینکه خالقان بخواهند محتوای خود در چشم موتورهای جستجو بهتر دیده شود، استفاده از پیشنهادات خودشان است. بیشتر موتورهای جستجو راهنماهایی برای بهینه‌سازی صفحات وب یا وب‌سایت‌های کامل ارائه می‌دهند.
گوگل: راهنمای مبتدی SEO (بهینه‌سازی موتور جستجو)
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
بایدو: راهنمای بهینه‌سازی موتور جستجو بایدو
تنظیم منظره دید
منظره دید کاربر وب‌سایت است. این می‌تواند از دستگاه به دستگاه متفاوت باشد - معمولاً در تلفن‌های همراه کوچکتر از صفحه نمایش کامپیوتر است.
شما باید این <meta> عناصر را در تمام صفحات وب خود شامل شوید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این توضیحی را برای مرورگر ارائه می‌دهد که چگونه باید اندازه صفحه و نسبت بزرگنمایی را کنترل کند.
width=device-width بعضی از تنظیمات صفحه‌ای که عرض آن دنبال عرض صفحه دستگاه است (بسته به دستگاه متفاوت است).
initial-scale=1.0 بعضی از تنظیمات اولیه درجه بزرگنمایی صفحه در بارگذاری اولیه مرورگر.
این یک مثال از وب‌سایتی است که بدون تگ meta viewport است و همچنین همان وب‌سایت با تگ meta viewport:
توجه:اگر از تلفن موبایل یا تبلت برای مشاهده این صفحه استفاده می‌کنید، می‌توانید بر روی دو لینک زیر کلیک کنید تا تفاوت‌ها را مشاهده کنید.
شما می‌توانید درآموزش طراحی وب واکنش‌گرا -视口بیشتر درباره视口 بیاموزید.
پشتیبانی از مرورگر
| Chrome | Edge | Firefox | Safari | opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
