meta تگ ها در Html

image post

meta تگ ها در Html

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

متا تگ ها معمولا برای الحاق اطلاعاتی به صفحه html استفاده میشود از طرفی دیگر متا تگ ها برای ارسال اطلاعات در header پاسخ های http نیز استفاده میشوند مانند header location برای redirect به صفحات دیگر یا مشخص سازی charset صفحات وب , موارد بالا از طریق attribute های charset و http-equiv انجام میشوند !

برای کسب اطلاعات بیشتر به بخش توسعه دهندگان موزیلا مراجعه نمایید .

چرا متا تگ ها مهم هستند ؟

در گذشته گوگل از سه متا تگ keywords , description و title برای index سازی صفحات وب استفاده میکرد , اما راه سو استفاده باز بوده و بسیاری از سایت ها شروع به جعل محتوای وب سایت با استفاده از این تگ ها نمودند , بنابراین گوگل در سال 2009 اعلام کرد دیگر از این متا تگ ها در الگوریتم خود استفاده نمی کند .

اما همانطور که در تصویر زیر می بینید description meta tag در صفحه جستجو به کاربر نمایشداده میشود , هنوز در سیو سایت تاثیری ندارد اما میتواند کاربر را ترغیب به کلیک کردن کند !

Description Meta Tag

اما هنوز میتوان موتور های جستجوی دیگری را در نظر گرفت که از این متا تگ ها در index صفحات استفاده میکنند !

استفاده از meta tag ها :

برخی از متا تگ ها با استفاه از attribute name و attribute content مشخص می شوند که به ترتیب نام و محتوای meta tag را مشخص می کنند

برای مثال :

<meta name="description"content="A general guide on the use of meta tags in html pages">

یا meta tag author که نام نویسنده محتوای سایت را مشخص می نماید :

<meta name="author" content="Ali Bakhshi">

همچنین meta tag Charset که Charset Encoding صفحه وب را مشخص میکند ! هر صفحه وب می تواند تنها یک Charset داشته باشد و برای اکثر صفخات وب بخصوص صفحات فارسی UTF-8 گزینه مناسب است .

<meta charset="UTF-8">

اطلاعات بیشتر درباره Character Encoding را میتوانید در وب سایت رسمی W3C بخوانید .

شبیه سازی HTTP Headers با Meta Tags

با استفاده از meta tag ها میتوان header هایی مانند refresh و redirect را set کرد :

<meta http-equiv="refresh" content="5;url=http://www.ali-bakhshi.ir/">

در attribute content عدد اول تعداد ثانیه های انتظار پیش از refresh یا redirect شدن صفحه را مشخص میکند و در قسمت بعدی آدرس صفحه برای redirect شدن مشخص میشود , در صورتی که میخواهید refresh در همان صفحه انجام شود مثدار url را خالی بگذارید .

Meta Tag های منسوخ

یکی از meta tag های منسوخ شده متا تگ زیر می باشد :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

متا تگ بالا که در XHTML رواج داشته با Charset Meta Tag جایگزین شده است و نباید استفاده شود !

Meta Tag Copyright

متا تگ کپی رایت میتواند آدرس فایل متن کپی رایت سایت را مشخص سازد

<link rel="copyright" href="copyright.html">

Meta Tag Keywords

گوگل دیگر از متا تگ keywords استفاده نمی کند اما اگر سایت شما به زبان چینی هست این متا تگ فاکتور مهمی برای موتور جستجوی Baidu می باشد

<meta name="keywords" content="web,design,html,css,html5,development">

Meta Tag شبکه های اجتماعی (Open Graph, Twitter Cards, and Schema.org)

حتما تا بحال لینکی را در شبکه های اجتماعی مثل فیسبوک , توییتر و تلگرام Share کرده اید , در زیر ینک عنوان , توضیحات و تصویری نمیاش داده میشود که قابل کنترل با متا تگ های شبکه های اجتماعی می باشند

<meta property="og:title" content="The best site">
<meta property="og:image" content="link_to_image">
<meta property="og:description" content="description goes here">

کد بالا پس از share لینک سایت نتیجه زیر را دارد

برای اطلاعات بیشتر به بخش توسعه دهندگان فیسبوک مراجعه نمایید

شبیه به Open Graph که در بالا مشاهده کردید توییتر هم Twitter Cards و گوگل پلاس Schema.org را داراست !

اما بیشتر شبکه های اجتماعی از Open Graph استفاده می نمایند !

 

 

دنیس ریچی : یونیکس بسیار ساده هست، تنها یک نابغه باید باشید تا بتوانید سادگی آن را درک کنید.