نمونه کار
وب‌سایت petfelix.ir
طراحی و توسعه وب
-
دسته بندی وب‌سایت، وردپرس
وب‌سایت petfelix.ir یکی از پروژه‌های وب است که طراحی و پیاده‌سازی آن را ماهان رضایی انجام داده است. تمرکز اصلی در این پروژه روی سرعت بارگذاری، تجربهٔ موبایل و سئوی فنی بود؛ چون سایتی که دیر باز شود، هم بازدیدکننده را از دست می‌دهد و هم در نتایج گوگل عقب می‌افتد.
ظاهر و ساختار این سایت از ابتدا برای خودش طراحی و کدنویسی شده است. قالب آماده‌ای خریداری و فقط رنگ‌بندی نشده است. به همین دلیل کد اضافه، افزونه‌های سنگین و فایل‌های بلااستفاده در آن نیست و هر بخش دقیقاً برای کاری که لازم است ساخته شده است.
سایت با چه فناوری‌ای ساخته شده است؟
این سایت روی وردپرس اجرا می‌شود و ظاهر آن را یک قالب اختصاصی می‌سازد که با PHP، HTML5، CSS و JavaScript کدنویسی شده است. وردپرس مدیریت محتوا را برای صاحب سایت ساده می‌کند و قالب اختصاصی اجازه می‌دهد خروجی HTML، بارگذاری فایل‌ها و سرعت صفحه‌ها دقیقاً مطابق نیاز کنترل شود.
اصول سئوی فنی که در طراحی رعایت شده است
- سرعت: تصاویر در اندازهٔ واقعی نمایش داده می‌شوند و با فرمت و حجم بهینه بارگذاری می‌شوند. تصاویر پایین صفحه با بارگذاری تنبل (lazy loading) دیرتر آمده و فقط CSS و JavaScript لازم بارگذاری می‌شود؛ هدف، نمرهٔ خوب در شاخص‌های Core Web Vitals است.
- موبایل‌محور: بیشتر بازدیدهای ایران از موبایل است و گوگل هم سایت را اول با نسخهٔ موبایل ارزیابی می‌کند. چیدمان از صفحهٔ کوچک شروع شده و بعد به تبلت و دسکتاپ گسترش یافته است.
- HTML معنایی: تیتر اصلی (h1) فقط یک بار در هر صفحه آمده، زیرتیترها به ترتیب (h2، h3) هستند و از تگ‌های معنادار مثل header، nav، main و footer استفاده شده است.
- تگ‌های متا: هر صفحه عنوان و توضیح منحصربه‌فرد، آدرس canonical و تگ‌های Open Graph برای نمایش زیبا در شبکه‌های اجتماعی دارد.
- نقشهٔ سایت و robots: فایل sitemap.xml برای معرفی صفحه‌ها به گوگل و robots.txt برای تعیین بخش‌های قابل خزش در نظر گرفته می‌شود.
راهنمای سئو برای صاحب سایت
- سایت را در Google Search Console ثبت کنید و نقشهٔ سایت را بفرستید تا ایندکس شدن صفحه‌ها را ببینید.
- برای هر صفحه یک عبارت اصلی انتخاب کنید و آن را در عنوان، تیتر اصلی و پاراگراف اول بیاورید، بدون تکرار اجباری.
- متن جایگزین (alt) تصاویر را کوتاه و توصیفی بنویسید، نه پر از کلمهٔ کلیدی.
- هر ماه سرعت سایت را با PageSpeed Insights بسنجید و تصویر یا اسکریپت سنگین را اصلاح کنید.
- محتوای تازه و مفید منتشر کنید و صفحه‌های مرتبط را با لینک داخلی به هم وصل کنید.
نمونه‌کارهای دیگر را هم ببینید: cobaltwear.com، iraniorkide.ir و iranicert.com؛ یا از فهرست همهٔ نمونه‌کارها دیدن کنید.
petfelix.ir را ببینید
