لیست کاربردی Meta Tagها در HTML

لیست کاربردی Meta Tagها در HTML
آفلاین
user-avatar
احسان رضوی
12 فروردین 1400, خواندن در 3 دقیقه

اگر با HTML آشنایی داشته باشید، به احتمال زیاد با Meta Tagها نیز آشنایید و اطلاع دارید که Meta Tagها یا Meta Elementها تگ‌هایی می‌باشند که در بخش Head سند HTML ما قرار می‌گیرند و حاوی اطلاعات مهم و کاربردی‌اند که می‌توانند به خزنده‌های موتورهای جست و جو، به خصوص موتور جست و جوی گوگل که معمولاً ما سعی می‌کنیم وب‌سایت خود را برای این موتور جست و جو بهینه کنیم، کمک کنند تا جزئیات دقیق‌تری از سند HTML ما به دست آورند و به درستی آن را ایندکس نمایند و به این طریق اطلاعات صحیح‌تری در اختیار افرادی که به این اطلاعات نیاز دارند، قرار می‌گیرد که به خودی خود می‌تواند یکی از عوامل رشد وب‌سایت‌ها باشد.

متا تگ‌ها چه کاری انجام می‌دهند؟

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

آیا استفاده از متا تگ‌ها در سئوی سایت اهمیت دارند؟

بدون شک متا تگ‌ها این پتانسیل را دارند که به عنوان یکی از مهم‌ترین موارد جهت SEO (سئو) وب سایت مورد توجه خاصی قرار گیرند. پس بدیهی است که وبمستران بسته به نیاز خود لازم داشته باشند که به لیست کاملی از متا تگ‌ها دسترسی پیدا کنند.
به همین دلیل در این نوشته سعی کردم لیست کاربردی‌ای از متا تگ‌ها انتخاب کنم و در اختیار علاقه‌مندان قرار دهم تا بتوانند در موارد مورد نیاز از آن بهره ببرند.

متا تگ‌های اصلی اچ تی ام ال (Basic HTML Meta Tags)

این متا تگ‌ها جزو عمومی‌ترین متا تگ‌هایی‌اند که احتمالاً بسیاری از آن‌ها را مشاهده کرده‌اید و به سادگی کاربرد هر کدام را می‌توان حدس زد.

<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright"content="company name">
<meta name="language" content="ES">
<meta name="robots" content="index,follow" />
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">
<meta name="Classification" content="Business">
<meta name="author" content="name, [email protected]">
<meta name="designer" content="">
<meta name="copyright" content="">
<meta name="reply-to" content="[email protected]">
<meta name="owner" content="">
<meta name="url" content="http://www.websiteaddrress.com">
<meta name="identifier-URL" content="http://www.websiteaddress.com">
<meta name="directory" content="submission">
<meta name="category" content="">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

متا تگ‌های اُپن گراف (OpenGraph Meta Tags)

قبل از اینکه لیست این دسته از متا تگ‌ها را مشاهده کنید، لازم می‌دانم ذکر کنم که متا تگ‌های OpenGraph اساساً برای نمایش صحیح اطلاعات یک صفحه‌ی وب بر روی شبکه‌های اجتماعی ایجاد شده‌اند و شاید به صورت مستقیم تأثیری روی سئوی (SEO) وب سایت نداشته باشند. اما بدون شک می‌توانند ترافیک مناسبی را به سمت یک صفحه‌ی وب روانه کنند.
در حقیقت این متا تگ‌ها خوانایی اطلاعات نمایشی یک صفحه‌ی وب را در شبکه‌های اجتماعی بالا می‌برند و به فرض به جای نمایش ساده‌ی یک لینک در یک شبکه‌ی اجتماعی مانند فیسبوک یا تلگرام که شاید به خودی خود این لینک هیچ جذابیتی نداشته باشد و نتواند توجهی را به خود جلب کند، به فرض می‌توانند کمک کنند تا تصویر و تیتر و چکیده‌ای از محتوا به صورت تفکیک شده در شبکه‌های اجتماعی به نمایش در آید که باعث ترغیب مشاهده کنندگان نسبت به مشاهده‌ی لینک خواهد شد.

<meta name="og:title" content="The Rock"/>
<meta name="og:type" content="movie"/>
<meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta name="og:site_name" content="IMDb"/>
<meta name="og:description" content="A group of U.S. Marines, under command of..."/>
<meta name="fb:page_id" content="43929265776" />
<meta name="og:email" content="[email protected]"/>
<meta name="og:phone_number" content="650-123-4567"/>
<meta name="og:fax_number" content="+1-415-123-4567"/>
<meta name="og:latitude" content="37.416343"/>
<meta name="og:longitude" content="-122.153013"/>
<meta name="og:street-address" content="1601 S California Ave"/>
<meta name="og:locality" content="Palo Alto"/>
<meta name="og:region" content="CA"/>
<meta name="og:postal-code" content="94304"/>
<meta name="og:country-name" content="USA"/>
<meta property="og:type" content="game.achievement"/>
<meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/>
<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="http://example.com/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://example.com/fallback.vid" />
<meta property="og:video:type" content="text/html" />
<meta property="og:audio" content="http://example.com/amazing.mp3" />
<meta property="og:audio:title" content="Amazing Song" />
<meta property="og:audio:artist" content="Amazing Band" />
<meta property="og:audio:album" content="Amazing Album" />
<meta property="og:audio:type" content="application/mp3" />

موارد بالا جزو کاربردی‌ترین متا تگ‌ها بودند. با این حال متا تگ‌های دیگری داریم که شاید برای بسیاری از افراد کاربرد چندانی نداشته باشند. ولی لیست کردن برخی از آن‌ها در زیر خالی از لطف نیست و برای جزئیات بیشتر می‌توانید در مورد آن‌ها گوگل کنید:

متا تگ‌های خدماتی / شرکتی

متا تگ ClaimID

<meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" />

متا تگ‌های اپل (Apple Meta Tags)

<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">

متا تگ‌های مرورگر اینترنت اکسپلورر (Internet Explorer Meta Tags)

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />
<meta name="mssmarttagspreventparsing" content="true">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="msapplication-starturl" content="http://blog.reybango.com/about/"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>
<meta name="application-name" content="Rey Bango Front-end Developer"/>
<meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/>
<meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" />
<meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" />
<meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" />
<meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" />
<link rel="shortcut icon" href="/images/favicon.ico" />

متا تگ TweetMeme

<meta name="tweetmeme-title" content="Retweet Button Explained" />

متا تگ Blog Catalog

<meta name="blogcatalog" />

منبع انتخاب متا تگ‌ها

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید