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

در این ویدیو، به اهمیت ساختار HTML در سئو تکنیکال پرداخته می‌شود. ابتدا تمپلیت‌های صفحات وب و نحوه بهینه‌سازی آن‌ها بررسی می‌شود. سپس، نکات مهم درباره تگ، متا تگ‌ها، Open Graph، Twitter Cards و Schema Markup توضیح داده می‌شود. در نهایت، روش‌هایی برای بهینه‌سازی HTML و ارائه مستندات به تیم فنی مطرح می‌شود تا ساختار صفحات بهینه‌تر شود.

 

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

یکی از مواردی که در تکنیکال سئو باید به آن توجه داشته باشیم، ساختار HTML صفحات مختلف وب‌سایت است. ما آگاهی داریم که وب‌سایت ما از تمپلیت‌های متفاوتی تشکیل شده است. به‌عنوان مثال، یک تمپلیت برای صفحات محصول (Product Pages) داریم. اگر تمام صفحات محصول را در سایت خود باز کنیم، متوجه خواهیم شد که داده‌های داخل این صفحات متفاوت‌اند، اما ساختار کلی آن‌ها یکسان است و تفاوت خاصی ندارند.

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

ما یک دایرکتوری داریم که مختص صفحات محصول است. این دایرکتوری یک تمپلیت دارد که در آن، فقط داده‌های محصول تغییر می‌کنند، اما ساختار کلی ثابت می‌ماند. کاری که باید انجام دهیم این است که آنالیزی روی HTML این تمپلیت انجام دهیم و آن را بهینه کنیم. وقتی این کار را انجام دادیم، می‌توانیم سراغ تمپلیت‌های دیگر برویم، مثلاً تمپلیت صفحات لیست محصولات (Product Listing Page – PLP).

در این مرحله، سوالی که پیش می‌آید این است که چه مواردی را باید در بهینه‌سازی HTML در نظر بگیریم؟ وقتی یک HTML را آنالیز می‌کنیم، می‌دانیم که هر صفحه وب شامل یک تگ HTML در ابتدا و انتهای خودش دارد. درون این تگ HTML، یک تگ Head و Body باز و بسته داریم. این دو تگ داخل یکدیگر نیستند، بلکه هر دو داخل تگ HTML قرار می‌گیرند.

بیشتر بدانید: robots txt چیست؟

ساختار بهینه تگ:
تگ Head چه ساختاری باید داشته باشد؟ اینجا ما یک مورد را به عنوان مثال باهم دیگه بررسی می کنیم و ممکن است که سایت با سایت متفاوت باشد ولی به صورت کلی اگر یک سی ام اس اختصاصی دارید و می توانید مواردی که در تگ Head هستند را شخصی سازی کنید می توانید از این ساختار استفاده کنید.

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

در ابتدای سند DOCTYPE  , HTML را داریم که مشخص می‌کند این فایل یک سند HTML5 است. سپس یک تگ HTML داریم که:

  • مشخص می‌کند زبان صفحه چیست (lang=”fa”)
  • جهت نوشتاری صفحه را تعیین می‌کند (dir=”rtl”)
  • Prefix برای Open Graph را تنظیم می‌کند (prefix=”og”)

در ادامه، تگ های اصلی ای را داریم که ضرروی هستند تا در Head قرار بگیرند:

  • Meta Charset: تعیین می‌کند کدگذاری صفحه UTF-8 باشد (و باید در 1024 بایت ابتدایی صفحه قرار بگیرد، وگرنه توسط مرورگر نادیده گرفته می‌شود).
  • Meta http-equiv = که مشخص می کند آیا با مرورگر IE سازگار است یا نه.

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

  • Title = عنوان صفحه در آن قرار می گیرد
  • Description = توضیحاتی صفحه داخل آن قرار می گیرد
  • Meta Viewport: تنظیم ابعاد نمایش برای موبایل و دسکتاپ.
  • Canonical URL: این تگ باید حتماً به‌صورت مطلق (Absolute) باشد و از مسیر نسبی (Relative URL) استفاده نشود.
  • در بخش Open Graph، اطلاعاتی برای اشتراک‌گذاری صفحه در شبکه‌های اجتماعی اضافه می‌شود. بسته به نوع صفحه، می‌توان مقادیر متفاوتی در Open Graph تعریف کرد.

مثلاً:

  • گر سایت شما موزیک است، می‌توانید از og:audio استفاده کنید.
  • اگر سایت شما فروشگاه کتاب است، می‌توانید از og:book استفاده کنید.
  • بعد از Open Graph، به Twitter Cards می‌رسیم که برای نمایش بهتر لینک‌ها در توییتر استفاده می‌شود.

برای کسب اطلاعات بیشتر می توانید از وب سایت The Open Graph protocol استفاده کنید.

بیشتر بدانید: آموزش استفاده از Bing Webmaster Tools

بعد از og تگ ها می‌رسیم به توییتر کارت ها، در این بخش ما می توانیم اطلاعات مورد نظر را از بخش توسعه دهندگان خود توییتر اطلاعات مورد نیازمان را ببینیم و استفاده کنیم. اگر با توجه به اینکه نسبت به هر سایتی این موارد می تواند متفاوت باشد رد بشیم، در اینجا، مثلاً Twitter Card را روی Summary Large Image تنظیم می‌کنیم تا لینک با یک تصویر بزرگ نمایش داده شود. همچنین می‌توان اطلاعاتی مثل نام سایت، عنوان، توضیحات و قیمت محصول را نیز مشخص کرد.

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

سپس تگ‌های Tracking مانند Google Tag Manager یا اسکریپت‌های آنالیز تبلیغاتی مختص به یکتانت و مدیا ادز اضافه می‌شوند. در نظر داشته باشید باید بررسی کنیم زمانی که اسکریپت را پایین صفحه قرار دادیم، آیا تگ های Tracking به درستی کار می کنند یا نه و در ادامه هم Css ها و Js ها را قرار می دهیم.

در انتها، Schema Markup را اضافه می‌کنیم.

معمولاً از JSON-LD Schema برای این کار استفاده می‌شود. در هر سایتی نسبت به موضوعات مختلف آن چه فروشگاهی باشد چه شرکتی، اسکیما ها می توانند متفاوت یا حتی داینامیک باشند، ولی با توجه به ارائه کردن این مستندات تیم فنی می تواند یک دید کلی بدست بیاورد تا در نهایت بتواند خروجی کار را بهتر کند.

جمع بندی:

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