بررسی چند مثال و آموزش نحوه آنالیز تگ های معنایی با ابزارها

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

اما بیایید یک قدم به عقب برگردیم و با عینک یک کارشناس سئو به ماجرا نگاه کنیم. آیا ربات‌های گوگل هم دقیقا همین ساختار باشکوه را درک می‌کنند؟

واقعیت این است که گاهی اوقات، ظاهر سایت ما را فریب می‌دهد. ممکن است آن منوی بزرگ اصلا در کدهای اصلی HTML صفحه وجود نداشته باشد و صرفا با یک دستور جاوا اسکریپتی برای بهبود تجربه کاربری (UX) در لحظه کلیکِ کاربر، به صفحه اضافه شود. در چنین شرایطی، گوگل ممکن است اصلا آن منو را نبیند! به همین دلیل است که طراحان سایت با خیال راحت داخل چنین منوهایی عکس، آیکون و المان‌های گرافیکی سنگین قرار می‌دهند، چون می‌دانند این بخش‌ها در ساختار پایه وب‌سایت قرار ندارند و قرار نیست توسط ربات‌ها پردازش شوند.

موبایل فرست ایندکس و راز منوهای پنهان

وقتی می‌خواهید سلامت فنی و ساختار یک سایت را بررسی کنید، اولین جایی که باید به آن نگاه کنید کجاست؟ دسکتاپ؟ قطعا خیر.

امروزه گوگل سایت‌ها را با رویکرد «موبایل فرست» (Mobile-First Indexing) بررسی و فهرست‌بندی می‌کند. یعنی نسخه موبایل سایت شما، نسخه اصلی و معیار تصمیم‌گیری گوگل است. اگر همان سایت با منوی بزرگ را در نسخه موبایل باز کنیم و کدهای آن را بررسی کنیم، متوجه می‌شویم که آیا منو واقعا یک المان معتبر در صفحه هست یا خیر.

اگر در نسخه موبایل، منو به درستی در کدهای صفحه (DOM) لود شده باشد و حضور فیزیکی داشته باشد، گوگل به راحتی آن را می‌بیند و مسیرهای سایت را درک می‌کند. یکی از تله‌هایی که بسیاری از افراد در مسیر حرفه‌ای خود در آن می‌افتند، بحث و جدل روی دیده شدن یا نشدن یک منو در نسخه دسکتاپ است. وقتی تمرکز اصلی گوگل روی موبایل است، صرف کردن زمان و انرژی برای اصلاحاتی که فقط مربوط به دسکتاپ هستند، کمک چندانی به رشد ارگانیک سایت نخواهد کرد.

کالبدشکافی صفحه با تگ‌های معنایی (Semantic Tags)

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

تگ‌های معنایی یا Semantic HTML به ربات‌ها می‌گویند که هر بخش از صفحه چه هویتی دارد و چه نقشی را ایفا می‌کند. به عنوان مثال:

• تگ <main>: به ربات‌ها می‌گوید بدنه و محتوای اصلی این صفحه دقیقا کجاست تا آن را از سایدبار یا فوتر تفکیک کنند.
• تگ <nav>: نشان‌دهنده بخش‌های ناوبری و منوهای سایت است.
• تگ <article>: به محتواهای مستقل مانند پست‌های یک وبلاگ یا اخبار اشاره می‌کند.

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

جعبه ابزار سبک و کاربردی برای ویرایش کدها

شاید با خواندن این مفاهیم فکر کنید که برای تغییر این ساختارها، باید به اندازه یک برنامه‌نویس ارشد ابزارهای پیچیده داشته باشید. اما اصلا این‌طور نیست.

نیازی نیست نرم‌افزارهای سنگینی مثل PHPStorm یا Visual Studio را نصب کنید تا چند تغییر کوچک در کدهای سایت ایجاد کنید. گاهی یک ابزار بسیار سبک و ساده مثل Notepad++ تمام نیازهای شما را برطرف می‌کند. نکته جذاب در مورد این نرم‌افزار این است که با وجود رایگان و سبک بودن، افزونه‌های (Plugins) بسیار کاربردی برای ارتباط با سرور دارد.

یکی از این افزونه‌های به شدت مفید، NppFTP نام دارد. با استفاده از این افزونه می‌توانید:

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

دسترسی‌پذیری (Accessibility): نگاهی از دریچه‌ای متفاوت

معمولا در فرآیند بهینه‌سازی سایت، تمام توجه ما معطوف به ربات‌های خزنده‌ گوگل است. اما بعد مهم دیگری وجود دارد که مستقیما روی تجربه کاربری (UX) و به شکل غیرمستقیم روی کیفیت سایت تاثیر می‌گذارد: دسترسی‌پذیری یا Accessibility.

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

• کنتراست و تضاد رنگی پایین: فرض کنید رنگ متن مسیر راهنما (Breadcrumbs) در سایت شما بیش از حد خاکستری و کمرنگ است. افزونه‌های دسترسی‌پذیری به شما هشدار می‌دهند که این متن خوانایی لازم را ندارد و حتی خط کد آن را مشخص می‌کنند تا بدانید دقیقا کجا باید اصلاح شود.
• بحران هدینگ‌ها در ساختار: این ابزارها به صورت بصری به شما نشان می‌دهند که تیترهای H1 تا H6 در کجای صفحه پخش شده‌اند. ممکن است با یک نگاه متوجه شوید که در فوتر سایت، به صورت اشتباه و تکرارشونده از تگ H2 استفاده شده است! تگی که باید فقط برای بخش‌بندی محتوای اصلی به کار برود.
• برچسب‌ها و تگ‌های Aria: به شما نشان می‌دهند که آیا دکمه‌ها و لینک‌ها برای نرم‌افزارهای صفحه‌خوان، معنادار هستند یا خیر.

با وجود اینکه ابزارهایی مثل Lighthouse خود گوگل هم گزارش‌های دسترسی‌پذیری را ارائه می‌دهند، اما افزونه‌های تخصصی، این مشکلات را با جزئیات جذاب‌تری مستقیما روی ظاهر خود سایت (On-Page) به شما نشان می‌دهند.

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