آنچه در ویدیو می‌بینید:

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

اگر هم شرایط دیدن ویدیو رو ندارید، می‌تونید از محتوای متنی اون استفاده کنید 

در ادامه HTML به تگ‌های HTML5 یا Semantic HTML می‌رسیم. در HTML5 تفاوتی که با HTML4 وجود داشت این بود که یک‌سری تگ‌ها اضافه شدن که معنای مشخصی برای پارسر HTML داشتن.

اگر نمی دانید “پارسر HTML” به چه معناست، باید بدانید که:

پارسر HTML بخشی از مرورگر یا ابزارهای فنیه که وظیفه داره کدهای HTML رو بخونه، تفسیر کنه و به یک ساختار قابل فهم برای سیستم تبدیل کنه. به زبان ساده، مثل یه مترجم عمل می‌کنه که کدهای خام HTML رو می‌گیره و مشخص می‌کنه که هر بخش از صفحه دقیقاً چه کاری باید انجام بده یا چه معنایی داره: مثلاً کدوم قسمت تیتره، کدوم لینک، یا کدوم متن اصلیه.

بیشتر بخوانید: ساختار اصولی صفحات HTML

همون‌طور که ما می‌دونیم، یک کرالر زمانی که به URL مدنظرش ریکوئست می‌زنه، در نهایت یک HTML دریافت می‌کنه و شروع می‌کنه، یک بخشی از این کرالر در واقع می‌تونه یک سرویس دیگه‌ای باشه، شروع به پارس کردن این HTML می‌کنه. زمانی که این اتفاق می‌افته، وقتی به تگ‌های مشخصی می‌رسه، این تگ‌ها براش معنای مشخصی دارن. به‌عنوان مثال، ما اینجا تگ‌هایی مثل

  • <main>
  • <header>
  • <footer>
  • <article>
  • <section>
  • <nav>
  • <aside>
  • <details>
  • <dfn>

و باقی موارد رو می‌تونیم مشاهده کنیم.

هرکدوم از این تگ‌ها برای پارسر HTML معنای متفاوتی دارن و در نهایت استفاده از این تگ‌ها منجر می‌شه صفحه ما خوانایی بهتری داشته باشه. با همدیگه بریم یک بررسی بر روی این تگ‌ها داشته باشیم. اولین موردی که داریم تگ <main> هست که در ادامه‌ش <header> و <footer> رو هم داریم. ما از تگ <head> صحبت کردیم که داخل تگ هد یک‌سری metadata میاد قرار می‌گیره. به‌عنوان مثال title صفحه، description صفحه، canonical، og ها، Twitter cardها، فونت‌ها، JSON schema ها و باقی موارد. در ادامه وقتی تگ body باز می‌شه ما شاهد این هستیم که خب، یک header و footer ای داریم. header به بخش ابتدایی صفحه، اون بخشی که معمولاً navigation هم داخلش قرار می‌گیره، گفته می‌شه. و footer هم به بخش انتهایی صفحه که خب آشناییت داریم. در میون هدر و فوتر بخشی رو داریم که ازش به‌عنوان main یاد می‌کنیم که نشون‌دهنده بخش اصلی صفحه هستش.

در تگ main می‌تونیم تگ‌های متفاوتی قرار بدیم، از جمله تگ‌های article و section. تگ article الزاماً به یک مقاله اشاره نداره، به این معنا که اگر شما یک جایی متن دارین و یک article دارین، الزاماً نباید بیاد داخل تگ article بشینه. ما به‌صورت معمول این کار رو انجام می‌دیم، اما تگ article محدود به این بخش نمی‌مونه. فرض کنین شما یک صفحه‌ای دارین، یک Product Listing Page هستش که شامل محصول های متفاوتیه. هر یک از اون محصول ها هم خودشون می‌تونن یک article باشن.

در واقع article نشون‌دهنده این هستش که تگ‌هایی که داخلش داره قرار می‌گیره، در نهایت تگ article باز و بسته می‌شه و یک‌سری المان داخلش قرار می‌گیره، نشون‌دهنده این هست که این یک ماهیت کاملاً مجزا نسبت به باقی موارد داره. به‌عنوان مثال شما ممکنه یک مقاله داشته باشین، داخل تگ article بذارین. هر یک از پروداکت‌هایی که داخل Product Listing Page دارین، داخل یک تگ مقاله بشینن، یا همون در واقع تگ article بشینن. و در کنار تگ article ما یک تگ section داریم. تگ section به این معناست که ما یک بخش متفاوتی رو شاهدش هستیم که الزاماً مستقل از باقی بخش‌ها نیست. ما وقتی داریم از یک تگ article بهره می‌بریم، می‌گیم این محصول خودش یک ماهیت جداگانه‌ست، یا این مقاله‌ای که داریم و داخل تگ article قرار دادیم یک ماهیت جداگانه‌ست.

وقتی از تگ section داریم بهره می‌بریم، به این معناست که این تگ section در کنار باقی صفحه معنا داره و معنای خودش رو هم به دست میاره. فرضاً شما یک صفحه اصلی ای دارین، در بخشی از این صفحه اومدین یک بخشی قرار دادین برای دانلود نرم افزار خودتون، این بخش section می‌شه و می‌تونه article نباشه. البته اینکه شما دقیقاً کی article استفاده کنین و کی section، به شکلی نیستش که بگیم دقیقاً یک قانون مشخص داره. شما میاین بررسی می‌کنین. در اکثر موارد، به‌عنوان مثال مقالات رو ما میایم داخل تگ article قرار می‌دیم. در صفحات PLP یا Product Listing Page، هر کدوم از اون محصولات رو در تگ article قرار می‌دیم. در بخش‌های دیگه وقتی یک section رو داخل وب سایتمون شاهد باشیم، معمولاً میایم از تگ section استفاده می‌کنیم.

در کنار این مواردی که بیان کردم، تگ nav رو داریم که نشون‌دهنده navigation هست. در واقع لینک‌هایی که برای navigation کاربر هستن داخل تگ nav باید قرار بگیرن. تگ aside رو داریم که نشون‌دهنده این هست که یک محتوای جانبی و کامل‌کننده بر روی صفحه خودمون داریم که به‌صورت مستقل اصلاً در واقع ماهیت نداره. فرض کنید شما در همون صفحه PLP خودتون که محصولات متفاوت رو دارین، شما یک سایدباری دارین که داخل سایدبار به‌عنوان مثال، موجود یا عدم موجود بودن یک محصول، بازه قیمتی که می‌تونید انتخاب کنید، برندهایی که هستن و شما می‌تونین انتخاب کنین که محصولات در واقع فیلتر بشن.

شما در سایدبار خودتون یک aside ای دارین که داخل اون تگ aside یک‌سری محتوا های جانبی و مکمل اون صفحه قرار گرفتن. تگ details رو به‌عنوان مثال اینجا داریم. خیلی وقتا پیش میاد، برای اینکه تجربه کاربری مطلوبی داشته باشیم، محتوای خودمون رو داخل یک آکاردئون قرار می‌دیم.

این آکاردئون معمولاً با CSS استایل هندل می‌شه، به شکلی که شما روش کلیک می‌کنین، آکاردئون باز میشه می‌شه، و وقتی روش یک مرتبه دیگه می‌زنین، آکاردئون بسته می‌شه. تگی که به‌صورت معنایی در HTML5 برای این مورد هست، تگ details هست که می‌تونین ازش بهره ببرین. در ادامه هم به‌عنوان مثال dfn رو داریم که یک مورد دیگه‌ایه که می‌تونیم ازش بهره ببریم.

مثلاً شما یک جایی در حال تعریف کردن این هستین که CSS چیه. به‌عنوان مثال یه مقاله دارین روی وب‌سایت خودتون منتشر می‌کنین در ارتباط با CSS چیست یا اصلاً SEO چیست، و می‌خواین بیاین یک توضیحی از اون مورد بیان کنین. کاری که شما می‌تونید انجام بدین این هستش که یک تگ dfn باز و بسته کنین و اون عبارت مدنظر خودتون رو، به‌عنوان مثال CSS یا SEO یا هر چیزی که هست، رو اونجا بنویسین. و یک تگ dfn خودش یک attribute title هم داره.

برای اینکه بتونیم همه موارد رو با هم مشاهده کنیم، یکی از بهترین جاها داکیومنتیشن موزیلا هستش که اینجا لینکش رو مشاهده می‌کنین.

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

داخل این داکیومنتیشن ما تگ‌های متفاوت رو داریم. شما می‌تونین به این شکل در واقع خود داکیومنت رو مطالعه کنین. اینجا کاری که می‌خوام انجام بدم، از سایدبار، تگ‌هایی که بیان کردم رو با همدیگه بررسی کنیم. به‌عنوان مثال، اینجا dfn رو بیان کردم که جست‌وجوش می‌کنیم. زمانی که شما بر روی هرکدوم از این تگ‌ها بزنین، معانی شون رو به‌صورت کامل می‌تونیم مشاهده کنیم.

در ادامه هم می‌بینیم یه attribute داره title. اینجا title رو نیومده استفاده کنه. من به‌عنوان مثال اینجا validator رو پاک می‌کنم، می‌ذارم CSS و اینجا به جای اینکه در واقع حالا در کنار id که داره، یک title می‌زنم. title equals CSS رو جست‌وجو می‌کنیم که در واقع Cascading Style Sheets می‌شه، این رو کپی می‌کنیم و برمی‌گردیم اینجا و جایگذاریش می‌کنیم. در واقع این به‌صورت معنایی به یک کرالر متوجه می‌کنه ما داریم تعریف CSS رو به‌عنوان مثال، اینجا انجام می‌دیم.

همون‌طور که می‌بینین، وقتی روی CSS هاور می‌کنم، اون عبارتی که به‌عنوان title گذاشته بودم رو میاد روش نشون می‌ده. در کنار dfn  تگ details رو بیان کردم که یک حالت آکاردئونی داره، اینجا مشاهده می‌کنیم. اینجا یک تگ summary می‌گیره که در ادامه summary هم اون متنی که می‌خوایم داخل در واقع details قرار بگیره، قرار گرفته.

من وقتی روی details می‌زنم، این متنی که اینجا هست رو اینجا به من نشون می‌ده. شما اینجا می‌تونین attribute های متفاوتی که برای تگ details هست رو مشاهده کنین، و از طرف دیگه هم ممکنه ظاهرش به شکلی نباشه که مدنظر شماست. طبیعتا با تغییر دادن استایل‌هایی که به این المنت اعمال می‌شه، که اینجا تگ details رو داریم، می‌تونیم به شکل متفاوتی در صفحه خودتون نمایش بدین.

به‌عنوان مثال، اینجا یه تگ دیگه‌ای رو هم داریم به‌عنوان dialog. این تگ به این شکله که خیلی وقتا ما می‌خوایم یک متنی رو به‌عنوان pop-up نشون بدیم در صفحه خودمون، ولی خب پیاده‌سازی این مورد هم حتی برای تیم فنی سخت هستش. در داخل HTML ما تگی داریم به‌عنوان dialog که به‌صورت معنایی کامل میاد این رو مشخص می‌کنه که اینجا ما یه dialog داریم، بعد چی نمایش پیدا کنه. و به‌عنوان مثال من اینجا بیام روی OK بزنم، resultمون می‌ره. یکی از مواردی که باید در نظر داشته باشیم این هستش که آیا این تگی که ما مدنظر داریم استفاده کنیم، توسط مرورگر ها پشتیبانی می‌شه یا نه. یک وب‌سایتی هست به نام “Can I use”.

برای مشاهده سایت Can i use بر روی این لینک کلیک کنید.

به‌عنوان مثال اینجا من میام تگ dialog رو می‌زنم. اینجا می‌بینیم اولین نتیجه ای که برای من میاره به اون تگ مدنظر من مشخص نیست. در واقع داره اشاره می‌کنه یا نه. آها اینجا در واقع اون HTML Element dialog. توجه کنیم دقیقاً دنبال اون مورد مدنظر خودمون باشیم. ممکنه نتیجه های متفاوتی اینجا برای ما برگرده که مدنظر ما نیستن. ما باید پیدا کنیم. به‌عنوان مثال اینجا تگ dialog بود. اینجا زده HTML Element dialog. توجه هم داشته باشیم یوزرهایی که بر روی وب‌سایت ما دارن فعالیت می‌کنن و در واقع در حال گشتن هستن، از چه مرورگری استفاده دارن می‌کنن، به اون موردم باید در نظر داشته باشیم.

مثلاً اینجا ما داریم، اینجا Chrome رو داریم که در واقع می‌بینیم از Chrome 37 به بعد داره پشتیبانی می‌شه؛ 37 تا 113، 111، 115 و حالا 115 تا 117. در واقع و اینجا هم البته داره بیان می‌کنه که چند درصد مرورگر ها رو تشکیل دادن. به‌عنوان مثال من اینجا بر روی 37 تا 113 دارم هاور می‌کنم، اینجا می‌بینیم Global زده 25.3 درصد. به این شکل خیال ما راحت می‌شه وقتی داریم از این تگ استفاده می‌کنیم، مرورگرهای متفاوت پشتیبانیش  می‌کنن. یا این مورد ممکنه برای image WebP هم باشه که البته توضیحاتش رو خواهیم داد. ولی به‌عنوان مثال زمانی که ما می‌خوایم ببینیم حتی یک فرمتی مثل WebP ساپورت می‌شه یا نه، اینجا جست‌وجو می‌کنیم و می‌بینیم به چه شکل هستش. و حالا هر کدوم از این موارد جزئیاتش رو بخوایم، می‌تونیم روش موس رو نگه داریم و جزئیاتش رو بررسی کنیم.

جمع بندی:

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

اگر سوال یا نظری درباره این ویدیو و محتوا داشتین، خوشحال می‌شیم برامون کامنت بذارین. اگه می‌خوای به‌عنوان یه کارشناس سئو، تسلط کامل روی مباحث فنی پیدا کنی، دوره سئو تکنیکال آنالیتیپس می‌تونه مسیرت رو هموار کنه.