پرش به محتوای اصلی
nulldesign

سایت پرانیمیشن بسازیم بدون اینکه سئو نابود شود

۵ دقیقه مطالعهnulldesign

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

مشکل انیمیشن نیست، وابستگی است

ضربه وقتی می‌خورد که محتوای صفحه تا اجرا نشدن جاوااسکریپت اصلاً وجود نداشته باشد، یا با opacity: 0 پنهان بماند و فقط با اسکریپت ظاهر شود. آن‌وقت اگر اسکریپت کند باشد یا خطا بدهد، هم کاربر و هم خزنده صفحه‌ی خالی می‌بینند.

قاعده‌ی ساده

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

ابزارهایی که تقریباً رایگان‌اند

انیمیشن‌های اسکرول‌محور CSS با animation-timeline: view() بدون یک خط جاوااسکریپت اجرا می‌شوند و در مرورگرهایی که پشتیبانی نمی‌کنند، محتوا فقط عادی دیده می‌شود. View Transitions هم جابه‌جایی بین صفحه‌ها را نرم می‌کند بدون اینکه ناوبری واقعی را از بین ببرد.

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