مرتضی مهرابی
آیکون باز شدن منو در موبایل لایت مود آیکون باز شدن منو در موبایل دارک مود
0911-559-6820
آیکون تغییر تم سایت به روشن و تاریک آموزش سئو پنل کاربری

تگ ها و متاتگ های مهم سئو در html

جلسه 11

از تگ ها و متاتگ های مهم و موثر در سئو سایت میتوان به title, header, main و خیلی موارد دیگر اشاره کرد که به طور کامل با آن پرداخته ایم. آموزش جامع تگ های html در سئو سایت را می توانید در قالب یک ویدئو 2 ساعته مشاهده نمایید، شاید لازم باشد برای درک بهتر این ویدئو را دوبار مشاهده نمایید و حتی در آینده مجدد به سراغش بیایید.

دوستان تازه کار: عزیزان اگر این جلسه را بعد از 2 با مشاهده متوجه نشدید به مشاهده سایر جلسات بپردازید، در طی دوره و مخصوصا در جلسات تکنیکال کامل مباحث این جلسه برایتان جا می افتد و یک آهااا خوشگل تحویل من می دهید. این جلسه را در این حد متوجه شوید که هر تگ دارد چه کاری انجام می دهد کافیست. جلسه خلاصه تگ های مهم html در سئو که جلسه بعدی دوره است را حتما مشاهده نمایید یا ذهنتان نظم بگیرد.

خرید اشنراک سایت (فقط 3 ماهه)0 ریال

مشاهده ویدئو فقط برای کاربران ویژه سایت! هزینه اشتراک سایت بیشتر به دلیل جدیت در مشاهده ویدئوها و تاثیرپذیری بیشتر در نظر گرفته شده است زیرا همانطور که قبلا گفتم رایگان بودن آموزش ها دلیل بر سطحی بودن آنها نیست. از طرفی دوست دارم موارد پیشرفته ای که در آپدیت ها بررسی می شود توسط افراد مسمم مشاهده شود، به همین دلیل هزینه ناچیزی را برای اشتراک سایت در نظر گرفته ام.

آپدیت ها

1 خلاصه جلسه 11

عنوان ها

همان طور که در جلسات قبلی از آموزش سئو گفتیم، یک متخصص سئو نیازی نیست کدنویس باشد ولی قطعا با شناخت تگ های HTML و متا تگ های مهم در سئو، می تواند با هماهنگی با تیم فنی، نتیجه بهتری را کسب کند. Seo در html به دلیل وجود تگ های معنایی از اهمیت زیادی برخوردار است؛ پس برای این جلسه دقت بیشتری را به خرج دهید. هرچه ما اصولی تر از تگ ها استفاده کنیم، ربات ها درک بهتری از صفحات ما پیدا می کنند. در ادامه برای شناخت مهم ترین و موثر ترین تگ ها در سئو سایت با ما همراه باشید.

کدهای سئو (مهم ترین تگ ها در سئو)

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

توجه: ما در ویدئوی این جلسه، مفصل تر در مورد هرکدام از تگ ها صحبت کرده ایم.

مهم ترین تگ های HTML در SEO

قبل از شروع، خوب است که بدانیم به چه تگ هایی متا تگ (Meta Tag) می گوییم:

متا تگ ها یک سری تگ هایی هستند که اطلاعات را منتقل می کنند؛ متا تگ های متفاوتی داریم که سرچ انجین ها از طریق اتریبیوت name آن متا تگ، متوجه نوع اطلاعات آن متا تگ می شود.

 

تگ Head

<head></head>

 

در این تگ اطلاعاتی از صفحه قرار دارد که در معرض دید کاربر نیست ولی بیشتر این اطلاعات برای کراولرها به شدت حائز اهمیت است.

 

تگ Title

<title></title>

 

زمانی که در گوگل عبارتی را سرچ می کنیم، گوگل عنوانی را در بالای لینک ها به ما نمایش می دهد؛ آن متن درون تگ تایتل قرار دارد.

 

تگ Meta Description

<meta name=”description” content=” Text here “>

 

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

توجه: در تایتل و دیسکریپشن گاها گوگل آن چیزی که مشخص کرده ایم را نمایش نمی دهد و خودش تصمیم می گیرد که چه عنوان و دیسکریپشنی مناسب است و از درون متن عبارت مناسب را قرار می دهد.

 

تگ Meta Robots

<meta name=”robots” content=” Here “>

 

این تگ به ربات ها یک سری اطلاعات را منتقل می کند.

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

Index – noindex – follow – nofollow  و…

Index: صفحات به طور پیش فرض در وضعیت Index قرار می گیرند و موتورهایی جستجو اجازه ی ایندکس کردن آن صفحه را دارند.

Noindex: بعضی وقت ها صفحه ای داریم و برای کاربر است و نمی خواهیم در نتایج موتورهای جستجو بالا بیاید. با این مقدار به ربات می گوییم که صفحه را ایندکس نکند.

Follow: ما در بحث کرالینگ گفتیم ربات ها به درون صفحه ی ما می آیند و لینک ها را (لینک داخلی و خارجی)Discover  می کند؛ سپس آن لینک ها را کراول می کند. ما با follow به ربات می گوییم لینک هایی که درون صفحه است را کراول کند.

Nofollow: اگر مقدار کانتنت nofollow باشد، ربات ها لینک های درون صفحه را کراول نمی کند.

 

تگ Canonical

<link rel=”canonical” href=” URL “>

 

یک تگ لینک می باشد و مقدار rel آن برابر canonical  است و در همه صفحات وجود دارد.

فرض کنیم سه صفحه ی A، B و C را داریم که محتوای آنها تقریبا یکسان است و تنها در لحن ویا یک سری عبارات متفاوت است و در مورد یک موضوع می باشند؛ اگر گوگل بخواهد برای کیورد اصلی ما (که برای هر سه صفحات یکی می باشد) یکی از صفحات را ایندکس کند، با مشکل مواجه می شویم و گوگل نمی داند کدام صفحه، صفحه ی شاخص ما می باشد؛ پس اگر صفحه ی B ما، صفحه ی شاخص است، در هر کدام از صفحات A و C، یک تگ کنونیکال قرار می دهیم و مقدار href آن را آدرس صفحه ی B قرار می دهیم؛ و مقدار href تگ کنونیکال خود صفحه ی B را، آدرس خود صفحه قرار می دهیم؛ به این ترتیب گوگل با رسیدن به صفحات A و C متوجه می شود که صفحه ی B صفحه ی شاخص ما می باشد.

 

تگ Open Graph

<meta property=”og:here” content=” Here “>

 

این تگ برای نمایش اطلاعات لینک ها در فیسبوک می باشد. اینکه با چه تصویر، متن، دیسکریپشن و… نمایش داده شود.

مقادیری که می توانند در قسمت property این تگ بعد از og: قرار بگیرند:

locale – type – title – description – url – site_name و…

Locale: لوکیشن را مشخص می کند. مثلا content آن برای ایران  برابر است با: “fa_IR”

Type: تایپ صفحه را مشخص می کند که از چه نوعی می باشد؛ آرتیکل و یا…

Title: عنوانی که می خوایم نمایش داده شود رو قرار می دهیم.

Description: توضیحات لینک را مشخص می کند.

Site_name: نام سایت را مشخص می کند.

و…

 

تگ Twitter Card

<meta name=”twitter:Here” content=”Here”>

 

همانند تگ Open Graph برای توییتر می باشد.

مقادیری که می توانند در قسمت name این تگ بعد از twitter: قرار بگیرند:

card – title – description  و…

Card: برای مشخص کردن تصویر لینک است.

Title: برای مشخص کردن  عنوان لینک است.

Description: توضیحات لینک را مشخص می کند.

و…

 

تگ Body

<body> </body>

 

هرچیزی که در این تگ قرار بگیرد به کاربر نمایش داده می شود. و بعد از تگ بسته head قرار می گیرد.

 

تگ Header

<header> </header>

 

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

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

 

تگ Nav

<nav> </nav>

 

تگ بسیار مهمی است. جاهایی که فهرست راهبری داریم، جاهایی که مجموعه ای از لینک ها را داریم باید درون تگ nav قرار بگیرد. مهم نیست آن لینک ها در هدر، فوتر و سایدبار و… باشد.

 

تگ Main

<main> </main>

 

این تگ اصلی محتوای سایت می باشد و والد تگ آرتیکل است.

 

تگ Section

<section> </section>

 

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

 

تگ Article

<article> </article>

 

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

 

تگ Aside

<aside> Here </aside>

 

ساید بار سایت باید در این تگ قرار بگیرد.

 

<footer> Here </footer>

 

تقریبا مانند header است؛ چه فوتر اصلی سایت و چه فوتر های المان های داخلی، درون این تگ قرار می گیرند.

 

تگ های Heading

<h1> Text Here </h1>

<h2> Text Here </h2>

…

<h6> Text Here </h6>

 

تمامی صفحات ما یک عنوانی دارند که بسیار حائز اهمیت هستند. h1 عنوان اصلی صفحه ی ما می باشد و می گوید که صفحه در مورد چه چیزی صحبت می کند و به شدت مورد توجه موتورهای جستجو قرار می گیرد. عنوان ها 6 نوع هستند و هرچی عدد هدینگ بالاتر برود، اهمیتش کمتر می شود؛ یعنی h1 با اهمیت ترین عنوان وh6  کمترین اهمیت را دارد و باید از آنها به صورت سلسله مراتبی استفده کنیم.

 

تگ Paragraph

<p>  Text Here  </p>

 

پاراگراف ها موجود در محتوا را درون این تگ قرار می دهیم.

 

تگ Strong

<p><strong>  Text Here  </strong></p>

 

متن ما رو بولد می کند.

توجه: می توان با css و یا تگ b هم همین کار را انجام داد، ولی بار معنایی ندارد ولی تگ Strong بار معنایی مهم بودن متن را دارد.

 

تگ Mark

<p><mark>  Text Here  </mark></p>

 

متن ما رو هایلایت می کند.

توجه: می توان با css هم این کار را انجام داد، ولی بار معنایی ندارد و تگ Mark بار معنایی مهم بودن متن را دارد.

 

<a href=” Link Here ” rel=” Rel Here “> Anchor Here </a>

 

برای قرار دادن یک لینک از این تگ استفاده می شود. موتور جستجو عبارت anchor text (متنی که بین تگ باز و بسته a قرار می گیرد) را برای آن لینک اعتبار می دهد. (البته یک دید سطحی است و بعدا مفصل توضیح می دهیم.)

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

Follow – Nofollow – UGC – Sponsored – Noopener – Noreferrer و…

Follow: به موتور جستجو می گوییم که سایتی که لینک داده ایم را تایید می کنیم. (وقتی برای rel هیچ مقداری را مشخص نکنیم، یعنی لینک فالو است.)

Nofollow: به موتور جستجو می گوییم سایتی که به آن لینک داده ایم را تایید نمی کنیم و طبق تصمیم خود، می تواند اعتبار را انتقال کند یا خیر! (توجه کنید که nofollow در تگ a و متا تگ robots با هم متفاوت هستند.)

UGC: برای لینک هایی است که کاربر یک سایت آنها را می سازد و نه خود صاحب سایت؛ مثلا اگر در سایت آپارات یا مدیوم لینک سازی کنیم، لینک از نوع UGC می باشد؛

Sponsored: لینک های پولی و اسپانسری را مشخص می کند.

Noreferrer: با وجود این دیگر نمی توانیم ورودی هایی که از این لینک داریم را در گوگل آنالیتیکس ببینیم و متوجه شویم که کاربرانی که بر روی این لینک کلیک کرده اند، از کجا آمده اند.

<a href=”#” onclick=”MyFunction();”> link text </a>

لینک های جاوا اسکریپتی توسط ربات ها قابل ترک نیستند.

 

تگ سایت Cite

<cite> Here </cite>

 

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

 

تگ Image و اتریبیوت Alt

<img src=”url” alt=”Here”>

 

 وقتی عبارتی را در گوگل ایمیج جستجو می کنیم و یک سری تصاویر به ما نمایش می دهد. موتور جستجوگر از طریق مقدار اتریبیوت alt، متوجه می شود آن تصویر، در مورد چیست؟

 

تگ Figure

<figure>

  <img src=”…” alt=”…”>

  <figcaption> Caption Here </figcaption>

</figure>

 

بار سئویی ندارد ولی در تگ figure تصویر ما قرار می گیرد و در پایین آن به ما این امکان را می دهد که یک کپشن را که کاربر آن را می بیند را برای تصویر ست کنیم.

 

تگ Picture

<picture>

  <source media=”(min-width:here)” srcset=”Address Here”>

  <source media=”(min-width:here)” srcset=”Address Here”>

  <img src=”Address Here” alt=”Alt Here”>

</picture>

 

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

 

تگ Video

<video>

  <source src=”Address Here” type=”video/mp4″>

  <source src=”Address Here” type=”video/ogg”>

  Your browser does not support the video tag.

</video>

 

آدرس ویدئو در فرمت های مختلف را درون این تگ قرار می دهیم؛ می توانیم در انتهای آن یک پیام را بنویسیم تا اگر مرورگر ساپورت نکرد، آن پیغام را به کاربر نمایش دهد؛ همچنین می توان یک کاور را برای ویدئو قرار داد.

 

تگ Div  و تگ Span

<span> Text Here </span>

<div> Text Here </div>

 

بار معنایی ندارند و تنها برای ساختار دهی استفاده می شوند.

 

Schema Markup (به وسیله اتریبیوت های Microdata & RFDa)

Microdata:

<span itemprop=”Type”> Here </span>

 

RFDa:

<span property=”Type”> Here </span>

 

اسکیماها زبان های نشانه گذاری هستند و به وسیله آن به کرالر می فهمانیم که این تگ چه چیزی را منتقل می کند؟!

البته دیگر دوره ی Microdata  و RFDa به پایان رسیده است و اگر الان بخواهیم از اسکیماها استفاده کنیم، از JSON-LD استفاده می کنیم که پیشنهاد خود گوگل هم می باشد.

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

نظرات تخصصی

از شنیدن نظرات شما خوشحال خواهم شد، همچنین به سوالات پاسخ خواهم داد.