سلام، این متن بخش از آموزش 2 ساعت 15 دقیقه تگ های مهم html در سئو می باشد که خیلی دوست داشتم اینجا باهاتون به اشتراک بزارم. متاسفانه ویرگول اجازه درج فیلم رو بهمون نمیده وگرنه حتما فیلمش روهم براتون همینجا قرار می دادم، اگر میشه فیلم گذاشت و من بلد نیستم لطفا از هر طریقی که میتونید بهم اطلاع بدید.
فیلم آموزش تگ های مهم html در سئو
در صورتی که حوصله خوندن متن ندارید میتونید رو لینک بالا کلیک کنید و در سایت فیلم رو مشاهده کنید، خب بریم سراغ متن و معرفی تگ ها:
همان طور که در جلسات قبلی گفتیم، یک متخصص سئو نیازی نیست کدنویس باشد ولی قطعا با شناخت تگ های HTML و متا تگ های مهم در سئو، می تواند با هماهنگی با تیم فنی، نتیجه بهتری را کسب کند. Seo در html به دلیل وجود تگ های معنایی از اهمیت زیادی برخوردار است؛ پس برای این جلسه دقت بیشتری را به خرج دهید. هرچه ما اصولی تر از تگ ها استفاده کنیم، ربات ها درک بهتری از صفحات ما پیدا می کنند. در ادامه برای شناخت مهم ترین و موثر ترین تگ ها در سئو سایت با ما همراه باشید.
موتورهای جستجوگر برای درک بهتر صفحه از تگ ها استفاده می کنند و مفهوم تگ ها برای شان اهمیت دارد. پس لازم است بدانید تگ در سئو چیست و به چه صورت از آنها استفاده کنیم؟ به طور کامل در ادامه این جلسه به توضیح هر کدام پرداخته ایم و متا تگ های سئو را توضیح داده ایم و در انتهای این جلسه خواهیم دانست که مهمترین تگ ها در سئو سایت چه تگ هایی هستند؟
توجه: ما در ویدئوی این جلسه، مفصل تر در مورد هرکدام از تگ ها صحبت کرده ایم.
قبل از شروع، خوب است که بدانیم به چه تگ هایی متا تگ (Meta Tag) می گوییم:
متا تگ ها یک سری تگ هایی هستند که اطلاعات را منتقل می کنند؛ متا تگ های متفاوتی داریم که سرچ انجین ها از طریق اتریبیوت name آن متا تگ، متوجه نوع اطلاعات آن متا تگ می شود.
<head></head>
در این تگ اطلاعاتی از صفحه قرار دارد که در معرض دید کاربر نیست ولی بیشتر این اطلاعات برای کراولرها به شدت حائز اهمیت است.
<title></title>
زمانی که در گوگل عبارتی را سرچ می کنیم، گوگل عنوانی را در بالای لینک ها به ما نمایش می دهد؛ آن متن درون تگ تایتل قرار دارد.
<meta name="description" content=" Text here ">
در زیر در زیر لینک های نتایج سرچ توضیحاتی قرار می گیرد که مقدارش از محتوای این تگ گرفته می شود.
توجه: در تایتل و دیسکریپشن گاها گوگل آن چیزی که مشخص کرده ایم را نمایش نمی دهد و خودش تصمیم می گیرد که چه عنوان و دیسکریپشنی مناسب است و از درون متن عبارت مناسب را قرار می دهد.
<meta name="robots" content=" Here ">
این تگ به ربات ها یک سری اطلاعات را منتقل می کند.
مقادیری که می توانند در قسمت content این تگ قرار بگیرند:
Index – noindex – follow – nofollow و…
Index: صفحات به طور پیش فرض در وضعیت Index قرار می گیرند و موتورهایی جستجو اجازه ی ایندکس کردن آن صفحه را دارند.
Noindex: بعضی وقت ها صفحه ای داریم و برای کاربر است و نمی خواهیم در نتایج موتورهای جستجو بالا بیاید. با این مقدار به ربات می گوییم که صفحه را ایندکس نکند.
Follow: ما در بحث کرالینگ گفتیم ربات ها به درون صفحه ی ما می آیند و لینک ها را (لینک داخلی و خارجی)Discover می کند؛ سپس آن لینک ها را کراول می کند. ما با follow به ربات می گوییم لینک هایی که درون صفحه است را کراول کند.
Nofollow: اگر مقدار کانتنت nofollow باشد، ربات ها لینک های درون صفحه را کراول نمی کند.
<link rel="canonical" href=" URL ">
یک تگ لینک می باشد و مقدار rel آن برابر canonical است و در همه صفحات وجود دارد.
فرض کنیم سه صفحه ی A، B و C را داریم که محتوای آنها تقریبا یکسان است و تنها در لحن ویا یک سری عبارات متفاوت است و در مورد یک موضوع می باشند؛ اگر گوگل بخواهد برای کیورد اصلی ما (که برای هر سه صفحات یکی می باشد) یکی از صفحات را ایندکس کند، با مشکل مواجه می شویم و گوگل نمی داند کدام صفحه، صفحه ی شاخص ما می باشد؛ پس اگر صفحه ی B ما، صفحه ی شاخص است، در هر کدام از صفحات A و C، یک تگ کنونیکال قرار می دهیم و مقدار href آن را آدرس صفحه ی B قرار می دهیم؛ و مقدار href تگ کنونیکال خود صفحه ی B را، آدرس خود صفحه قرار می دهیم؛ به این ترتیب گوگل با رسیدن به صفحات A و C متوجه می شود که صفحه ی B صفحه ی شاخص ما می باشد.
<meta property="og:here" content=" Here ">
این تگ برای نمایش اطلاعات لینک ها در فیسبوک می باشد. اینکه با چه تصویر، متن، دیسکریپشن و… نمایش داده شود.
مقادیری که می توانند در قسمت property این تگ بعد از og: قرار بگیرند:
locale – type – title – description – url – site_name و…
Locale: لوکیشن را مشخص می کند. مثلا content آن برای ایران برابر است با: “fa_IR”
Type: تایپ صفحه را مشخص می کند که از چه نوعی می باشد؛ آرتیکل و یا…
Title: عنوانی که می خوایم نمایش داده شود رو قرار می دهیم.
Description: توضیحات لینک را مشخص می کند.
Site_name: نام سایت را مشخص می کند.
و…
<meta name="twitter:Here" content="Here">
همانند تگ Open Graph برای توییتر می باشد.
مقادیری که می توانند در قسمت name این تگ بعد از twitter: قرار بگیرند:
card – title – description و…
Card: برای مشخص کردن تصویر لینک است.
Title: برای مشخص کردن عنوان لینک است.
Description: توضیحات لینک را مشخص می کند.
و…
<body> </body>
هرچیزی که در این تگ قرار بگیرد به کاربر نمایش داده می شود. و بعد از تگ بسته head قرار می گیرد.
<header> </header>
این تگ معنایی به ما می گوید که آن بخش یک هدر است و ربات ها توجه بیشتر به آن می کنند.
دقت کنید که الزاما تنها بخش منو و بالای سایت را نباید در بخش هدر قرار بگیرد. مثلا علاوه بر بخش بالای سایت، اگر یک سکشن داشته باشیم، ممکن است در بالای آن به یک هدر نیاز داشته باشیم که توضیحات مهمی در مورد آن سکشن را درونش قرار دهیم. پس هر چیزی که می تواند هدر داشته باشد.
<nav> </nav>
تگ بسیار مهمی است. جاهایی که فهرست راهبری داریم، جاهایی که مجموعه ای از لینک ها را داریم باید درون تگ nav قرار بگیرد. مهم نیست آن لینک ها در هدر، فوتر و سایدبار و… باشد.
<main> </main>
این تگ اصلی محتوای سایت می باشد و والد تگ آرتیکل است.
<section> </section>
آنچنان بار معنایی ندارد ولی صفحه را سکشن بندی می کند. موجب تمیز تر شدن کدها می شود.
<article> </article>
مربوط به محتواست. از این تگ زمانی که محتوا را قرار می دهیم و یا زمانی که لیستینگی از مقالات را قرار می دهیم استفاده می شود. البته الزامی به وجود این تگ نمی باشد. ولی اگر محتوا یک مقاله است، خوب است که از این تگ استفاده شود.
<aside> Here </aside>
ساید بار سایت باید در این تگ قرار بگیرد.
<footer> Here </footer>
تقریبا مانند header است؛ چه فوتر اصلی سایت و چه فوتر های المان های داخلی، درون این تگ قرار می گیرند.
<h1> Text Here </h1>
<h2> Text Here </h2>
…
<h6> Text Here </h6>
تمامی صفحات ما یک عنوانی دارند که بسیار حائز اهمیت هستند. h1 عنوان اصلی صفحه ی ما می باشد و می گوید که صفحه در مورد چه چیزی صحبت می کند و به شدت مورد توجه موتورهای جستجو قرار می گیرد. عنوان ها 6 نوع هستند و هرچی عدد هدینگ بالاتر برود، اهمیتش کمتر می شود؛ یعنی h1 با اهمیت ترین عنوان وh6 کمترین اهمیت را دارد و باید از آنها به صورت سلسله مراتبی استفده کنیم.
<p> Text Here </p>
پاراگراف ها موجود در محتوا را درون این تگ قرار می دهیم.
<p><strong> Text Here </strong></p>
متن ما رو بولد می کند.
توجه: می توان با css و یا تگ b هم همین کار را انجام داد، ولی بار معنایی ندارد ولی تگ Strong بار معنایی مهم بودن متن را دارد.
<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=”#” =”MyFunction();”> link text </a>
لینک های جاوا اسکریپتی توسط ربات ها قابل ترک نیستند.
<cite> Here </cite>
برای زمانی استفاده می شود که اثری را قرار می دهیم. مثل عنوان کتاب، اسم آهنگ، نام فیلم و…
<img src="url" alt="Here">
وقتی عبارتی را در گوگل ایمیج جستجو می کنیم و یک سری تصاویر به ما نمایش می دهد. موتور جستجوگر از طریق مقدار اتریبیوت alt، متوجه می شود آن تصویر، در مورد چیست؟
<figure>
<img src="..." alt="...">
<figcaption> Caption Here </figcaption>
</figure>
بار سئویی ندارد ولی در تگ figure تصویر ما قرار می گیرد و در پایین آن به ما این امکان را می دهد که یک کپشن را که کاربر آن را می بیند را برای تصویر ست کنیم.
<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>
<source src="Address Here" type="video/mp4">
<source src="Address Here" type="video/ogg">
Your browser does not support the video tag.
</video>
آدرس ویدئو در فرمت های مختلف را درون این تگ قرار می دهیم؛ می توانیم در انتهای آن یک پیام را بنویسیم تا اگر مرورگر ساپورت نکرد، آن پیغام را به کاربر نمایش دهد؛ همچنین می توان یک کاور را برای ویدئو قرار داد.
<span> Text Here </span>
<div> Text Here </div>
بار معنایی ندارند و تنها برای ساختار دهی استفاده می شوند.
Microdata:
<span itemprop="Type"> Here </span>
RFDa:
<span property="Type"> Here </span>
اسکیماها زبان های نشانه گذاری هستند و به وسیله آن به کرالر می فهمانیم که این تگ چه چیزی را منتقل می کند؟!
البته دیگر دوره ی Microdata و RFDa به پایان رسیده است و اگر الان بخواهیم از اسکیماها استفاده کنیم، از JSON-LD استفاده می کنیم که پیشنهاد خود گوگل هم می باشد.
