در این مقاله قصد داریم شما را با کاربرد و مفهوم تگ Meta یا متا آشنا کنیم. تگ متا برای تعریف یک سری اطلاعات از داده ها به موتور های جستجوگر، استفاده می شود. در ادامه این مقاله همراه داتیس نتورک باشید.
تگ Meta چیست؟
کلمه Meta از MetaData گرفته شده است و برای تعریف یک سری اطلاعات از داده ها به موتور های جستجوگر، استفاده می شود.
محتویات این تگ در صفحه، نمایش داده نمی شود و بر روی نحوه عملکرد آن تاثیر می گذارد.
تگ متا برای کاربران قابل نمایش نیست و ربات های گوگل یا سایر موتور های جستجوگر برای درک بهتر یک صفحه وب از این تگ استفاده می کنند.
این تگ در XHTML نیاز به تگ پایانی دارد در صورتی که در نسخه HTML این گونه نیست و نیازی به بستن آن ندارید.
مفهوم و کاربرد تگ Meta در HTML
او از همه باید بگوییم که تگ متا همیشه داخل بخش Head قرار می گیرد.
این تگ دارای چندیدن Attribute می باشد که معمولا از description و keywords و author و last modified بیشتر استفاده می شود.
به مثال زیر دقت کنید.
<head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
هر کدام از عنصر هایی که داخل کد بالا به کار رفه اند کاربرد و ویژگی خاص خود را دارند.
برای مثال به خط سوم توجه کنید، عنصر description در جاهای مختلف مثل نتایج صفحات گوگل مورد استفاده قرار می‌گیرد.
مقدار متا دیتا همیشه دارای ساختار کلید=مقدار است، مثلا در مثال بالا، کلید name است و مقدار آن می‌تواند description باشد.
انواع Attribute های تگ متا
توضیحات یا Description
در تگ Meta برای قرار دادن توضیحات صفحه از description استفاده می شود.
توضیحات صفحه بخش مهمی از سئو هست که شما در جستجو های خود پس از عناوین با آن‌ها رو به رو هستید.
در تصویر زیر یک مثال از description مشاهده می کنید که با کادر قرمز رنگ مشخص شده است.
توضیحاتی که برای کاربر نمایش داده می شود در قسمت content نوشته می شوند.
<meta name="description" content="Free Web tutorials">
برای پیاده سازی این متا دیتا هم باید خاصیت name را برابر description و توضیحات صفحه را درون خاصیت content بنویسیم.
تنظیم ویو پورت یا viewport
یکی از مهم ترین Attribute های تگ Meta ویو پورت (Viewport) می باشد که برای تنظیم و بهینه سازی وب سایت در تمام دستگاه ها از آن استفاده می شود.
تنظیم ویو پورت برای بهینه سازی وبسایت برای نمایش در همه دستگاه ها از طریق نام Viewport امکان پذیر است.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
همانطور که مشاهده کردید Viewport نیز مانند دو نمونه گذشته برای پیاده سازی باید نام viewport در خاصیت name قرار گیرد.
و توضیحات مربوط به عرض و میزان بزرگنمایی در خاصیت content قرار گیرد.
شما اگر متای viewport رو در سایت درج نکنید عملا سایت دیگه واکنش گرا (responsive) نیست و در نسخه موبایل وبسایت به خوبی نمایش داده نمیشه.
کلمات کلیدی یا Meta Keywords
برای تعریف کلمات کلیدی برای موتور جستجو از متا تگ Keywords استفاده میکنیم.
این یک متا تگ مهم در سئو بود ولی دیگر نیست و در گذشته بسیار از متای کی ورد جهت بهبود سئوی سایت و افزایش رتبه سایت در گوگل و سایر موتورهای جستجو استفاده می‌شد.
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
برای پیاده سازی متا تگ keywords آن را در خاصیت name قرار می‌دهیم و تمام کلمات کلیدی را با استفاده از خاصیت content قرار می‌دهیم و آن‌ها را با استفاده از یک «,» از هم جدا میکنیم.
توضیحات متا در وردپرس
اگر از وردپرس استفاه می کنید حتما تا به حال با کلمه توضیحات متا روبرو شده اید.
در قسمت تنظیمات نوشته وارد Edit snippet و در آن جا توضیحات متا را مشاهده خواهید کرد.
توضیحات متا یک خلاصه مختصر و جالب از مقاله شما می باشد که در نتایج جستجو به نمایش در می آید.
صفت های تگ Meta
کلید charset مقدار character_set : تعیین کننده نوع یونیکد برای سند HTML
کلید Content مقدار text : تعیین کننده مقدار خاصیت http-equiv یا خاصیت name
کلید http-equiv :
- مقدار content-type
- مقدار default-style
- مقدار refresh
تعیین کننده یک هدر HTTP برای اطلاعات خاصیت content
کلید Name :
- application-name
- author
- description
- generator
- keywords
- viewport
تعیین کننده یک نام برای متادیتا
کلید scheme مقدار format/URI : تعریف یک فرمت یا URI از مقدار موجود در صفت content.
امیدواریم این مقاله برای شما مفید بوده باشد.
داتیس نتورک را در شبکه های اجتماعی دنبال کنید.