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

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

برچسب: بهینه‌سازی تصاویر

  • هوش مصنوعی (AI) چیست، یک تعریف ساده و عمیق شدن بیشتر

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

    حالا بیایم سر تعریف اصلی. هوش مصنوعی (Artificial Intelligence یا AI) یعنی توانایی یه ماشین برای انجام دادن کارهای شناختی که ما معمولا به ذهن انسان نسبتش میدیم. کارهایی مثل درک کردن، استدلال کردن، یاد گرفتن، تعامل با محیط، حل مسئله و حتی خلاقیت. شاید خودتونم ندونین ولی احتمالا تا حالا کلی با AI سر و کار داشتین؛ دستیارهای صوتی مثل سیری و الکسا یا اون ربات‌های چت که تو بعضی سایت‌ها بهتون کمک میکنن، همشون بر پایه تکنولوژی AI کار میکنن.

    این ماشین‌های هوشمند روز به روز دارن سریع‌تر و پیچیده‌تر میشن. مثلا بعضی کامپیوترها به مرحله‌ای به اسم «اگزااسکیل» رسیدن. یعنی میتونن توی یک ثانیه، به اندازه‌ای محاسبه انجام بدن که یه نفر آدم باید ۳۱ میلیارد و ۶۸۸ میلیون و ۷۶۵ هزار سال وقت بذاره تا انجامش بده. دیگه فقط بحث محاسبه نیست، کامپیوترها دارن مهارت‌ها و قدرت درکی پیدا میکنن که یه زمانی فقط مخصوص ما انسان‌ها و چندتا گونه دیگه بود.

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

    از کجا شروع کنیم؟ بیایم با یادگیری ماشین آشنا بشیم

    خب، وقتی میگیم AI، در واقع داریم در مورد یه خانواده بزرگ از تکنولوژی‌ها حرف میزنیم. یکی از مهم‌ترین اعضای این خانواده یادگیری ماشین (Machine Learning یا ML) هست.

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

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

    به طور کلی، سه مدل اصلی برای یادگیری ماشین وجود داره:

    • یادگیری نظارت شده (Supervised learning): تو این مدل، الگوریتم رو با داده‌های برچسب‌دار آموزش میدیم. یعنی چی؟ یعنی مثلا بهش کلی عکس گربه نشون میدیم و بهش میگیم «اینا گربه هستن». هدف اینه که مدل یاد بگیره بین ورودی (عکس) و خروجی (برچسب گربه) یه نقشه پیدا کنه تا بعدا بتونه عکس‌های جدیدی که تا حالا ندیده رو هم درست تشخیص بده.
    • یادگیری نظارت نشده (Unsupervised learning): اینجا دیگه از داده‌های برچسب‌دار خبری نیست. الگوریتم باید خودش الگوها رو تو داده‌های بدون ساختار پیدا کنه. نتیجه نهایی از قبل مشخص نیست. الگوریتم خودش داده‌ها رو بر اساس ویژگی‌هاشون دسته‌بندی میکنه. این مدل برای پیدا کردن الگوها و مدل‌سازی توصیفی خیلی خوبه.
    • یادگیری تقویتی (Reinforcement learning): این مدل رو میشه به «یادگیری با آزمون و خطا» توصیف کرد. یه «عامل» (Agent) یاد میگیره که یه کار مشخص رو با سعی و خطا انجام بده. اینقدر این کار رو تکرار میکنه تا عملکردش به یه سطح قابل قبول برسه. وقتی کار رو خوب انجام میده تشویق (تقویت مثبت) میشه و وقتی بد انجام میده تنبیه (تقویت منفی). مثلا آموزش دادن به یه دست رباتیک برای برداشتن یه توپ، یه نمونه از این نوع یادگیریه.

    یه روش ترکیبی هم به اسم یادگیری نیمه نظارت شده (Semi-supervised learning) وجود داره که توش فقط بخشی از داده‌ها برچسب دارن.

    یک پله عمیق‌تر: یادگیری عمیق و شبکه‌های عصبی

    حالا که با یادگیری ماشین آشنا شدیم، وقتشه بریم سراغ یه نسخه پیشرفته‌تر از اون به اسم یادگیری عمیق (Deep Learning).

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

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

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

    چند نوع شبکه عصبی معروف هم داریم که خوبه اسمشون رو بدونین:

    • شبکه‌های عصبی پیشخور (Feedforward Neural Networks – FF): یکی از قدیمی‌ترین مدل‌ها که داده‌ها فقط در یک جهت، از لایه‌ها عبور میکنن تا به خروجی برسن.
    • شبکه‌های عصبی بازگشتی (Recurrent Neural Networks – RNN): این مدل‌ها بر خلاف مدل قبلی، از داده‌های سری زمانی یا دنباله‌ای استفاده میکنن و یه جورایی «حافظه» دارن از اتفاقی که تو لایه قبلی افتاده. برای همین تو تشخیص گفتار و ترجمه خیلی به کار میان.
    • حافظه طولانی/کوتاه مدت (Long/Short Term Memory – LSTM): اینم یه مدل پیشرفته از RNN هست که میتونه چیزهایی که چندین لایه قبل اتفاق افتاده رو با استفاده از «سلول‌های حافظه» به خاطر بسپره.
    • شبکه‌های عصبی کانولوشنی (Convolutional Neural Networks – CNN): این‌ها جزو معروف‌ترین شبکه‌های عصبی هستن و بیشتر تو تشخیص تصویر استفاده میشن. لایه‌های مختلفش بخش‌های متفاوتی از یه عکس (مثل رنگ‌ها و لبه‌ها) رو فیلتر میکنن تا در نهایت تصویر رو تشخیص بدن.
    • شبکه‌های مولد تخاصمی (Generative Adversarial Networks – GAN): تو این سیستم، دو تا شبکه عصبی با هم رقابت میکنن. یکی (مولد) سعی میکنه مثال‌های جدید بسازه و اون یکی (تفکیک‌کننده) سعی میکنه تشخیص بده که این مثال‌ها واقعی هستن یا ساختگی. این رقابت در نهایت باعث بهتر شدن خروجی میشه. از این مدل برای ساختن عکس‌های واقعی و حتی آثار هنری استفاده شده.

    جدیدترین پدیده: هوش مصنوعی مولد (Generative AI)

    و اما میرسیم به بحث داغ این روزها: هوش مصنوعی مولد (Generative AI یا Gen AI).

    هوش مصنوعی مولد به مدل‌های یادگیری عمیقی گفته میشه که میتونن در جواب به یه درخواست یا «پرامپت» (Prompt) از طرف کاربر، محتوای جدید و اورجینال مثل متن‌های طولانی، عکس‌های باکیفیت، ویدیوهای واقعی یا صدا تولید کنن. ابزارهایی مثل ChatGPT و DALL-E (که عکس تولید میکنه) نشون دادن که این تکنولوژی پتانسیل تغییر دادن خیلی از شغل‌ها رو داره.

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

    فرایند کار هوش مصنوعی مولد معمولا سه مرحله داره:

    • شروع با یک مدل پایه (Foundation Model): همه چیز با یه مدل پایه شروع میشه. این مدل یه مدل یادگیری عمیق خیلی بزرگه که روی حجم عظیمی از داده‌های خام و بدون برچسب (مثلا ترابایت‌ها متن و عکس از اینترنت) آموزش دیده. این آموزش خیلی سنگین، زمان‌بر و گرونه و به هزاران پردازنده گرافیکی (GPU) و میلیون‌ها دلار هزینه نیاز داره. این مدل‌ها که معروف‌ترینشون مدل‌های زبان بزرگ (Large Language Models یا LLM) هستن، میتونن به صورت خودکار به پرامپت‌ها جواب بدن.
    • تنظیم دقیق (Fine-tuning): بعد از ساخت مدل پایه، باید اون رو برای یه کار مشخص (مثلا تولید یه نوع محتوای خاص) تنظیم کرد. این کار با روش‌های مختلفی مثل آموزش بیشتر با داده‌های مرتبط انجام میشه.
    • ارزیابی و بهبود مداوم: توسعه‌دهنده‌ها و کاربرها به طور مرتب خروجی‌های این ابزارها رو ارزیابی میکنن و مدل رو حتی هفته‌ای یک بار برای دقت و مرتبط بودن بیشتر، دوباره تنظیم میکنن.

    سفری به گذشته: تاریخچه هوش مصنوعی

    برای اینکه بفهمیم الان کجا هستیم، باید بدونیم از کجا شروع کردیم. ایده «ماشینی که فکر میکنه» به یونان باستان برمیگرده، اما اگه بخوایم تاریخ مدرنش رو بررسی کنیم، باید از اینجا شروع کنیم:

    • دهه ۱۹۴۰ و ۱۹۵۰:
      • ۱۹۴۳: وارن مک‌کالک و والتر پیتس یه مدل از نورون‌های مصنوعی رو پیشنهاد دادن که پایه و اساس شبکه‌های عصبی شد.
      • ۱۹۵۰: آلن تورینگ، که بهش «پدر علم کامپیوتر» هم میگن، یه مقاله به اسم «ماشین‌های محاسباتی و هوش» منتشر کرد و این سوال رو پرسید: «آیا ماشین‌ها میتونن فکر کنن؟». اون یه آزمایشی به اسم «بازی تقلید» رو هم معرفی کرد که امروز به «آزمون تورینگ» معروفه. این آزمون توانایی یه ماشین برای نشون دادن رفتار هوشمندانه رو میسنجه.
      • ۱۹۵۶: این سال یه نقطه عطف بود. جان مک‌کارتی، دانشمند کامپیوتر، برای اولین بار از عبارت «هوش مصنوعی» تو یه کارگاه تو کالج دارتموث استفاده کرد. همون سال، آلن نیوول، جی. سی. شاو و هربرت سایمون اولین برنامه کامپیوتری هوش مصنوعی به اسم «Logic Theorist» رو ساختن.
    • چهار مرحله تکامل AI (به روایت رادنی بروکس، فیزیکدان MIT):
      • هوش مصنوعی نمادین (Symbolic AI – از ۱۹۵۶): به این روش، هوش مصنوعی کلاسیک یا حتی GOFAI (مخفف هوش مصنوعی خوب و قدیمی) هم میگن. ایده اصلی اینجا استفاده از نمادها و استدلال منطقی برای حل مسئله بود. مثلا: ژرمن شپرد یه سگه، سگ یه پستانداره، همه پستانداران خونگرم هستن؛ پس ژرمن شپرد باید خونگرم باشه. مشکل اصلی این روش این بود که انسان‌ها باید دانش خودشون از دنیا رو به صورت دستی وارد سیستم میکردن. برای همین این سیستم‌ها با پیچیدگی‌های دنیای واقعی مشکل داشتن و نمیتونستن از داده‌های زیاد یاد بگیرن. این روش تا اواخر دهه ۱۹۸۰ روش غالب بود.
      • شبکه‌های عصبی (با پیشرفت‌هایی در سال‌های ۱۹۵۴، ۱۹۶۹، ۱۹۸۶ و ۲۰۱۲): همونطور که گفتیم، این تکنولوژی پشت رشد انفجاری هوش مصنوعی مولد امروزیه. با اینکه ایده‌اش از دهه ۴۰ مطرح بود، فراز و نشیب‌های زیادی داشت. در سال ۱۹۶۹ دو تا محقق MIT نشون دادن که شبکه‌های عصبی فقط میتونن کارهای خیلی ساده انجام بدن. اما در سال ۱۹۸۶، جفری هینتون و همکارانش این مشکل رو حل کردن. در نهایت در سال ۲۰۱۲، هینتون و دو تا از دانشجوهاش قدرت یادگیری عمیق رو با استفاده از شبکه‌های عصبی با لایه‌های خیلی بیشتر نشون دادن و تمرکز دنیا رو به این سمت بردن.
      • رباتیک سنتی (Traditional Robotics – از ۱۹۶۸): تو دهه‌های اول هوش مصنوعی، محقق‌ها برای پیشبرد تحقیقاتشون ربات میساختن. این ربات‌ها معمولا تو محیط‌های خیلی کنترل شده کار میکردن و رفتارهای کاملا برنامه‌ریزی شده رو تکرار میکردن. با اینکه این ربات‌ها به پیشرفت خود AI کمک زیادی نکردن، اما تو یه زمینه به اسم «مکان‌یابی و نقشه‌برداری همزمان» (SLAM) خیلی تاثیرگذار بودن که به ساخت ماشین‌های خودران و حتی ربات‌های جاروبرقی امروزی کمک کرد.
      • رباتیک مبتنی بر رفتار (Behavior-based Robotics – از ۱۹۸۵): محقق‌ها دیدن که حشرات با تعداد کمی نورون، خیلی خوب تو دنیای واقعی مسیریابی میکنن. پس سعی کردن ربات‌هایی بسازن که بتونن با دانش ناقص و دستورالعمل‌های متناقض، مشکلات رو حل کنن. این ربات‌ها هم تو دلشون شبکه‌های عصبی دارن.
    • دهه ۱۹۸۰ تا امروز:
      • دهه ۱۹۸۰: شبکه‌های عصبی که از الگوریتم «پس‌انتشار» (backpropagation) برای آموزش خودشون استفاده میکردن، به طور گسترده تو کاربردهای AI استفاده شدن. اما بعدش به خاطر محدودیت‌ها، یه دوره رکود دیگه به اسم «زمستان دوم AI» به وجود اومد.
      • ۱۹۹۷: کامپیوتر «دیپ بلو» شرکت IBM، گری کاسپاروف، قهرمان شطرنج جهان رو شکست داد. این یه اتفاق خیلی مهم بود.
      • ۲۰۱۶: برنامه «آلفاگو» شرکت دیپ‌مایند، که با یه شبکه عصبی عمیق کار میکرد، لی سدول، قهرمان جهان تو بازی «گو» رو شکست داد. این پیروزی خیلی مهم بود چون تعداد حرکات ممکن تو بازی گو فوق‌العاده زیاده.
      • ۲۰۲۲: ظهور مدل‌های زبان بزرگ یا LLMها، مثل ChatGPT، یه تغییر عظیم تو عملکرد هوش مصنوعی و پتانسیلش ایجاد کرد.

    انواع هوش مصنوعی: از ضعیف تا فوق هوشمند

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

    دسته‌بندی بر اساس قابلیت:

    • هوش مصنوعی ضعیف یا محدود (Weak AI یا Narrow AI): این‌ها سیستم‌های هوش مصنوعی هستن که برای انجام یه کار مشخص یا مجموعه‌ای از کارهای محدود طراحی و آموزش دیدن. تقریبا تمام هوش مصنوعی که ما امروز میبینیم و استفاده میکنیم از این نوعه. دستیار صوتی الکسا، الگوریتم‌های تشخیص تقلب کارت اعتباری یا موتور جستجوی گوگل همشون نمونه‌هایی از هوش مصنوعی محدود هستن.
    • هوش مصنوعی قوی یا عمومی (Strong AI یا Artificial General Intelligence – AGI): این نوع هوش مصنوعی، توانایی درک، یادگیری و به کار بردن دانش در طیف وسیعی از کارها رو در سطحی برابر یا حتی فراتر از هوش انسان داره. این سطح از AI در حال حاضر فقط در حد تئوری وجود داره و هنوز هیچ سیستمی بهش نرسیده. بعضی محقق‌ها معتقدن رسیدن به AGI به افزایش خیلی زیادی تو قدرت محاسباتی نیاز داره. رادنی بروکس، رباتیک‌دان MIT و یکی از بنیان‌گذاران iRobot، معتقده که AGI تا سال ۲۳۰۰ از راه نمیرسه.
    • هوش مصنوعی فوق هوشمند (Artificial Superintelligence – ASI): این دیگه سطح بعدیه که توش ماشین میتونه تو همه زمینه‌ها از انسان برتر عمل کنه. این هم مثل AGI فعلا در قلمرو علمی-تخیلی قرار داره.

    دسته‌بندی بر اساس عملکرد:

    1. نوع ۱: ماشین‌های واکنشی (Reactive Machines): این سیستم‌ها حافظه ندارن و فقط برای یه کار خاص طراحی شدن. مثل کامپیوتر شطرنج‌باز دیپ بلو که کاسپاروف رو شکست داد. اون میتونست مهره‌ها رو تشخیص بده و حرکت بعدی رو پیش‌بینی کنه، ولی از تجربه‌های قبلی برای بازی‌های آینده‌اش استفاده نمیکرد.
    2. نوع ۲: حافظه محدود (Limited Memory): این سیستم‌ها حافظه دارن و میتونن از تجربیات گذشته برای تصمیم‌گیری‌های آینده استفاده کنن. بعضی از عملکردهای تصمیم‌گیری تو ماشین‌های خودران اینجوری طراحی شدن.
    3. نوع ۳: نظریه ذهن (Theory of Mind): این یه اصطلاح روانشناسیه. وقتی در مورد AI به کار میره، یعنی سیستمی که میتونه احساسات رو بفهمه، نیت انسان‌ها رو درک کنه و رفتارشون رو پیش‌بینی کنه. این نوع AI هنوز به طور کامل وجود نداره.
    4. نوع ۴: خودآگاهی (Self-awareness): تو این دسته، سیستم‌های AI یه حسی از «خود» دارن که بهشون آگاهی میده. ماشین‌هایی که خودآگاهی دارن، وضعیت فعلی خودشون رو درک میکنن. این نوع AI هم هنوز وجود نداره.

    AI در دنیای واقعی: کاربردها و مزایا

    خب، این همه در مورد تئوری و تاریخ حرف زدیم. حالا بیایم ببینیم این هوش مصنوعی تو دنیای واقعی به چه دردی میخوره.

    مزایای کلی هوش مصنوعی:

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

    کاربردها در صنایع مختلف:

    • خدمات مشتری: شرکت‌ها از ربات‌های چت و دستیارهای مجازی برای جواب دادن به سوالات مشتری‌ها، پیگیری سفارش‌ها و حل مشکلات استفاده میکنن. این ابزارها با استفاده از پردازش زبان طبیعی (Natural Language Processing – NLP) زبان ما رو میفهمن و جواب میدن.
    • کشف تقلب: الگوریتم‌های یادگیری ماشین میتونن الگوهای تراکنش‌ها رو تحلیل کنن و موارد مشکوک مثل خریدهای غیرعادی رو به سرعت تشخیص بدن.
    • تجربه مشتری شخصی‌سازی شده: فروشگاه‌ها و بانک‌ها از AI برای پیشنهاد دادن محصولات و خدماتی که احتمالا دوست دارین، استفاده میکنن.
    • استخدام و منابع انسانی: پلتفرم‌های استخدامی مبتنی بر AI میتونن رزومه‌ها رو بررسی کنن، کاندیداها رو با شرح شغل تطبیق بدن و حتی مصاحبه‌های اولیه رو انجام بدن.
    • توسعه نرم‌افزار: ابزارهای تولید کد با هوش مصنوعی مولد میتونن کارهای کدنویسی تکراری رو ساده کنن و سرعت توسعه برنامه‌ها رو بالا ببرن.
    • تعمیر و نگهداری پیش‌بینی‌کننده: مدل‌های یادگیری ماشین میتونن داده‌های سنسورها رو تحلیل کنن و پیش‌بینی کنن که یه دستگاه کی به تعمیر نیاز داره تا از کار افتادن ناگهانیش جلوگیری بشه.
    • بهداشت و درمان: AI تو تحلیل تصاویر پزشکی برای تشخیص زودهنگام بیماری‌ها، طراحی برنامه‌های درمانی شخصی‌سازی شده و حتی کشف داروهای جدید به کار میره.
    • حمل و نقل: ماشین‌های خودران یه مثال بارز هستن. علاوه بر این، AI برای مدیریت ترافیک، پیش‌بینی تاخیر پروازها و بهینه‌سازی مسیرهای کشتی‌رانی هم استفاده میشه.

    بر اساس یه نظرسنجی در سال ۲۰۲۲، پذیرش مدل‌های هوش مصنوعی از سال ۲۰۱۷ بیش از دو برابر شده و سرمایه‌گذاری تو این حوزه هم به همین نسبت افزایش پیدا کرده. حوزه‌هایی که شرکت‌ها بیشترین ارزش رو از AI میبینن شامل بازاریابی و فروش، توسعه محصول و خدمات، و استراتژی و امور مالی شرکتی هست.

    چالش‌ها، خطرات و بحث‌های اخلاقی

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

    محدودیت‌ها و خطرات مدل‌های AI:

    • خروجی‌های اشتباه: خروجی‌های مدل‌های هوش مصنوعی مولد ممکنه خیلی متقاعدکننده به نظر برسن، ولی گاهی اوقات اطلاعاتی که تولید میکنن کاملا اشتباهه.
    • سوگیری (Bias): این مدل‌ها بر اساس داده‌هایی که باهاشون آموزش دیدن کار میکنن. اگه اون داده‌ها (که معمولا از اینترنت گرفته میشن) شامل سوگیری‌های جنسیتی، نژادی و … باشن، خروجی مدل هم این سوگیری‌ها رو منعکس و حتی تقویت میکنه. مثلا آمازون یه ابزار استخدام مبتنی بر AI ساخته بود که ناخواسته به نفع کاندیداهای مرد عمل میکرد چون داده‌های آموزشی‌اش این سوگیری رو داشتن.
    • امکان سواستفاده: میشه از این مدل‌ها برای فعالیت‌های غیراخلاقی یا مجرمانه استفاده کرد. بعضی کاربرها سعی میکنن مدل‌ها رو «جیل‌بریک» (Jailbreak) کنن، یعنی کاری کنن که قوانین خودشون رو بشکنن و محتوای مضر یا غیرقانونی تولید کنن.
    • هزینه‌های بالا: توسعه و آموزش مدل‌های AI، به خصوص مدل‌های بزرگ، خیلی گرونه. مثلا مدیرعامل OpenAI گفته که آموزش مدل GPT-4 بیشتر از ۱۰۰ میلیون دلار هزینه داشته.
    • پیچیدگی فنی و کمبود متخصص: ساختن و نگهداری سیستم‌های AI به دانش فنی خیلی بالایی نیاز داره و تعداد متخصص‌های این حوزه نسبت به تقاضا کمه.
    • جابجایی شغلی: با خودکار شدن کارها، این نگرانی وجود داره که بعضی شغل‌ها از بین برن و این موضوع باعث نابرابری اقتصادی بشه.
    • تاثیرات زیست‌محیطی: مراکز داده‌ای که این مدل‌ها رو اجرا میکنن، مقدار زیادی انرژی و آب مصرف میکنن که روی محیط زیست تاثیر منفی داره.

    چطور میشه با این خطرات مقابله کرد؟

    • انتخاب دقیق داده‌های آموزشی: باید خیلی مراقب بود که داده‌های اولیه شامل محتوای سمی یا سوگیرانه نباشن.
    • استفاده از مدل‌های تخصصی: به جای استفاده از یه مدل عمومی، شرکت‌ها میتونن از مدل‌های کوچیک‌تر و تخصصی‌تر استفاده کنن یا یه مدل عمومی رو با داده‌های خودشون سفارشی‌سازی کنن.
    • حفظ عامل انسانی (Human in the loop): خیلی مهمه که یه انسان واقعی خروجی مدل AI رو قبل از انتشار یا استفاده نهایی، چک کنه.
    • شفافیت و حاکمیت: باید مشخص باشه که یه سیستم خودکار داره استفاده میشه و نحوه کارش توضیح داده بشه. همچنین باید ساختارهای نظارتی برای مسئولیت‌پذیری وجود داشته باشه.

    قوانین و مقررات برای هوش مصنوعی

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

    • منشور حقوق هوش مصنوعی (AI Bill of Rights): دولت آمریکا در سال ۲۰۲۲ یه سندی به اسم «طرح اولیه برای منشور حقوق هوش مصنوعی» آماده کرد. این سند پنج تا اصل اساسی داره:
      1. حق داشتن سیستم‌های ایمن و موثر.
      2. محافظت در برابر تبعیض توسط الگوریتم‌ها.
      3. محافظت در برابر سواستفاده از داده‌ها.
      4. حق دانستن اینکه یک سیستم خودکار در حال استفاده است.
      5. حق انصراف و دسترسی به یک انسان برای حل مشکلات.
    • قانون هوش مصنوعی اتحادیه اروپا (EU’s AI Act): این قانون که قراره در سال ۲۰۲۴ اجرایی بشه، یه مقررات جامع برای AI هست که با قوانین حفاظت از داده و امنیت سایبری فعلی هم هماهنگه.

    در حال حاضر بیشتر از ۶۰ کشور یا اتحادیه، استراتژی‌های ملی برای استفاده مسئولانه از AI دارن، از جمله برزیل، چین، سنگاپور، کره جنوبی و آمریکا.

    یک نگاه هنری: فیلم «A.I. Artificial Intelligence»

    حالا که با جنبه‌های علمی و فنی هوش مصنوعی آشنا شدیم، جالبه ببینیم دنیای هنر و سینما چطور به این موضوع نگاه کرده. یکی از معروف‌ترین فیلم‌ها در این زمینه، فیلم «A.I. Artificial Intelligence» ساخته استیون اسپیلبرگ در سال ۲۰۰۱ هست.

    A.I. Artificial Intelligence
    کارگرداناستیون اسپیلبرگ
    فیلمنامهاستیون اسپیلبرگ
    داستانایان واتسون
    بر اساسداستان کوتاه «اسباب‌بازی‌های فوق‌العاده تمام تابستان دوام می‌آورند» نوشته برایان آلدیس
    بازیگران اصلیهیلی جوئل آزمنت، جود لا، فرانسیس اوکانر
    بودجه۹۰ تا ۱۰۰ میلیون دلار
    فروش۲۳۵.۹ میلیون دلار

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

    فیلم در قرن ۲۲ میگذره. گرمایش جهانی باعث بالا اومدن سطح دریاها شده و ربات‌های انسان‌نما به اسم «مکا» (Mecha) نقش‌های مختلفی تو جامعه دارن. دیوید (با بازی هیلی جوئل آزمنت) یه نمونه اولیه از بچه‌های مکا هست که به طور منحصر به فردی با قابلیت عشق ورزیدن برنامه‌ریزی شده. اون به خانواده‌ای داده میشه که پسرشون در کماست. وقتی پسر واقعی خانواده به طور غیرمنتظره‌ای خوب میشه و به خونه برمیگرده، رقابت و حسادت به وجود میاد و در نهایت دیوید از خونه طرد میشه. دیوید با الهام از داستان پینوکیو، سفری رو شروع میکنه تا «پری آبی» رو پیدا کنه و به یه پسر واقعی تبدیل بشه تا بتونه دوباره عشق مادرش رو به دست بیاره.

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

    پرسش و پاسخ کلاسی

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

    سوال ۱: فرق دقیق بین هوش مصنوعی، یادگیری ماشین و یادگیری عمیق چیه؟

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

    سوال ۲: آیا ChatGPT همون هوش مصنوعی قوی یا AGI هست که در موردش صحبت کردیم؟

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

    سوال ۳: چرا میگن «داده» برای هوش مصنوعی اینقدر مهمه؟

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

    سوال ۴: آیا الان قانونی برای کنترل هوش مصنوعی وجود داره؟

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

    منابع

    • [2] What is AI (Artificial Intelligence)? Definition, Types, Examples & Use Cases
    • [4] Artificial intelligence (AI) | Definition, Examples, Types, Applications, Companies, & Facts | Britannica
    • [6] What is Artificial Intelligence? – NASA
    • [8] What is AI? – Artificial Intelligence Explained – AWS
    • [10] A.I. Artificial Intelligence (2001) – IMDb
    • [1] What Is Artificial Intelligence (AI)? | IBM
    • [3] A.I. Artificial Intelligence – Wikipedia
    • [5] What is (AI) Artificial Intelligence? | Online Master of Engineering | University of Illinois Chicago
    • [7] What Is Artificial Intelligence (AI)? | Google Cloud
    • [9] What is AI (artificial intelligence)? | McKinsey

  • رابطه CSS و سئو

    قبل از اینکه بخوایم شیرجه بزنیم توی بحث اصلی، باید با سه تا از اصلی‌ترین ابزارهای ساخت وبسایت‌های امروزی آشنا بشیم: HTML، 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 شما کمتر بشه و در نتیجه سریع‌تر دانلود و بارگذاری بشه، که این هم به نوبه خودش سرعت کلی سایت و سئوی شما رو بهتر میکنه.

    منابع

    • [2] Converting a html/css website to WordPress and effects on SEO : r/Wordpress
    • [4] CSS: co to jest? Definicja – Słownik SEO/SEM Delante
    • [6] Google On SEO & CSS
    • [8] Barry Schwartz on X: “Google’s @g33konaut and @JohnMu on CSS and SEO for Google Search https://t.co/HG5KYeITj1 https://t.co/LINvuZJGow” / X
    • [10] Using Custom Search: CSS Selectors – SEO PowerSuite Help Center
    • [12] Removing CSS & JS Files from Index | SEO Forum | Moz
    • [14] critical JS/CSS slows pages – bad for SEO and google ranking – SEO – Squarespace Forum
    • [16] Is there any SEO benefits for using <img> vs background CSS – Marketing – SitePoint Forums | Web Development & Design Community
    • [1] Is Tailwind CSS bad for SEO? – Quora
    • [3] Disallow and Google: An Intermediate SEO Guide: PageRank, JS/CSS, formatting and more
    • [5] text-indent: -9999px = bad seo? – CSS-Tricks
    • [7] Effective CSS Rules for SEO Optimization
    • [9] Google, SEO and using CSS to hide text | 456 Berea Street
    • [11] SEO Issues with Render Blocking, Charset Declaration and Inline CSS – Publishing help / SEO – Forum | Webflow
    • [13] CSS minifier {Free & Online SEO Tool}✴️
    • [15] HTML, CSS, and JavaScript: A Simple SEO Primer