رابطه CSS و سئو

HTML: اسکلت و ساختار سایت

HTML که مخفف Hypertext Markup Language هست، مثل فونداسیون و اسکلت یه ساختمون عمل میکنه. این زبان، محتوای سایت شما رو ساختاربندی میکنه، فرقی هم نداره این محتوا متن باشه، عکس باشه یا لینک. برای کسی که میخواد کار سئو تکنیکال انجام بده، آشنایی با HTML خیلی مهمه، چون خیلی وقت‌ها باید مستقیم بره سراغ کدها تا مشکلاتی که روی عملکرد سئو تاثیر میذارن رو پیدا و حل کنه.

HTML از یه سری «تگ» برای ساختاربندی استفاده میکنه. مثلا:

• <title>: عنوان صفحه وب رو مشخص میکنه.
• <h1>: تیتر یا عنوان اصلی صفحه رو نشون میده.
• <p>: یک پاراگراف از متن رو مشخص میکنه.

یاد گرفتن HTML کمک میکنه تا مطمئن بشیم موتورهای جستجو مثل گوگل، ساختار اصلی سایت ما رو به درستی درک میکنن.

CSS: لباس و ظاهر سایت

CSS که مخفف Cascading Style Sheets هست، مسئولیت ظاهر و حس و حال سایت شما رو به عهده داره. اگه HTML ساختار محتوا رو میچینه، CSS میاد و به اون استایل میده. یعنی مشخص میکنه که مثلا تیترها، متن‌ها و عکس‌ها چطور نمایش داده بشن.

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

جاوا اسکریپت: هوش و رفتار سایت

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

چند تا از کاربردهای رایج جاوا اسکریپت اینها هستن:

• گوگل آنالیتیکس: برای ردیابی بازدیدکننده‌های سایت.
• فریمورک‌های جاوا اسکریپت مثل React یا Vue: برای قدرت بخشیدن به سایت‌های تعاملی.

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

بخش دوم: CSS چی هست و چرا اینقدر مهمه؟

حالا که با سه تفنگدار دنیای وب آشنا شدیم، بیاید تمرکزمون رو بذاریم روی CSS.

CSS یعنی چی؟

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

ساختار کدهای CSS چطوریه؟

کدهای CSS یه ساختار مشخص دارن:

• انتخابگر (Selector): به اون بخش از HTML اشاره میکنه که میخوایم بهش استایل بدیم.
• بلوک تعریف (Declaration Block): شامل یک یا چند تعریف هست که همیشه با نقطه ویرگول (semicolon) از هم جدا میشن.
• تعریف (Declaration): هر تعریف شامل یک نام ویژگی (property) و یک مقدار (value) هست که با دو نقطه (colon) از هم جدا میشن.
• تعریف‌ها همیشه با نقطه ویرگول تموم میشن و بلوک‌های تعریف هم داخل آکولاد {} قرار میگیرن.

بذارید یه مثال بزنیم تا بهتر متوجه بشید. فرض کنید میخوایم رنگ متن همه پاراگراف‌ها رو سبز کنیم:

p {
  color: green;
}

توی این مثال:

• p انتخابگر ماست که به تگ پاراگراف <p> اشاره میکنه.
• color نام ویژگی هست.
• green مقدار اون ویژگی هست.

این قانون ساده باعث میشه تمام پاراگراف‌های سایت شما متن سبز رنگ داشته باشن.

Tailwind CSS: یه روش جدید برای استایل دادن

حالا که با خود CSS آشنا شدیم، بیاید در مورد یکی از فریمورک‌های مدرن و محبوبش یعنی Tailwind CSS صحبت کنیم. تیل‌ویند یک فریمورک «utility-first» هست. یعنی به جای اینکه برای هر بخش از سایت یه کلاس CSS جدا بنویسیم، از یه سری کلاس‌های آماده و معنایی استفاده میکنیم که هر کدوم یه کار مشخص انجام میدن، مثلا رنگ پس‌زمینه رو تنظیم میکنن یا ضخامت فونت رو تغییر میدن.

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

مزیت‌های تیل‌ویند:

• شخصی‌سازی و تنظیمات: تیل‌ویند از اول با این ذهنیت طراحی شده که قابل شخصی‌سازی باشه. به طور پیش‌فرض، یه سری ابزار آماده مثل پالت رنگی، ویژگی‌های فونت و غیره داره. همه این تنظیمات در فایلی به اسم tailwind.config.js قرار دارن که میتونید هر طور که دوست دارید تغییرش بدید.
• انعطاف‌پذیری بالا: تیل‌ویند شما رو مجبور به کار خاصی نمیکنه. راه‌های زیادی برای پیاده‌سازی ویژگی‌هاش وجود داره. اگه هنوز دوست دارید خودتون CSS بنویسید، میتونید این کار رو انجام بدید. حتی برای بخش‌های پیچیده‌تر، گاهی بهتره که CSS خالص بنویسیم چون مدیریت بعضی چیزها با کنار هم چیدن کلاس‌ها در HTML خیلی سخت میشه.
• دستور @apply: وقتی در کنار تیل‌ویند، CSS جدید مینویسید، بهتره از دستور @apply استفاده کنید. این دستور به شما اجازه میده کلاس‌های تکراری رو از HTML بردارید و مستقیم توی فایل CSS قرار بدید. این خیلی خوبه چون میتونید از کلاس‌های تیل‌ویند استفاده کنید و بعدا اگه خواستید تغییری بدید، فقط کافیه فایل tailwind.config.js رو آپدیت کنید، به جای اینکه CSS خالص رو دستکاری کنید.

آیا شلوغ شدن HTML با کلاس‌ها بده؟

بزرگترین چیزی که باعث میشه توسعه‌دهنده‌ها از تیل‌ویند دوری کنن، اینه که باید کلی کلاس توی فایل HTML بنویسن و این فایل‌ها رو شلوغ میکنه. شاید به نظر بیاد که این کار با اصل DRY (خودت رو تکرار نکن) در تضاده. اما یادتون باشه که این یه فریمورک utility-first هست. ما ممکنه اسم کلاس رو تکرار کنیم، اما اون کلاس فقط یک استایل رو تعریف میکنه. راه‌هایی هم برای تمیز نگه داشتن HTML وجود داره، مثل همون دستور @apply که گفتیم، یا استفاده از کامپوننت‌ها.

با اینکه شاید ظاهر HTML شلوغ به نظر برسه، ولی مزیت‌هاش به معایبش میچربه. اینکه کلاس‌ها رو مستقیم در HTML کنار هم میچینید، باعث میشه موقع کدنویسی دیگه نیازی نباشه دائم بین فایل‌های مختلف جابجا بشید.

بخش سوم: پیوند عمیق بین CSS و سئو

خب، رسیدیم به بخش هیجان‌انگیز ماجرا. CSS چطوری روی سئو تاثیر میذاره؟

چرا CSS برای سئو مهمه؟

CSS به ما اجازه میده که ظاهر و استایل سایت رو از محتوای اصلی جدا کنیم. این جداسازی چند تا فایده بزرگ برای سئو داره:

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

گوگل رسما اعلام کرده که به CSS شما اهمیت میده. در سال ۲۰۱۴، گوگل راهنمای وبمستر خودش رو آپدیت کرد و توصیه کرد که به گوگل‌بات اجازه دسترسی به فایل‌های CSS و جاوا اسکریپت داده بشه تا بتونه صفحات رو مثل یک مرورگر واقعی ببینه و رندر کنه. این موضوع مخصوصا برای صفحات موبایل مهمه تا گوگل بتونه بررسی کنه که آیا صفحه شما برای موبایل مناسب (mobile-friendly) هست یا نه.

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

مزایای کلیدی CSS برای سئو

استفاده استراتژیک از CSS میتونه مزایای زیادی برای سئو داشته باشه:

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

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

بخش چهارم: سرعت، پادشاه است! بهینه‌سازی CSS برای بارگذاری سریع‌تر

یکی از مهم‌ترین فاکتورها در سئو، سرعت بارگذاری سایته. هیچکس دوست نداره برای باز شدن یه صفحه کلی منتظر بمونه. CSS میتونه هم دوست شما باشه و هم دشمن شما در این زمینه. بیاید ببینیم چطور میتونیم ازش به نفع خودمون استفاده کنیم.

کوچک‌سازی یا Minification

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

بذارید یه مثال ببینیم:

کد قبل از کوچک‌سازی:

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

کد بعد از کوچک‌سازی:

body{margin:0;padding:0;background-color:#fff;}

می‌بینید؟ کارایی کد یکسانه، اما حجمش خیلی کمتر شده. این کار چهار تا مزیت اصلی داره:

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

مقابله با منابع مسدودکننده رندر (Render-Blocking)

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

• استفاده از defer یا async برای جاوا اسکریپت: توی تنظیمات پروژه در بخش Custom Code، میتونید به اسکریپت‌های غیرضروری خودتون، ویژگی defer یا async رو اضافه کنید. این کار به مرورگر اجازه میده که صفحه رو سریع‌تر لود کنه و منتظر تموم شدن بارگذاری جاوا اسکریپت نمونه.
• ترکیب کردن فایل‌های CSS: اگه سایت شما از چندین فایل CSS استفاده میکنه، بهتره اونها رو در یک فایل ادغام کنید. این کار تعداد درخواست‌های HTTP رو کم میکنه و باعث میشه صفحه سریع‌تر لود بشه.

تکنیک‌های دیگر برای افزایش سرعت

• اعلام Charset: مطمئن بشید که صفحه شما کدگذاری کاراکتر (character encoding) درستی داره تا روان‌تر رندر بشه. میتونید این خط کد رو در بخش Custom Code و زیر تگ meta اضافه کنید: charset="UTF-8".
• استفاده از preload و preconnect: برای فایل‌های CSS خارجی، از این ویژگی‌ها استفاده کنید. اینها به مرورگر اجازه میدن که قبل از درخواست HTTP، یه اتصال اولیه برقرار کنه که سرعت لود رو به شکل قابل توجهی بهبود میبخشه.
• کش مرورگر (Browser Caching): با تنظیم کردن یه تاریخ انقضا یا حداکثر عمر در هدرهای HTTP برای منابع ثابت (مثل فایل CSS)، به مرورگر دستور میدید که منابعی که قبلا دانلود کرده رو از حافظه داخلی دستگاه بخونه، به جای اینکه دوباره از شبکه دانلودشون کنه.
• بارگذاری تنبل (Lazy Loading): این تکنیک اجازه میده عکس‌ها و منابع دیگه فقط زمانی لود بشن که وارد دید کاربر میشن. این کار سرعت و عملکرد رو بهینه میکنه.

برای اینکه عملکرد سایتتون رو بسنجید و مشکلات باقی‌مونده رو پیدا کنید، میتونید از ابزارهایی مثل Google PageSpeed Insights، Lighthouse یا GTmetrix استفاده کنید. این ابزارها به شما اطلاعات ارزشمندی در مورد عملکرد سایتتون میدن و پیشنهادهایی برای بهبود سرعت ارائه میکنن.

بخش پنجم: روی لبه تیغ راه نروید! ترفندهای CSS و خط قرمزهای سئو

بعضی از تکنیک‌های CSS هستن که در گذشته برای اهداف سئویی استفاده میشدن، اما امروز میتونن برای سایت شما خطرناک باشن. گوگل خیلی باهوش‌تر از این حرف‌هاست و خیلی راحت میتونه این ترفندها رو تشخیص بده. بیاید با هم چند تا از این موارد رو بررسی کنیم.

داستان مخفی کردن متن با CSS

خیلی از توسعه‌دهنده‌های آگاه به استانداردها، از CSS برای مخفی کردن متن به دلایل موجهی مثل دسترسی‌پذیری یا usability استفاده میکنن. مثلا:

• لینک‌های پرش (skip links) که به کاربران صفحه‌خوان کمک میکنن سریع به محتوای اصلی برسن.
• لیبل‌های فرم که به صورت بصری مخفی هستن.
• تکنیک جایگزینی تصویر (image replacement).
• نمایش متن راهنما فقط زمانی که کاربر درخواست بده.

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

تکنیک معروف text-indent: -9999px

یکی از تکنیک‌های رایج برای جایگزینی تصویر، استفاده از text-indent: -9999px هست. فرض کنید یه تگ <h1> دارید که میخواید به جای متنش، یه عکس لوگو نمایش بدید. کدش چیزی شبیه این میشه:

h1 {
  text-indent: -9999px;
  background: url('logo.png');
}

این کد متن داخل تگ <h1> رو ۹۹۹۹ پیکسل به سمت چپ هل میده و عملا از صفحه خارجش میکنه، و به جاش یه عکس پس‌زمینه نشون میده. ایده اینه که موتور جستجو متن رو بخونه و کاربر عکس رو ببینه. اما آیا این کار از نظر سئو امنه؟

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

اما در مقابل، گزارش‌هایی وجود داره که میگه گوگل میتونه و گاهی اوقات کدهای CSS و جاوا اسکریپت شما رو میخونه. پس این احتمال وجود داره که الگوریتم‌ها، هر متنی که با text-indent منفی و بیش از حد از صفحه خارج شده رو به عنوان اسپم در نظر بگیرن و سایت شما رو جریمه کنن.

نظر گوگل در این باره چیست؟

مت کاتس (Matt Cutts) که در گوگل کار میکنه، در این مورد گفته: «من توصیه نمیکنم که مردم از CSS برای مخفی کردن متن استفاده کنن». این جمله نگرانی‌های زیادی رو ایجاد کرد.

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

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

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

محتوای تولید شده با ::before و ::after

اینها یه سری شبه-عنصر (pseudo-elements) در CSS هستن که به توسعه‌دهنده‌ها اجازه میدن محتوای تزئینی (مثل آیکون یا یه سری نماد کوچیک) رو قبل یا بعد از یک عنصر اضافه کنن، بدون اینکه لازم باشه اون رو مستقیم در HTML بنویسن.

نکته سئویی فوق‌العاده مهم: محتوایی که از طریق ::before یا ::after اضافه میشه، در Document Object Model (DOM) قرار نمیگیره و در نتیجه، توسط سیستم‌های رندرینگ و ایندکس گوگل دیده نمیشه.

توصیه: از این شبه-عنصرها فقط و فقط برای اهداف تزئینی استفاده کنید. هرگز برای محتوایی که لازمه ایندکس بشه یا مفهوم مهمی رو منتقل میکنه (مثلا اضافه کردن علامت هشتگ به کلمات) از اونها استفاده نکنید. محتوایی که برای درک مطلب حیاتیه، باید همیشه مستقیم در HTML نوشته بشه.

<img> یا background-image؟ مسئله این است!

یه سوال رایج اینه که برای نمایش عکس‌ها از تگ <img> در HTML استفاده کنیم یا از ویژگی background-image در CSS؟

قانون کلی اینه:

• اگه عکس بخشی از محتوای اصلی شماست، باید از تگ <img> استفاده کنید.
• اگه عکس صرفا برای تزئین و خوشگلی (eye candy) هست، باید از background-image استفاده کنید.

چرا این موضوع برای سئو مهمه؟ چون عکس‌هایی که با background-image در CSS قرار داده میشن، توسط موتورهای جستجو به عنوان عکس ایندکس نمیشن. اونها فقط عناصر تزئینی به حساب میان. اما تگ‌های <img> یا <picture> در HTML برای عکس‌های محتوایی هستن که بخشی جدایی‌ناپذیر از مفهوم صفحه شما هستن (مثل عکس محصولات، عکس‌های یک مقاله خبری، یا نمودارها). این عکس‌ها بخشی از DOM هستن، میتونن در جستجوی تصاویر گوگل ایندکس بشن و محتواشون توسط خزنده‌ها درک بشه.

یکی از دلایلی که متخصص‌های سئو ممکنه از شما بخوان همه عکس‌ها رو به تگ <img> تغییر بدید، اینه که میخوان از ویژگی alt استفاده کنن. alt یا متن جایگزین، برای توصیف عکس برای کسانی هست که نمیتونن عکس رو ببینن (مثلا به خاطر اینترنت کند، یا چون از صفحه‌خوان استفاده میکنن).

متاسفانه بعضی‌ها از این ویژگی برای انباشت کلمات کلیدی (keyword stuffing) استفاده میکنن که کار اشتباهیه. متن alt باید توصیف دقیق و مفیدی از عکس باشه، نه لیستی از کلمات کلیدی.

• مثال بد: <img src="آسمان.jpg" alt="ارزان، با کیفیت، ویجت">
• مثال خوب: <img src="آسمان.jpg" alt="تصویری از آسمان آبی بدون ابر">

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

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

کنترل خزنده‌ها با robots.txt

فایل robots.txt یه فایل متنی ساده در ریشه سایت شماست که به موتورهای جستجو میگه کدوم بخش‌های سایت رو میتونن بخزن (crawl) و کدوم بخش‌ها رو نه. دستور اصلی برای این کار Disallow هست.

Disallow یعنی چی؟

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

چه زمانی نباید از Disallow استفاده کرد؟

• برای صفحاتی که میخواهید PageRank منتقل کنند: اگه یه URL در robots.txt مسدود بشه، خزیده نمیشه و در نتیجه نمیتونه PageRank (اعتبار) رو به صفحات دیگه منتقل کنه. پس صفحاتی که احتمال داره لینک خارجی بگیرن یا برای لینک‌دهی به صفحات داخلی دیگه ضروری هستن رو Disallow نکنید.
• برای پارامترها: جان مولر (John Mueller) از گوگل گفته که مسدود کردن پارامترها با Disallow باعث میشه که سیگنال‌های اعتبار برای URL اصلی جمع‌آوری نشن. چون گوگل نمیتونه URLهای دارای پارامتر رو ببینه، متوجه نمیشه که این صفحات در واقع کپی همدیگه هستن. بهترین راه برای مدیریت URLهای پارامتردار، استفاده از ساختار URL تمیز، ریدایرکت‌های ۳۰۱، تگ‌های کنونیکال یا ابزار URL Parameters گوگل هست.
• برای فایل‌های JS و CSS که به گوگل در درک سایت کمک میکنند: همونطور که قبلا گفتیم، این کار میتونه به سئوی شما ضربه بزنه.

آیا Disallow جلوی ایندکس شدن رو میگیره؟

نه! یادتون باشه Disallow فقط جلوی خزیدن (crawling) رو میگیره، نه ایندکس شدن (indexing). اگه یه URL مسدود شده، از جای دیگه‌ای (داخلی یا خارجی) لینک گرفته باشه، ممکنه هنوز در نتایج جستجو ظاهر بشه. در این حالت، گوگل هیچ اطلاعاتی به جز خود URL رو نمیتونه نشون بده و به جای توضیحات، این پیام رو نمایش میده: «به دلیل robots.txt این سایت، توضیحی برای این نتیجه در دسترس نیست.»

فرمت‌بندی پیشرفته در robots.txt

گوگل و بینگ از دو عبارت ویژه برای مشخص کردن الگوها در URLها پشتیبانی میکنن:

• * (wildcard): به معنی «هر دنباله‌ای از کاراکترها».
• $ (end of URL): برای مشخص کردن URLهایی که با یک الگوی خاص تموم میشن (مثلا پسوند فایل).

با ترکیب این دو میشه کنترل دقیقی روی خزنده‌ها داشت. چند تا مثال:

• مسدود کردن یک نوع فایل خاص (مثلا همه PDFها):
  
• مسدود کردن هر پوشه‌ای که شامل یک کلمه خاص باشه (مثلا example):
  
• مسدود کردن URLهای دارای پارامتر (Query):
  

قوانین متناقض Allow و Disallow

گاهی ممکنه یه URL هم با قانون Allow و هم با قانون Disallow مطابقت داشته باشه. در این حالت، طولانی‌ترین قانون برنده میشه. منظور از طول، تعداد کاراکترها در مسیر بعد از Allow: یا Disallow: هست.

مثال:

<pre><code>Allow: /exam* (6 کاراکتر)
Disallow: /examp* (7 کاراکتر)</code></pre>

در این مثال، URLای مثل /example.htm مسدود میشه، چون قانون Disallow با ۷ کاراکتر، طولانی‌تر از قانون Allow با ۶ کاراکتره.

یه نکته جالب اینه که استفاده از * در انتهای یک الگو، اون رو «قوی‌تر» میکنه، چون یه کاراکتر به طولش اضافه میکنه.

مثال:

<pre><code>Allow: /example
Disallow: /example*</code></pre>

اینجا، URL /example.htm مسدود میشه چون Disallow یه کاراکتر * اضافه داره و طولانی‌تره.

استفاده از CSS Selectors برای ممیزی سئو

یه کاربرد خیلی جالب CSS که شاید کمتر شنیده باشید، استفاده از انتخابگرهای CSS (CSS Selectors) برای پیدا کردن بخش‌های خاصی از کد در تمام صفحات سایته. ابزارهایی مثل WebSite Auditor یه قابلیتی به اسم «Custom Search» دارن که به شما اجازه میده با استفاده از انتخابگرهای CSS، دنبال محتوای خاصی بگردید.

مثلا، میتونید با این روش به راحتی پیدا کنید:

کدام صفحات…	دستور CSS Selector
اسکریپت گوگل تگ منیجر رو دارن؟	noscript:has(iframe[src$=XXX-XXXXXX])
تگ h1 دارن؟	h1
عکس‌هایی با یک متن alt خاص دارن؟	img[alt=green-grass]
به یک صفحه خاص لینک دادن؟	a[href*=page.html]
لینک ایمیل دارن؟	a[href^=mailto:]
تگ‌های Open Graph رو دارن؟	meta[name^=og:]

این تکنیک به شما قدرت فوق‌العاده‌ای برای تحلیل تکنیکال سایتتون میده.

بخش هفتم: پرسش و پاسخ کلاسی

خب، درس امروزمون به پایان رسید. حالا وقتشه چند تا از سوال‌هایی که ممکنه براتون پیش اومده باشه رو با هم مرور کنیم.

سوال ۱: استاد، پس اسم کلاس‌های CSS که انتخاب میکنم، روی رتبه من در گوگل تاثیری داره؟

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

سوال ۲: یعنی میتونم یه عالمه کلمه کلیدی رو توی صفحه‌ام بنویسم و بعد رنگشون رو همرنگ پس‌زمینه کنم تا رتبه‌ام بهتر بشه؟

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

سوال ۳: اگه یه صفحه‌ای رو با robots.txt مسدود کنم، یعنی دیگه هیچوقت توی گوگل نشون داده نمیشه؟

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

سوال ۴: برای لوگوی شرکتم بهتره از تگ <img> استفاده کنم یا از background-image در CSS؟

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

سوال ۵: میخوام قبل از تیترهام یه سری آیکون جالب بذارم. توی یه آموزش دیدم که با ::before این کار رو میکنن. این برای سئو مشکلی نداره؟

جواب: تا زمانی که اون آیکون‌ها صرفا تزئینی باشن و هیچ مفهوم مهمی رو منتقل نکنن، استفاده از ::before کاملا درسته و مشکلی برای سئو ایجاد نمیکنه. نکته مهم اینه که خود متن تیتر باید حتما در تگ HTML (مثلا <h2>) نوشته شده باشه. یادتون باشه، هر محتوایی که با ::before یا ::after اضافه بشه، ایندکس نمیشه.

سوال ۶: گزارش سرعت سایتم میگه باید CSS رو «کوچک‌سازی» یا «minify» کنم. این یعنی چی دقیقا؟

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