بهینه سازی CSS و فایل‌های استایل سایت برای موتورهای جستجو

چیست ؟

CSS زبان برنامه نویسی می‌باشد که کنسرسیوم بین‌المللی شبکه جهانی وب برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML به وجود آمده است پیشنهاد داده است. عملاً این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلأهای آن دارد.
CSS زبانی است که توسط آن قادر خواهید تا استیل طراحی صفحات وب سایتتان را یک‌بار تعریف و به صفحات مورد نیازتان اعمال نمایید.
برای این منظور مثالی را می‌زنیم. تصور کنید که سایت شما شامل 50 صفحه استاتیک می‌باشد و شما آن‌ها را تماماً به زبان HTML نوشته‌اید. بعد از یک هفته تصمیم گرفته‌اید تا فونت تمام کلمات را کمی بزرگ‌تر کنید. گفتن اینکه فونت تمام کلمات بزرگ‌تر شود بسیار کار راحتی است و تنها یک جمله است. ولی آیا در عمل تغییر 100 صفحه نیز به همان راحتی خواهد بود؟ قطعاً نه. CSS دقیقاً همان زبانی است که جمله یک خطی شما را تبدیل به همان یک جمله خواهد کرد. شما تنها کافی است تا استیل مورد نیازتان را در طراحی تغییر دهید و آن هم تنها با تغییر یک یا چند مورد کوچک.
استفاده از CSS باعث تمیزتر شدن کدهای برنامه‌نویسی تان می‌شود، تغییرات آتی را آسان می‌کند و همچنین دید شما را بیشتر به طراحی معطوف می‌کند تا سر و کله زدن با کدهای برنامه نویسی و همچنین مسائل مربوط به سئو را در سایت شما روان‌تر می‌کند.
اهمیت CSS برای موتورهای جستجو

از زمانی که CSS ها به وجود آمدند دید موتورهای جستجو به وب سایت هم تغییر کرد. قبلاً می‌شد به یک سایت از روی کدهای داخلی آن امتیاز داد ولی بعد از درست شدن CSS ها دیگر نمی‌شد به سایت‌ها اعتماد کرد. موتورهای جستجو که تا قبل از به وجود آمدن استایل ها از روی تگ‌ها و اندازه ای که در صفحه به وجود می‌آورد به آن امتیاز می‌دادند این بار با یک مشکل جدی مواجه شدند.
اجازه بدهید یک مثال بزنم: تگ بدون استایل با استایل H3
CSS و سئو

CSS و سئو
P بهینه سازی
بهینه سازی Small گوگل گوگل
در مثال بالا همین‌طور که مشاهده مینمائید هیچ کدام از خرجی‌های یک تگ با هم مساوی نیستند.
امروزه موتورهای جستجو و خصوصاً گوگل و بینگ چنان پیشرفت کرده‌اند که حتی گوگل به دنبال CSS شما در یک سایت دیگر رفته و از همه نظر حتی تگ‌هایی که داخل CSS شما هست ولی در صفحات اجرا نمی‌شود را شناسایی و به آن‌ها نمره منفی می‌دهد و از این رو موتورهای جستجو خصوصا گوگل قبل از آمدن هر ورژنی از CSS آن را شناسایی می‌کند و همین الان هم CSS ورژن چهار را به خوبی می‌شناسد.
قبل از هر چیز باید بدانید که اگر به هر تگ مقدار ندهید مقدار آن مساوی استاندارد W3C تعیین خواهد شد.
بهینه سازی CSS های یک صفحه

شناخت CSS در صفحه

هر کدام از صفحات شما چند نوع استایل دارند:
یا درون خود تگ‌ها صدا زده می‌شوند مانند:

<h3 style=”font-size: 8pt;”></h3>

یا از یک استایل داخل همان صفحه صدا زده می‌شوند:

<style>
h3{
font-size: 8pt;
}
</style>

ممکن است که در داخل یک فایل CSS باشند و در هدر صدا زده شوند:

<link rel=”stylesheet” type=”text/CSS” media=”all” href=”http://1seo.ir/wp-content/themes/synchro/style.CSS” />

ممکن هم هست به طرق دیگری ساخته شوند مانند جاوا اسکریپت‌ها.

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

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

حتما در فایل CSS شما هستند class و یا id هایی که اجرا نمی‌شوند و فقط حجم فایل استایل را بزرگ کرده‌اند. باید آن‌ها را دنبال کنید و در صورتی که در هیچ صفحه ای اجرا نمی‌شوند آن‌ها را حذف کنید تا موتورهای جستجو با یک CSS کوتاه و تمیز روبرو شوند.
انتقال استایل درون صفحه به CSS اصلی

تمام کدهای شما باید طوری بهینه شده باشند که اگر واقعاً قرار است در هر صفحه یک بار یک تگ فراخوانی شود استایل درون خود تگ باشد ولی اگر در چندین جا یک استایل تکرار شده با دادن Class به تگ‌ها استایل آن‌ها را به فایل CSS انتقال دهید. همین کار را برای تگ Style داخل صفحه خود نیز انجام دهید.
در ضمن این یادتان باشد که با انجام این کار حجم صفحه html شما کاسته شده و یک امتیاز مثبت در سئو بدست می‌آورید.
هر استایل برای یک گروه از صفحات

قرار نیست کل وب سایت شما یک استایل داشته باشد. این کار کمک شایانی به کم شدن حجم CSS ها می‌کند. برای مثال وردپرس در حالت عادی یک یا دو استایل دارد (style.CSS , rtl.CSS) شما می‌توانید استایل صفحه اصلی، صفحه تگ‌ها، صفحه نوشته و صفحه آرشیو را از هم جدا کنید تا CSS سوخته کمتری داشته باشید.
هر صفحه فقط یک CSS

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

دست آخر باید CSS شما هم کوتاه شود و هم فشرده.
کوتاه سازی استایل

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

.1seo{
padding-top:25px;
padding-bottom:75px;
padding-right:140px;
padding-left:160px;
}.ali {padding:25px 140px 75px 160px;}

باید علاوه بر اینکه استایل‌های بی کاربرد حذف می‌شوند استایلهایی که تأثیر کمی در صفحه دارند و یا کم صدا زده می‌شوند را هم حذف کنید.
فشرده سازی استایل

این قسمت با کوتاه کردن استایل فرق دارد و وقتی همه کار ما تمام شد باید کل نوشته های داخل CSS فشرده شوند تا حجم کلی فایل CSS کمتر شود. برای این کار؛ آخر آخرین آی‌دی یا کلاس حذف می‌شود و از طرفی خط‌های اضافه نیز حذف شده و دستورات در یک یا دو خط قرار می‌گیرند. این دو کار آخر را می‌توانید به صورت آنلاین از طریق دو سایت  cleanCSS و CSScompressor نیز انجام دهید.
در پایان شاید وقت شما یک یا چند روزی گرفته شود ولی دیگر از بابت سئوی CSS سایتتان خیالتان راحت باشد. اگر خیلی برایتان سخت بود که CSS سایتتان را بهینه کنید می‌توانید از کارشناسان یک سئو برای همین منظور کمک بگیرید تا با هزینه‌ای پایین این کار را برای شما انجام دهند.

منبع : وان سئو