شبکه | آموزش و مقالات شبکه، وب، سرور و اینترنت

آموزش‌های کلادفلر به‌زودی در این بخش قرار داده می‌شود.

تاثیر CSS بر سئو، دیدگاه رسمی گوگل

نوشته شده توسط

سروش احمدی

در

درس: CSS و تاثیر اون روی سئو، از زبان گوگل

مدت زمان مطالعه: یه چیزی حدود ۸ دقیقه

پیش‌نیازها: آشنایی اولیه با HTML و CSS

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

فصل اول: چرا اصلا CSS برای گوگل مهمه؟

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

گوگل رسما توی راهنماهای خودش به وبمسترها توصیه کرده که اجازه دسترسی رباتش به فایلهای CSS و JS رو بدن. این موضوع از سال ۲۰۱۴ به بعد خیلی جدی‌تر هم شد. اگر گوگل نتونه فایلهای CSS سایت شما رو ببینه، نمیتونه صفحه رو درست رندر کنه و این قضیه میتونه روی رتبه بندی شما تاثیر منفی بذاره. چرا؟ چون ممکنه گوگل فکر کنه سایت شما برای کاربرا خراب نشون داده میشه یا اصلا محتوای اصلی رو تشخیص نده.

یک اصل کلی هم وجود داره که گوگل روش تاکید میکنه:

  • HTML برای محتوا و ساختاره.
  • CSS برای ظاهر و استایله.

مخلوط کردن این دوتا، مخصوصا قرار دادن محتوای مهم داخل CSS، میتونه درک موتور جستجو از سایت شما رو دچار مشکل کنه.

فصل دوم: کراول کردن فایلهای CSS

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

فایلهای CSS و JS رو توی robots.txt بلاک نکنید

خیلی مهمه که توی فایل robots.txt سایتتون، دسترسی گوگل به فایلهای CSS و جاوا اسکریپت رو مسدود نکرده باشید. اگه این کار رو بکنید، ممکنه توی گوگل سرچ کنسول با ارورهایی مواجه بشید که بهتون میگه گوگل نمیتونه صفحه رو کامل رندر کنه.

یه نکته جالب از یکی از گفتگوهای قدیمی تو فروم Moz اینه که ربات گوگل فایلهای CSS یا JS رو «ایندکس» نمیکنه. یعنی این فایلها رو توی نتایج جستجو نشون نمیده (مثل فایلهای PDF یا صفحات HTML). گوگل فقط اونها رو «کراول» میکنه تا برای رندر کردن صفحه ازشون استفاده کنه.

پس اگه نگران ایندکس شدن این فایلها هستید، راه حل بلاک کردن اونها نیست. به جای این کار، میشه از تگ X-Robots-Tag: "noindex" توی هدر HTTP سرور استفاده کرد. اینطوری به گوگل میگید فایل رو کراول کن ولی ایندکسش نکن.

ترکیب Disallow با noindex

شاید فکر کنید میشه یک صفحه رو هم با Disallow توی robots.txt بلاک کرد و هم تگ meta noindex رو داخلش گذاشت. این کار ممکن نیست، چون Disallow جلوی کراول شدن صفحه رو میگیره و گوگل هیچوقت اون تگ meta noindex رو نمیبینه.

یه راه دیگه اضافه کردن دستور noindex به خود فایل robots.txt هست. اما جان مولر از گوگل گفته که «نباید روی این روش حساب کنید»، چون روش قابل اعتمادی نیست. پس بهتره ازش دوری کنید.

فصل سوم: معمای «متن مخفی»

این یکی از داغ‌ترین بحث‌های سئو و CSS هست. خیلی از توسعه‌دهنده‌ها برای تکنیک‌هایی مثل جایگزینی تصویر (Image Replacement) یا لینک‌های کمکی برای افراد کم‌توان، از CSS برای مخفی کردن متن استفاده میکنن. سوال اینه که گوگل این کار رو اسپم حساب میکنه یا نه؟

مت کاتس، که سالها یکی از چهره‌های اصلی تیم اسپم گوگل بود، چندتا جمله کلیدی در این مورد داره:

«من توصیه نمیکنم که مردم از CSS برای مخفی کردن متن استفاده کنن.»

این جمله اولش خیلی نگران کننده به نظر میرسه. اما خودش در ادامه توضیح میده که قضیه به «نیت» شما بستگی داره. اون میگه:

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

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

مت کاتس یه نکته دیگه هم گفته:

«ما در گوگل میتونیم متنی که به نظر میرسه با CSS مخفی شده رو پرچم‌گذاری (flag) کنیم. تا به امروز، ما سایتها رو به صورت الگوریتمی برای این کار حذف نکردیم.»

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

تکنیک‌های رایج مخفی‌سازی و نظر گوگل

  • display: none;: جان مولر و مارتین اسپلیت توی یکی از گفتگوهاشون تایید کردن که وقتی از display: none; استفاده میکنید، اون عنصر به طور موثر از چیدمان بصری و معمولا از DOM رندر شده برای موتورهای جستجو هم حذف میشه. یعنی گوگل هم اون محتوا رو نمیبینه و ایندکسش نمیکنه. این تکنیک برای مخفی کردن محتوا از گوگل کاملا موثره، ولی اگه محتوای مهمی داخلش باشه، به ضرر سئو شماست.
  • text-indent: -9999px;: این روش متن رو از صفحه نمایش به بیرون هل میده. گوگل کاملا با این تکنیک آشناست و اگه برای مقاصد اسپم (مثل مخفی کردن کلمات کلیدی) استفاده بشه، میتونه جریمه به همراه داشته باشه.
  • رنگ متن و پس‌زمینه یکسان: این هم یکی از قدیمی‌ترین ترفندهاست که گوگل به راحتی تشخیصش میده.

فصل چهارم: تاثیر پراپرتی‌های خاص CSS روی سئو (از زبان گوگل)

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

  • اسم کلاس‌های CSS (CSS Class Names)
    اسم‌هایی که برای کلاس‌های CSS انتخاب میکنید، هیچ تاثیر مستقیمی روی سئو ندارن. گوگل اونها رو به عنوان بخشی از محتوای متنی قابل مشاهده در نظر نمیگیره و برای کلمات کلیدی یا رتبه‌بندی تحلیلشون نمیکنه. میتونید اسم کلاس‌هاتون رو هر چیزی بذارید.
  • قانون !important
    این دستور هم هیچ تاثیری روی سئو نداره. کارش فقط اینه که یک استایل خاص رو به زور اعمال کنه و ربطی به محتوا نداره.
  • عناصر مجازی (::before و ::after)
    این یکی خیلی مهمه. محتوایی که با ::before یا ::after به یک عنصر اضافه میکنید، توی Document Object Model (DOM) قرار نمیگیره و در نتیجه توسط سیستم‌های رندرینگ و ایندکسینگ گوگل دیده نمیشه. پس هیچوقت از این عناصر مجازی برای اضافه کردن محتوای مهم و متنی که میخواید ایندکس بشه استفاده نکنید. مثلا اگه میخواید کنار کلماتتون علامت هشتگ بذارید، این علامت رو مستقیما توی HTML بنویسید، نه با ::before. این عناصر فقط برای مقاصد تزئینی (مثل آیکون‌ها) هستن.
  • تصاویر در CSS در مقابل تگ <img> در HTML
    اینم یه نکته کلیدی دیگه است. تصاویری که با پراپرتی background-image توی CSS قرار میدید، برای عناصر تزئینی هستن و محتوای ضروری رو منتقل نمیکنن. این تصاویر توسط موتورهای جستجو به عنوان عکس ایندکس نمیشن.
    برای تصاویری که بخشی از محتوای اصلی صفحه هستن (مثل عکس محصول، نمودار، یا عکس‌های یک مقاله خبری)، همیشه باید از تگ‌های HTML مثل <img> یا <picture> استفاده کنید. اینطوری عکس‌ها بخشی از DOM میشن، میتونن توسط جستجوی تصاویر گوگل ایندکس بشن و گوگل میتونه با استفاده از متن اطراف و تگ alt محتواشون رو بفهمه.
  • واحدهای Viewport (مثلا 100vh)
    استفاده از واحدهایی مثل 100vh (صد در صد ارتفاع ویوپورت) برای عناصری مثل تصاویر هیرو (hero images) میتونه توی ابزارهای پیش‌نمایش رندر گوگل مشکل ایجاد کنه. ممکنه این عناصر بیش از حد بزرگ نشون داده بشن و محتوای اصلی رو از دید خارج کنن. اگرچه این موضوع احتمالا به طور مستقیم روی ایندکس شدن تاثیر نمیذاره (اگه محتوا هنوز توی DOM باشه)، اما میتونه نشونه‌ای از یک مشکل دسترسی‌پذیری (accessibility) باشه و دیباگ کردن رو سخت کنه.
  • استفاده از CSS برای ساختن لی‌اوت‌های جدولی
    اگه داده‌های جدولی واقعی دارید (مثل جدول قیمت یا مشخصات)، استفاده از CSS برای ساختن چیزی شبیه جدول کار اشتباهیه. همیشه برای داده‌های جدولی از تگ‌های HTML <table> استفاده کنید. این کار به موتورهای جستجو (و صفحه‌خوان‌ها) اجازه میده سطرها و ستون‌ها رو تشخیص بدن و اطلاعات ساختاریافته شما رو بهتر بفهمن و ایندکس کنن.

منابع

دیدگاه‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نوشته‌های بیشتر