راهنمای برنامه نویسی HTML و متا تگ ها در سال ۲۰۱۸

راهنمای برنامه نویسی HTML و متا تگ ها در سال ۲۰۱۸

توسط akbari آذر ۱۰, ۱۳۹۷
برنامه نویسی سفارشی

حتما قبلا در مورد متا تگ های HTML به صورت عمیق مطالعه کرده اید، اما همانند بسیاری از موارد در سئو، این یک چشم انداز در حال تغییر است که استفاده و تعاریف پذیرفته شده از تگ ها اغلب تغییر می کند. لازم به ذکر است که اگر شما در زمینه بهینه سازی جستجوگرها هستید، همچنین باید داده های ساختاری را پایین بیاورید و اجرا کنید تا مطمئن شوید crawler ها بهترین تجربه را کسب می کنند.

تفاوت متا تگ و تگ در برنامه نویسی html

در ابتدا، وقت آن رسیده تا برخی از سردرگمی هایی که در در مورد تفاوت متاتگ های HTML و تگ ها است را برطرف کنید. تفاوت بین این دو نوع تگ به طور عمده اختیاری است به نحوی که یک متاتگ HTML، به این معنی است که در مورد صفحه مورد نظر شما با زبان برنامه نویسی html توضیحاتی می دهد. در حالی که یک تگ به برچسب های یک متن اطلاق می شود. تصمیم گیری که توسط W3C انجام می شود یا توسط آن تعریف می شود و در طول زمان تغییر می کند، اما چیزی که برای ما مهم است که به یاد داشته باشید این است که هر دو هدف مشابهی دارند، یعنی این که با اطلاعاتی که در مورد یک صفحه وب داریم از آنها برای ارائه موتورهای جستجو استفاده می کنیم.

نکته

بعضی از افراد تگ های هدر را به عنوان متا تگ ها در نظر می گیرند، اما  آن را به عنوان یک عنصر از صفحه توصیف می کنند، نه محتوای یک صفحه به طور کلی، ما تصمیم گرفتیم بحث مربوط به گروه دوم را در نظر نگیریم.

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

با بررسی این موارد ما می توانیم به بهینه سازی کسب و کار بپردازیم و نگاهی به مجموعه ای از هر دو HTML و متا تگ هایی که فکر می کنیم در هنگام انجام SEO مفید هستند، بیندازیم.

معرفی تگ های مختلف برنامه نویسیhtml

Hreflang

تگ Hreflang از نظر فنی یک تگ نیست. اما این یک ویژگی مهم است که می تواند به گوگل کمک کند که شما از کدام زبان در صفحه وب استفاده می کنید. اگر سایتی دارید که از چندین ترجمه استفاده می کند یا در کشور های مختلف استفاده می کند، باید از Hreflang استفاده کنید تا مطمئن شوید نسخه صحیح زبان در نسخه های صحیح گوگل ارائه شده است. این می تواند به موتورهای جستجو کمک کند که رتبه بندی مطالب خود را بهتر، و از همه مهمتر تضمین می کند که کاربران در کشور های مختلف تجربه درست کسب کرده اند.

یک کد نمونه برای هدف قرار دادن یک صفحه وب به کاربران زبان انگلیسی به UK:

<link rel=”alternate” href=”http://example.com” hreflang=”en-gb” />

Canonical tag

یکی دیگر از تگ های بسیار مهم، تگ canonical است. اگر آن را نادرست تنظیم کنید و در معرض خطر از دست دادن مشاهده در SERPs و ایجاد مسائل واقعی برای سایت شما می شود. با این حال، اگر به درستی استفاده شده باشد، این یک روش عالی برای موتورهای جستجو است که URL صفحه وب نسخه نادرست دارد. این بهترین راه برای جلوگیری از مسائل تکراری محتوا در سایت شما است که توسط URL های متعدد موتورهای جستجو انجام می شود که حاوی همان محتوا یا نزدیک به محتوای یکسان در آن ها است.

به طور کلی، اگر موتور جستجو چندین URL با محتویات یکسان پیدا کند، مطالب را بررسی می کند که کدام یک اصلی هستند و کدام یک از آنها تکراری هستند. این می تواند به رتبه بندی پایین تر برای هر دو منجر شود، و یا بدتر، یک صفحه مهم رتبه بندی نمی شود.

یک قطعه کد نمونه برای استفاده از تگ canonical:

<link rel=”canonical” href=”https://www.example.com” />

Content type tag

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

یک تکه کد نمونه برای استفاده از تگ نوع محتوا:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Title tag

احتمالا یکی از تگ های شناخته شده و مورد استفاده برای هر کسی که کار SEO را انجام می دهد تگ عنوان می باشد. تگ عنوان برای مشخص کردن آنچه که در مورد وب وجود دارد استفاده می شود. آنها در زبانه مرورگر شما نمایش داده می شوند و کاربران را هدایت می کنند و مهم تر از همه آن ها توسط موتورهای جستجو استفاده می شوند تا نتایج را که در SERPs مشاهده می کنیم، تولید کنیم.

از دید جستجوگرها، بهینه سازی تگ عنوان حاوی موضوعات و کلمات کلیدی مربوط به محتویات صفحه است که می تواند به بهبود رتبه بندی شما برای این موضوعات کلمات کلیدی کمک کند. در حال حاضر می توانید از Googleانتظار داشته باشید تا بین ۵۰ تا ۶۰ کاراکتر عنوان خود را قبل از اینکه کوتاه شود نمایش دهد، بنابراین هنگام نوشتن این موارد را حفظ کنید.

قطعه کد نمونه برای تگ عنوان، که در بالای تگ head در بالای صفحه وب قرار می گیرد:

<title>Example.com | The best examples on the web</title>

Meta description tag

همانند تگ عنوان، تگ متا توضیحات به خوبی شناخته شده است و شما را قادر می سازد تا به موتورهای جستجو و کاربران در SERPs آنچه در مورد محتوای صفحه وب شما است توضیح دهد. در حالی که یک عامل رتبه بندی مستقیم نیست، شما باید متا توضیحات خود را بهینه سازی کنید تا یک حساب مختصر قانع کننده از محتوای صفحات وب خود ارائه کنید.

 

اگر گوگل فکر نمیکرد شما یک کار خوب را انجام داده اید، ممکن بود تگ متای توضیحات شما را انتخاب و جایگزین تفسیر خود قرار دهد،که اغلب از محتوا برای باز کردن چند پاراگراف در سایت خود استفاده می کند.

یک کد نمونه برای برچسب توضیحات متا:

<meta name=”description” content=”This is a meta description”>

Viewport tag

تگ Viewport یک تگ مفید برای کمک به مرورگرها در درک و کنترل ابعاد صفحه وب شماست. در گذشته نیازی به این تگ نبود زیرا همه صفحات وب روی دسک تاپ روی صفحه نمایش های مشابه نمایش داده می شد، اما با افزایش استفاده از تلفن همراه ، که بسیاری از آنها دارای ابعاد مختلف هستند، اکنون این موضوع مهم تر شده است تا مطمئن شوید که این اطلاعات را به مرورگر گفته شده است.پیاده سازی صحيح تگ viewport اطمینان حاصل خواهد کرد که کاربران سایت خود را در صورت وجود به درستی تجربه می کنند.

یک کد نمونه برای متا تگ viewport:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Robots meta tags

تعداد زیادی از متا تگ های ربات وجود دارد که می توانید از آن ها استفاده کنید، که هر کدام به موتور جستجو کمک می کنند تا کار خود را در زمینه crawling و نمایه سازی صفحات وب در اینترنت انجام دهند. همه موتور های جستجو همه دستورات را دنبال نخواهند کرد، اما در زیر چند نمونه از متا تگ های ربات و آنچه آنها از crawler ها می خواهند انجام دهند را نشان می دهد

  • No follow: به crawler ها می گوید که هر یک از لینک هایی که در صفحه  indexوجود دارد را پیروی نکن و همچنین هر عددی را به صفحه پیوند داده می شود رد نکن.
  • No index: به crawler ها می گوید که صفحه index را نشان ندهد.
  • No image index: به crawler ها می گوید که تصاویر را ازصفحه indexنمایش ندهد.
  • No archive: به crawler ها می گوید که یک نسخه ذخیره شده را شامل نمی شوند.

یک کد نمونه برای متا تگ ربات:

<meta name=”robot” content=”noindex, nofollow”>

Open graph (OG) meta tags for social

در نهایت، ما تگ های OG را برای شبکه های اجتماعی داریم. می توانید اطمینان حاصل کنید که اگر محتوای شما عالی به نظر برسد، زمانی که آن را به اشتراک گذاشتید ، می تواند به بهبود ارتباط سایت با پست و در نهایت افزایش ترافیک کمک کنید.

<meta property=”og:title” content=”Article about tags”/>
<meta property=”og:image” content=”https://example.com/img/facebooklogo.png”/>
<meta property=”og:site_name” content=”SEO blog”/>
<meta property=”og:description” content=”This article will talk about tags”/>

 

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

منبع: searchenginewatch

 

اشتراک در شبکه های اجتماعی

اطلاع از جدیدترین مقالات

جهت مطلع شدن از آخرین و جدیدترین مقالات، آدرس ایمیل خود را وارد نمایید

نظر دادن

ایمیل شما منتشر نخواهد شد.پر کردن فیلدهای ستاره دار الزامی است *