Google تأیید می کند که نام های کلاس CSS روی SEO تأثیر نمی گذارد
در یک قسمت اخیر از جستجوی Google Off Record Podcast ، مارتین اسپلیت و جان مولر توضیح دادند که چگونه CSS بر SEO تأثیر می گذارد.
در حالی که برخی از جنبه های CSS هیچ تاثیری در سئو ندارد ، برخی دیگر می توانند به طور مستقیم بر نحوه تفسیر و رتبه بندی موتورهای جستجو تأثیر بگذارند.
در اینجا آنچه مهم است و چه چیزی نیست.
نام کلاس برای رتبه بندی مهم نیست
یکی از واضح ترین راه حل های این قسمت این است که نام های کلاس CSS هیچ تاثیری در جستجوی Google ندارند.
Splitt اظهار داشت:
“من فکر نمی کنم که این کار را انجام دهد. این از منظر سئو تفاوت ایجاد نمی کند. “
آنها توضیح دادند که نام کلاس فقط برای استفاده از یک ظاهر طراحی بصری استفاده می شود. آنها بخشی از محتوای صفحه محسوب نمی شوند. بنابراین آنها هنگام استخراج اطلاعات معنی دار توسط GoogleBot و سایر تجزیه کنندگان HTML نادیده گرفته می شوند.
حتی اگر HTML را به یک مدل زبان یا یک خزنده اساسی تغذیه می کنید ، نام کلاس در آن عامل نخواهد بود مگر اینکه سیستم شما به صراحت طراحی شود تا آن ویژگی ها را بخوانید.
چرا محتوا در عناصر شبه یک مشکل است
در حالی که نام کلاس بی ضرر است ، تیم در مورد قرار دادن محتوای معنی دار در عناصر شبه CSS مانند CSS هشدار داد :before وت :afterبشر
Splitt اظهار داشت:
“ایده دوباره – ایده اصلی – ارائه جدا کردن از محتوا است. بنابراین محتوا در HTML است ، و نحوه ارائه آن در CSS است. بنابراین با
beforeوتafter، اگر عناصر تزئینی مانند یک مثلث کوچک یا کمی نقطه یا کمی لامپ را اضافه کنید یا مانند یک تک شاخ کوچک – هرچه – فکر می کنم خوب است زیرا تزئینی است. این به معنای محتوا معنی ندارد. بدون آن ، هنوز خوب خواهد بود. “
اضافه کردن شکوفه های بصری قابل قبول است ، اما درج عناوین ، پاراگراف ها یا هر محتوای کاربر در عناصر شبه ، اصل اصلی توسعه وب را می شکند.
این محتوا برای موتورهای جستجوگر ، خوانندگان صفحه نمایش و هر ابزاری دیگر که به جدا کردن HTML به طور مستقیم متکی هستند ، نامرئی می شود.
مولر نمونه ای از دنیای واقعی را به اشتراک گذاشت که چگونه این امر به اشتباه پیش می رود:
وی گفت: “یک بار تشدید از تیم نمایه سازی وجود داشت که می گفت ما باید با سایت تماس بگیریم و به آنها بگوییم که استفاده را متوقف کنند
beforeوتafter… آنها از آنها استفاده می کردندbeforeشبه کلاس برای اضافه کردن یک علامت شماره به هر آنچه که آنها هشتگ می دانستند. و سیستم نمایه سازی ما مانند این بود ، اگر بتوانیم این هشتگ ها را در صفحه بشناسیم بسیار خوب خواهد بود زیرا شاید برای چیزی مفید باشند. “
از آنجا که نمادهای هشتگ از طریق CSS اضافه می شود ، آنها هرگز توسط سیستم های Google دیده نمی شدند.
Splitt آن را در حین ضبط به صورت زنده آزمایش کرد و تأیید کرد:
“این در DOM نیست … بنابراین با ارائه ارائه نمی شود.”
CSS بزرگ می تواند به عملکرد آسیب برساند
این قسمت همچنین به موضوعات عملکرد مربوط به برگه های پف شده اشاره شده است.
براساس داده های موجود در آرشیو HTTP 2022 Web Almanac ، اندازه متوسط یک پرونده CSS برای موبایل و 72 کیلوبایت برای دسک تاپ به حدود 68 کیلوبایت افزایش یافته است.
مولر اظهار داشت:
“وب Almanac می گوید هر سال می بینیم که CS ها در اندازه رشد می کنند ، و در سال 2022 اندازه شیوه شیوه 68 کیلوبایت یا 72 کیلوبایت بود. آنها همچنین به بزرگترین موردی که پیدا کردند 78 مگابایت اشاره کردند. … اینها پرونده های متنی هستند.”
این نوع نفخ می تواند تأثیر منفی بر روی ویتام های اصلی و تجربه کلی کاربر ، که دو حوزه هستند انجام دادن رتبه بندی تأثیر می گذارد. چارچوب ها و کتابخانه های از پیش ساخته اغلب علت هستند.
در حالی که توسعه دهندگان می توانند این کار را با کوچک سازی و هرس قانون استفاده نشده کاهش دهند ، همه این کار را نمی کنند. این امر بهینه سازی CSS را به یک مورد ارزشمند در لیست چک فنی SEO شما تبدیل می کند.
CSS را خزنده نگه دارید
با وجود نقش محدود CSS در رتبه بندی ، Google هنوز هم توصیه می کند که پرونده های CSS را خزنده کند.
مولر شوخی کرد:
“دستورالعمل های Google می گوید شما باید پرونده های CSS خود را خزنده کنید. بنابراین باید در آنجا نوعی جادو وجود داشته باشد ، درست است؟”
دلیل واقعی فنی تر از جادویی است. GoogleBot از پرونده های CSS برای ارائه صفحات به روشی که کاربران آنها را می بینند استفاده می کند.
مسدود کردن CSS می تواند بر نحوه تفسیر صفحات شما تأثیر بگذارد ، به خصوص برای چیدمان ، دوست داشتن تلفن همراه یا عناصری مانند محتوای پنهان.
نکات عملی برای جوانب سئو
این به معنای این قسمت برای شیوه های سئو شما است:
- بهینه سازی نام کلاس را متوقف کنید: کلمات کلیدی در کلاس های CSS به رتبه بندی شما کمک نمی کند.
- عناصر شبه را بررسی کنید: هر محتوای واقعی ، مانند متن که برای خواندن است ، باید در HTML زندگی کند ، نه در
:beforeیا:afterبشر - اندازه شیوه حسابرسی: پرونده های بزرگ CSS می توانند به سرعت صفحه و ویتامین های اصلی وب آسیب برساند. آنچه می توانید را اصلاح کنید.
- اطمینان حاصل کنید که CSS قابل خزیدن است: مسدود کردن شیوه های شیوه ای ممکن است باعث اختلال در ارائه و تأثیرگذاری بر نحوه درک Google صفحه شما شود.
این تیم همچنین بر اهمیت استفاده از برچسب های HTML مناسب برای تصاویر معنی دار تأکید کرد:
“اگر تصویر بخشی از مطالب است و شما دوست دارید ،” به این خانه ای که من تازه خریداری کردم نگاه کنید ، “پس شما می خواهید
img، یک برچسب تصویر یا یکpictureبرچسب که در واقع تصویر واقعی را به عنوان بخشی از DOM دارد ، زیرا شما می خواهید ما را مانند آن ببینیم ، بنابراین این صفحه دارای این تصویر است که فقط دکوراسیون نیست. “
برای معنا از CSS برای یک ظاهر طراحی شده و HTML استفاده کنید. این جدایی هم به کاربران و هم به موتورهای جستجو کمک می کند.
به قسمت کامل پادکست در زیر گوش دهید:
