اشتباهات رایج در طراحی سایت – 45 اشتباه رایج در طراحی سایت

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

اشتباهات رایج در طراحی سایت های وردپرسی

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

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

اشتباهات مرگبار در طراحی سایت برای رضایت کاربری

اشتباهاتی که قرار است در ادامه برایتان بیاوریم، به رضایت کاربری و UX ضربه می زنند و اگر در سایتتان رعایت نشوند، کاربرانتان تجربه خوبی از گردش در سایتتان نخواهند داشت.

1. عدم توجه به مخاطب سایت (پرسونا)

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

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

به طور مثال، طبق استاندارد های جهانی طراحی سایت (W3C)، لینک صفحه اصلی نباید در هدر آورده شود و تصویر لوگو به صفحه اصلی لینک شود تا کاربر برای هدایت به صفحه اصلی، روی لوگو کلیک کند؛ اما تصور کنید پرسونای سایت شما، افراد بازنشسته تأمین اجتماعی هستند که برای دریافت اطلاعات بیشتر درمورد بیمه بازنشستگی، به سایتتان مراجعه می کنند، اگر شما لینک صفحه اصلی را بر روی لوگو قرار دهید، افراد زیادی که با این قابلیت آشنایی ندارند، ممکن است راه خود را در سایتتان گم کنند و به دنبال لینکی برای رفتن به صفحه اصلی باشند!

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

2. واکنشگرا نبودن سایت

امروزه درصد زیادی از بازدید کنندگان، از موبایل سایت شما را مشاهده می کنند؛

اگر سایتتان برای موبایل بهینه نشده باشد، مخاطبانی که با موبایل به سایتتان مراجعه می کنند را از دست خواهید داد و این باعث آسیب جدی به کسب و کارتان خواهد شد.

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

3. سرعت بارگزاری پایین

مهم ترین معیار گوگل برای رتبه بندی یک سایت، رضایت کاربری است و مهم ترین یا حداقل یکی از مهم ترین معیار رضایت کاربری، سرعت بارگزاری و دسترسی سریع به محتوا است؛ طبق آمار اگر سرعت لود کامل یک صفحه از سایت، کمتر از 4 ثانیه باشد، 53% از بازدید کنندگان صفحه را ترک می کنند؛ بنابراین خیلی مهم است که سرعت سایتتان بهینه باشد.

در ادامه این مقاله نیز درمورد اشتباهات رایج طراحی سایت برای سرعت، صحبت کرده ایم.

4. ناهماهنگی در طراحی

اولین چیزی که کاربر از سایتتان مشاهده و در ذهنش ضبط می کند، توسط طراحی ظاهر و رابط کاربری سایتتان رقم می خورد.

شاید برایتان جالب باشد که بدانید 75% اعتبار سایتتان به طراحی آن نسبت داده می‌شود؛ بنابراین اگر به ظاهر سایت توجهی نکنید، تصویر نامناسبی از کسب و کار خود در ذهن بازدید کنندگانتان ثبت کرده اید.

اشتباهاتی مانند کپی کردن ظاهر یک سایت دیگر، عدم درک روانشناسی رنگ ها و کنتراست رنگی، باعث از بین رفتن جلوه ظاهری سایتتان خواهد شد؛

در ادامه مقاله بیشتر درمورد اشتباهات رایج طراحی سایت برای رابط کاربری توضیح داده ایم.

5. پیچیدگی ساختار سایت

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

از نظر گوگل و موتور های جستجوگر نیز صفحاتی که برای رسیدن به آنها باید یک مسیر طولانی و درختی را طی کنید، دارای اهمیت کمتری هستند و رتبه خوبی در موتور های جستجوگر نمی گیرند.

تصویر بالا نمونه ای از نقشه ساختاری یک سایت است؛ در این سایت اگر بخواهید به صفحاتی که در اطراف نقشه وجود دارند برسید، باید مسیری طولانی را طی کنید و این اصلا بهینه نیست!

6. مشخص نبودن محتوای سایت

اگر نتوانید خدمات خود را به صورت کاملا واضح به بازدید کنندگانتان بیان کنید، احتمال این که از خدماتتان خرید و استفاده کنند، کمتر خواهد شد و اینگونه نرخ تبدیل یا CTR سایتتان پایین خواهد آمد؛

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

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

7. استفاده از پاپ آپ های مزاحم

همه ما تجربه تبلیغات زیاد که باعث پوشانده شدن محتوا می شود را داشته ایم؛ در این حالت کاربران جای کلیک بر روی تبلیغات، عصبانی و از سایت خارج می شوند؛ اینگونه سایت ها از نظر گوگل و موتور های جستجوگر اسپم شناسایی می شوند و رتبه خوبی در صفحه نتایج جستجو (SERP) نمی گیرند.

یک نمونه از این تبلیغات، پاپ آپ هایی است که به محض ورود کاربر به سایت، به صفحه تزریق می شوند!

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

8. عدم استفاده از فضای سفید

به کاربر اجازه نفس کشیدن بدهید!

عده ای فکر می کنند باید در صفحه اصلی سایتشان همه چیز را به کاربرانشان بگویند، همه محصولاتشان را معرفی کنند و درموردشان توضیح بدهند! با این خیال که کاربر فقط با خواندن صفحه اول، با تمام خدماتشان به طور کامل آشنا شود؛

اما قضیه کاملا برعکس است، ذهن ما فقط می تواند بخش محدودی از اطلاعات را که تا به حال با آن آشنایی نداشته، درک کند و اگر در نگاه اول با صفحه ای که شبیه روزنامه طراحی شده است، رو به رو شود، فقط از شدت سرگیجه، صفحه را می بندد!

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

نمونه سایت هایی که از فضای خالی به درستی استفاده کرده اند، سایت اپل است؛

9. عدم تست قابلیت های سایت

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

حتما برایتان پیش آمده است که به یک سایت مراجعه کنید و دکمه خرید یا لینک ها کار نکنند، یا بخواهید در یک سایت ثبت نام کنید و کد تایید پیامکی برایتان ارسال نشود؛ در این حالت، حتما آن سایت را ترک خواهید کرد.

بنابراین قبل از این که کاربران متوجه باگ ها و اشکالات در کدنویسی سایتتان شوند، خودتان به صورت کامل و جزء به جزء سایتتان را بررسی کنید.

10. استفاده از پاراگراف های طولانی

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

پاراگراف بالا، نمونه ای از همین پاراگراف های بلند و یک نفس است.

جالب است اگر بدانید هوش مصنوعی گوگل و موتور های جستجوگر به سادگی این پاراگراف ها را شناسایی می کنند؛ حتی افزونه سئو رنک مث (که به بهبود سئو کمک می کند) نیز هنگام نوشتن این مقاله، این پاراگراف را شناسایی کرد و خطا داد!

11. دریافت اطلاعات غیرضروری از کاربر

حتما سایت هایی که برای یک ثبت نام ساده، از شما شماره ملی و تاریخ تولد می خواهند را دیده اید؛ درصورتی که این اطلاعات اصلا برای آن سایت ضروری و حیاتی نیست؛

یا سایت هایی که برای فروش یک دوره، از شما آدرس و کد پستی می خواهند! درصورتی که دوره کاملا دانلودی است و گرفتن آدرس و کد پستی اصلا الزامی نیست؛

بنابراین بهتر است تا جای ممکن کار را برای کاربران راحت کنید؛

اشتباهات مرگبار در طراحی سایت برای امنیت سایت

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

12. نصب پلاگین و قالب نال شده

کسانی که از سیستم مدیریت محتوای وردپرس استفاده می کنند، همیشه این حرف که از قالب و پلاگین های نال شده استفاده نکنند را شنیده اند؛ اما چند نفر به این توصیه توجه می کنند؟

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

ما نیز قبلا از منبعی ایرانی که به ادعای خودشان هیچ کد مخربی در افزونه هایی که نال کرده اند، وجود ندارد خرید کرده ایم؛

سه ماه نخست، هیچ اتفاقی در سایت نیفتاد ولی یک روز مثل همیشه خواستیم به سایت وارد شویم که با خطای 500 روبرو شدیم و هنگامی که سرور را مانیتور کردیم، متوجه شدیم افزونه نال شده ای که استفاده کردیم، دارای کد های مخرب بوده و باعث ایجاد ویروس در سایت شده است؛ ویروس مذکورد، حدود 240 فایل htaccess را در تک تک پوشه های هاستمان جایگذاری کرده بود.

به سختی و با پاکسازی فایل های سایت، توانستیم سایت را در دسترس قرار دهیم ولی زمانی که به سرچ کنسول مراجعه کردیم، آسیب اصلی ویروس ها را مشاهده کردیم؛

ویروس حدود 1400 صفحه نامربوط با تایتل های چینی ایندکس کرده بود و برای حذفشان، مجبور شدیم تک به تک لینک ها را پیدا کنیم و با ابزار Removals در سرچ کنسول، آنها را از حالت ایندکس خارج کنیم؛ ولی این اتفاق یک آسیب جدی به سئوی سایتمان زد و باعث شد تا دیگر سمت این منابع نرویم.

13. عوض نکردن صفحه ورود وردپرس

در حالت استاندارد، فرم ورودی که برای کاربران عادی استفاده می شود، نباید برای ورود مدیر استفاده شود و باید زمینه های متفاوتی داشته باشد تا هکرها با ربات های حدس رمز عبور، نتوانند به پنل مدیریت سایتتان وارد شوند؛

برای همین، آدرس صفحه ورود وردپرس نباید در حالت پیشفرض (site.com/wp-login.php) باشد.

با افزونه های امنیتی می توانید این مشکل و چندین مشکلی که در ادامه برایتان آورده ایم را رفع کنید.

پیشنهاد ما افزونه امنیت همه کاره وردپرس (ALOS) است که به صورت رایگان در مخزن وردپرس وجود دارد.

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

14. یکسان بودن نام کاربری مدیر با نام نمایشی

شما به عنوان مدیر سایت، ممکن است در سایتتان مطالبی منتشر کنید؛ در اکثر قالب های وردپرسی، در انتهای هر مطلب اطلاعات نویسنده آن مطلب نوشته شده است و باید در این مواقع حتما چک کنید که نام نمایشی مدیر سایت، نام کاربری مدیر نباشد.

برای تعویض این مورد نیز می توانید مسیر زیر را دنبال کنید:

پیشخوان > کاربران > شناسنامه > نمایش عمومی نام

و از منوی آبشاری «نمایش عمومی نام»، آن را تغییر دهید.

15. فعال بودن شمارش کاربران

در دیتابیس وردپرس، هر کاربر دارای یک آیدی است و آیدی مدیر، چون معمولا اولین کاربر ایجاد شده در آن سایت است، 1 است و به سادگی می توان با وارد کردن آدرس زیر، به آیدی مدیر دست پیدا کرد؛

https://site.com/?author=1

بجای site.com، آدرس سایت خود را بگذارید اگر به آدرس زیر ری دایرکت شدید، یعنی این مشکل در سایتتان وجود دارد؛

https://site.com/author/نام کاربری مدیر سایت

برای رفع این مشکل، می توانید از افزونه امنیت همه کاره وردپرس که در شماره 13 معرفی کردیم، استفاده کنید و یا کد زیر را در فایل functions.php موجود در پوشه قالب سایتتان، قرار دهید.

add_action( 'template_redirect', 'roka_disable_author_page', 1 );
function roka_disable_author_page() {
	global $wp_query;
 
	if ( is_author() ) {
		unset( $_GET[ 'author' ] );
		$wp_query->set_404();
		status_header( 404 );
	}
}

می توانید برای امن تر شدن سایتتان، از طریق دیتابیس آیدی نویسنده یا همان مدیر سایت که در حالت عادی 1 است را به عددی دیگر تغییر می دهد.

برای انجام این کار باید از phpmyadmin، وارد دیتابیس خود شوید و از منوی بالا، روی SQL کلیک کنید و کد زیر را وارد و Go را بزنید؛

UPDATE wp_users SET ID = 2807 WHERE ID = 1;
UPDATE wp_posts SET post_author = 4837 WHERE post_author = 1;
UPDATE wp_comments SET user_id = 4837 WHERE user_id = 1;
UPDATE wp_usermeta SET user_id = 4837 WHERE user_id = 1;
ALTER TABLE wp_users AUTO_INCREMENT = 7582 

نکته: حتما قبل از انجام این عمل، از دیتابیس خود بکاپ تهیه کنید.
نکته: اگر پسوند جداول دیتابیس شما _WP نیست، در کد بالا هر جا _wp دیدید، پسوند خود را جایگزین کنید.

با اجرای کد بالا آیدی مدیر سایت، 7582 می شود. که می توانید با تغییر کد، به هر عددی که می خواهید، تغییرش دهید.

16. نمایش نام کاربری نویسندگان در wp-json

wp-json یک API RESTful است به وسیله آن می توانید داده های وردپرس خود را به صورت تعامل در بیاورید؛ از کاربرد های آن می توان به ارتباط سایت با اپلیکیشن موبایل سایتتان اشاره کرد؛

اما از این امکانات، می توان بر علیه امنیت سایت استفاده کرد؛

به عنوان نمونه، اگر بجای site.com، آدرس سایتتان را در آدرس زیر بگذارید و به صفحه ای مانند عکس بالا، هدایت شدید، یعنی این ابزار می تواند نام کاربری نویسندگان سایتتان را به صورت عمومی به نمایش بگذارد (از طریق همین آدرس؛ در عکس بالا، بعد از /author/، نام کاربری نویسندگانتان گذاشته شده است).

https://site.com/wp-json/wp/v2/users

برای غیر فعال سازی این ویژگی، اگر نیازی به API وردپرس نداشتید، می توانید با قرار دادن کد زیر در فایل functions.php، به طور کامل قابلیت دادن API را در سایتتان غیر فعال کنید؛

add_filter('json_enabled', '__return_false');
add_filter('json_jsonp_enabled', '__return_false');

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

اما اگر بخواهید فقط نمایش نام کاربری نویسندگانتان را محدود کنید، می توانید کد پایین را در فایل functions.php قالب سایتتان، قرار دهید.

add_filter('rest_endpoints', function( $endpoints ) {
    if ( isset( $endpoints['/wp/v2/users'] ) ) {
        unset( $endpoints['/wp/v2/users'] );
    }
    if ( isset( $endpoints['/wp/v2/users/(?P<id>[\d]+)'] ) ) {
        unset( $endpoints['/wp/v2/users/(?P<id>[\d]+)'] );
    }
    return $endpoints;
});

و اگر از افزونه امنیت همه کاره وردپرس استفاده می کنید، با کانفیگ آن، می توانید دسترسی به این مسیر را ببندید.

17. نمایش نام کاربری نویسنده یک پست خاص در wp-json

این روش نیز بواسطه قابلیت wp-json بوجود آمده است؛

در این روش، با رفتن به آدرس زیر، می توانید نام کاربری نویسنده یک پست یا برگه خاص را پیدا کنید؛

https://site.com/wp-json/oembed/1.0/embed?url=https://site.com/postlink

در مسیر بالا، بجای site.com، آدرس سایت خود را بگذارید و جای https://site.com/postlink، لینک پست یا برگه مورد نظر را قرار دهید.

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

اشتباهات مرگبار طراحی سایت برای ظاهر سایت

همانطور که پیشتر گفتیم، ظاهر سایتتان، هویت کسب و کارتان را در ذهن کاربرانتان شکل می دهد و اگر به آن توجهی نشود، ظاهر زیبایی از خود بر جای نخواهید گذاشت؛

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

18. استفاده از تصاویر بی کیفیت

امروزه کاربران سایتتان را در اندازه های مختلف مشاهده می کنند، از موبایل 6 اینچ گرفته تا تلویزیون 80 اینچ؛

به همین دلیل استفاده از تصاویر بی کیفیت باعث می شود تا تصاویر در اندازه های بزرگ، بی کیفیت شوند؛

البته باید توجه داشت که این مورد نباید تا حدی زیاد باشد که به سرعت سایتتان ضربه بزند، بنابراین پیشنهاد می کنیم تا از فرمت های درست و بهینه مانند WEBP یا AVIF برای نمایش تصایر در سایتتان استفاده کنید.

19. تایپوگرافی نادرست

استفاده از چندین فونت شاید به سایتتان جلوه زیبایی بدهد، اما اگر از هر فونت به اندازه و درست استفاده نکنید، نه تنها به ظاهر سایتتان کمکی نکرده اید، بلکه به ظاهر آن ضربه زده اید.

ما پیشنهاد می کنیم تا نهایتا از 3 فونت استفاده کنید؛ همچنین از فونت هایی که مخصوص عنوان هستند، در متن استفاده نکنید (مثلا از فونت مربع که مخصوص عنوان نویسی است، برای نوشتن محتوای نوشته تان استفاده نکنید).

برای خرید فونت، می توانید از سایت های فونت ایران و فونتامین اقدام کنید که به شما راهنمایی های لازم برای انتخاب فونت مناسب را ارائه کرده اند.

20. عدم توجه به لوگو سایت

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

خیلی مهم است ظاهر و تم لوگو تان با سایتتان هماهنگ باشد؛ اگر کل سایتتان تم خاص و زیبایی داشته باشد ولی لوگو مناسبی نداشته باشید، کل زحماتتان به هدر رفته و سایتتان جلوه خوبی نخواهد داشت!

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

21. استفاده بیش از حد از سایه ها

یکی از اشتباهات رایجی که در وبسایت های فارسی زبان مشاهده می شود، استفاده نادرست از سایه است؛

اگر ندانیم به کدام بخش، چه اندازه، کدام زاویه و کدام رنگ سایه بدهیم، ظاهر سایتمان آسیب جدی خواهد دید.

22. استفاده درست از رنگ ها

رنگ ها، به یک اسکلت بی جان، احساسات می دهند!

استفاده نادرست از رنگ ها باعث می شود تا با آن طراحی احساس راحتی نکنیم و حس کنیم چیزی اشتباه است!

مبحث رنگ ها بیشتر از آن که توصیفی و نظری باشد، حس کردنی است و نمی توان یک فرمول دقیق برای انتخاب رنگ در نظر گرفت؛

اما باز هم تحقیقاتی بر اساس رنگ ها و ارتباطشان با احساسات و به طور کلی مبانی نظریی رنگ ها جمع آوری شده است که میتوانید از لینک زیر دانلود کنید.

و یا می توانید در سایت هایی مثل coolors.co یا colorhunt.co به دنبال ترکیب مورد علاقه خود بروید و کل طرحتان را براساس آن پالت طراحی کنید.

23. استفاده از چند سبک در طراحی

فرض کنید با لباس عروسی در مجلس عزاداری ظاهر شده اید، دیگران که از دور، مجلس عزاداری را مشاهده می کنند چه حسی نسبت به آن خواهند داشت؟

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

برای شناخت سبک های مختلف طراحی، بهتر است سری به سایت dribbble.com بیندازید.

اشتباهات مرگبار طراحی سایت برای سرعت سایت

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

24. دانلود شدن ویدیو در DOM صفحه

به اجزایی که هنگام بارگیری و لود یک صفحه دریافت و اجرا می شود، دام (DOM) می گویند.

حال ممکن است یک ویدیو را به صورت پخش خودکار در صفحه قرار دهید تا به صورت خودکار اجرا شود؛ در این صورت ویدیو در دام صفحه دانلود می شود و این برای سرعت مضر است؛

برای همین پیشنهاد می کنیم تا از پخش خودکار استفاده نکنید و بگذارید کاربران با کلیک بر روی آیکن Play، ویدیو را اجرا و دانلود کنند.

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

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

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

25. امکانات اضافه

قبلا اگر در سایت دلتاسایت به صفحه 404 بر می خوردید، بازی دایناسور برایتان به نمایش در می آمد!

ما در صفحات خطا برای سرگرم کردن کاربر، از بازی دایناسور استفاده کردیم و از این بابت خیلی به خود می بالیدیم!

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

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

26. استفاده از هاست نامناسب

اگر بگوییم تاثیر کیفیت و سخت افزار هاست و سرور برای سرعتتان بالاترین تاثیر را دارد، دروغ نگفته ایم؛

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

در تصویر زیر، تاثیر دو هاست مختلف را بر سئو سایت و سهم خزش سایت، مشاهده می کنید؛

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

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

بنابراین اصلا تاثیر هاست در سرعت را نادیده نگیرید.

27. کانفیگ نادرست پلاگین های سرعت

افزونه های بهینه سازی سرعت همانطور که می توانند به بالا رفتن سرعت سایتتان کمک کننده باشند، می توانند مضر نیز باشند و تاثیر عکس بدهند.

چندین اشتباه رایج در کانفیگ نادرست پلاگین های سئو را در پایین مشاهده می کنید؛

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

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

28. استفاده غیر بهینه از المنتور

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

اما باز هم یکسری اشتباهات که در پایین آورده ایم، باعث کم شدن سرعت سایت می شوند؛

• استفاده از CSS سفارشی برای تک تک المان ها (باعث ایجاد تعداد فایل های CSS زیاد می شود).
• استفاده نکردن از المان های جهانی
• استفاده نکردن از فلکس باکس
• استفاده نکردن از رنگ های سراسری
• تعیین نکردن مقادیر پیشفرض در کیت المنتور

برای هرکدام از موارد بالا می توان یک مقاله نوشت و درباره شان توضیح داد اما اگر به موارد بالا توجه شود، سرعت سایت المنتوری تان از زمین تا آسمان تغییر خواهد کرد.

29. استفاده نکردن از SVG

همانطور که قبلا گفتیم، امروزه افراد در سایز های مختلفی سایتتان را مشاهده می کنند و اگر از آیکن ها (که به صورت خودکار باید حجم و اندازه کمی داشته باشند)، به صورت پیکسلی باشند، افرادی که در اندازه های بزرگتر سایتتان را مشاهده می کنند، آیکن ها را بی کیفیت مشاهده خواهند کرد؛

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

30. استفاده غیر بهینه از skeleton load

اگر در لود یک سایت نخست ساختار آن لود و سپس محتوا به آن اسکلت اضافه شود، می گوییم سایت از skeleton load استفاده کرده است؛ نمونه ای از این فناوری را در تصویر زیر مشاهده می کنید.

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

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

31. استفاده غیر بهینه از لودینگ ها

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

32. عدم توجه به سنگین شدن دیتابیس

خیلی از افراد تاثیر دیتابیس در سرعت سایتشان را نادیده میگیرند؛

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

روش دیگر نیز استفاده از افزونه هایی مثل WP-Optimize است که فقط توانایی حذف داده های گذرا و… که تاثیر چندانی در سرعت ندارند، را دارد. بنابراین برای سایت های بزرگ که دارای دیتابیس بزرگ هستند، این افزونه کارساز نیست.

33. وریبل نبودن فونت ها

امروزه هنگام خرید فونت ها، یکی از نام هایی که به آنها بر خواهید خورد، وریبل فونت ها است؛

در نسخه وریبل فونتها، شما تمام وزن های یک فونت را در یک فایل کم حجم خواهید داشت و این خیلی به بهینه تر شدن سرعت سایتتان کمک می کند؛ فکرش را بکنید، یک فایل 100 کیلوبایتی برای 9 وزن فونت!

پس حتما هنگام خرید فونت دقت کنید که نسخه وریبل را نیز دریافت می کنید و سپس کافیست به تمام وزن های فونتتان آدرس فایل وریبل را بدهید و فقط خصوصیت ضخامت فونت را تغییر دهید.

اشتباهات طراحی سایت برای سئو

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

34. استفاده از لینک های خراب

استفاده از لینک های خراب که به صفحه 404 منتقل می شوند، نه تنها به سئو سایتتان آسیب جدی وارد می کند، بلکه تجربه کاربری سایتتان را دچار لطمه خواهد کرد؛ به همین علت در فرآیند طراحی سایت به صحت لینک های داده شده توجه کنید و حتما آنها را تست کنید.

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

35. نو ایندکس نکردن سایت هنگام طراحی سایت

هنگامی که نخواهیم گوگل سایتمان را ایندکس کند، از تگ noindex در صفحه استفاده می کنیم؛

گذاشتن این تگ هنگام طراحی خیلی مهم است.

به این دلیل که در فرآیند طراحی سایت ممکن است چندین بار استراتژی خود را تغییر دهیم و ساختار های مختلف بچینیم، ولی موتور های جستجوگر فقط باید نسخه نهایی سایت را مشاهده کنند.

در سایت های وردپرسی نیز اگر از قالب های آماده و دموهایشان استفاده کنیم، کلی لینک و مطالب که به صورت نمونه در قالب گذاشته شده اند، روی سایت درون ریزی می شود؛ خیلی مهم است که گوگل این لینک ها و محتوا را تا زمانی که به صورت کامل شخصی سازی نشده اند، نبیند.

برای نو ایندکس کردن سایت وردپرسی نیز باید به مسیر  تنظیمات > خواندن بروید و از آنجا مثل تصویر بالا اقدام کنید.

خیلی مهم است که بعد از اتمام طراحی، تیک این گزینه را بردارید و از طریق گوگل سرچ کنسول سایت خود را ثبت کنید.

36. عدم استفاده از پلاگین سئو

پلاگین های سئو در فرآیند طراحی سایت، کمک شایانی به بهبود سئو می کنند، ساخت نقشه سایت، ساخت تیتر، گفتن نکاتی برای بهبود سئو و سئو محلی و… از مزایای پلاگین های سئو است؛

بنابراین پیشنهاد می کنیم حتما از پلاگین های سئو مثل رنک مث (Rank Math) استفاده کنید.

در تمامی خدمات طراحی سایت، برایتان کانفیگ افزونه های سئو را به صورت رایگان انجام می دهیم.

37. ساختن برگه shop در سایت های فروشگاهی

یکی از ایرادات وردپرس برای سئو، ساختن برگه Shop در سایت های فروشگاهی است؛ به طوری که با رفتن به آن صفحات، لیست کاملی از محصولات را مشاهده خواهید کرد؛

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

به طور مثال همچین برگه ای در دیجیکالا وجود ندارد:

https://www.digikala.com/shop

بنابراین اگر همچین برگه ای دارید، پیشنهاد می کنیم تا آن را به صفحه اصلی ری دایرکت کنید.

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

38. ساختن برگه blog در سایت های بلاگ

اگر سایت بلاگ دارید و صفحه اصلی تان آرشیو آخرین مقالاتتان است و برای نمایش نوشته های خاص از دسته بندی ها استفاده می کنید، نیازی به استفاده از برگه blog که به صورت خودکار در سایت های وردپرسی ساخته می شود، ندارید.

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

https://www.zoomit.ir/blog

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

با دریافت خدمات طراحی سایت بلاگ، از سئوی بالا سایت خود به همراه سرعت و زیبایی طراحی، لذت ببرید.

39. گذاشتن # در لینک ها

اگر برای آدرس یک لینک مقداری ندارید، بهتر است آن لینک را بردارید؛ استفاده از # در لینک ها می تواند برای سئو سایتتان تاثیر منفی داشته باشد و استفاده از آن به عنوان یک نگه دارنده لینک، توصیه نمی شود.

40. گذاشتن لورم ایپسوم در سایت

به متن های ساختگی که فقط برای پر کردن جای متن ها استفاده می شوند، لورم ایپسوم گفته می شود؛

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

41. عدم ریدایرکت لینک های تعویض شده

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

42. عدم ریدایرکت نسخه های مختلف از یک سایت

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

https://site.com
https://www.site.com
http://site.com
http://www.site.com

و اگر این نسخه ها به نسخه اصلی و درست سایتتان ریدایرکت نشود، گوگل چندین نسخه از سایتتان را مشاهده خواهد کرد و این خیلی برای سئو سایتتان ضرر دارد.

43. استتوس 200 در صفحات 404

صفحاتی که دارای خطای 404 هستند، باید به مرورگر استتوس 404 را اعلام کنند تا از ایندکس شدن محتوای آن صفحه جلوگیری شود؛

اگر استتوس 200 به مرورگر داده شود، این صفحات برای موتور های جستجوگر قابل ایندکس خواهند بود و برای سئو سایت، مشکل ایجاد خواهد کرد؛

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

در وردپرس این مشکل وجود ندارد اما سایت هایی که از CMS اختصاصی استفاده می کنند، ممکن است دچار این مشکل شوند.

44. مسدود کردن آیپی های خارجی

اگر سایت را فقط برای بازدیدکنندگان ایرانی قابل دسترس بگذارید و آیپی های خارجی امکان ورود به سایتتان را نداشته باشند، ربات های گوگل توانایی گردش در سایت و ثبت کردن صفحات را نخواهند داشت؛

اما اگر خیلی برایتان این مورد مهم است، حداقل اجازه ورود آیپی های گوگل را به سایتتان بدهید.

برای دسترسی به آیپی های گوگل، به صفحه آیپی های گوگل مراجعه کنید.

شاید برایتان سوال باشد که سایت های دولتی ایران که دسترسی آیپی های خارج به آن بسته است، چگونه توانایی ایندکس را پیدا کرده اند؟

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

45. عدم توجه به جاوا اسکریپت

اگر محتوای سایتتان با جاوا اسکریپت لود می شود، باید محتوا را به صورت رندر شده یا به اصطلاع SSR به ربات های گوگل تحویل دهید؛

به صورت عادی ربات های گوگل امکان مشاهده سایت های جاوا اسکریپتی را ندارند اما گوگل ادعا دارد توانایی دیدن این صفحات را دارد؛

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

نتیجه گیری

این بود 45 مورد از اشتباهات رایج طراحی سایت؛ امیدواریم برایتان مفید واقع شده باشد و استفاده لازم را برده باشید.

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

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