ساختار طراحی سایت برای سئو چگونه باید باشد؟

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

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

طراحی ساده

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

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

رعایت اولویت‌بندی

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

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

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

موقعیت (Position)

جایگاه هر چیز در سایت به وضوح در نظمی که کاربر آن را می‌بیند، تأثیر می‌گذارد.

رنگ و تضاد (Contrast)

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

اندازه

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

فاصله

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

Line Spacing

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

Padding

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

White Space

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

 

Navigation

یکی از ناامیدکننده‌ترین تجربه‌هایی که کاربر در یک وب سایت خواهد داشت، عدم توانایی تشخیص اینکه به کجا می‌رود یا در کجا قرار دارد، است. دو جنبه از Navigation وجود دارد که در ادامه آنها را بررسی خواهیم کرد:

کاربر کجا می‌تواند برود؟

چند قانون وجود دارد که باید به خاطر بسپارید. دکمه‌های رفتن به بخش‌‎های مختلف سایت باید آسان پیدا شوند و بالای صفحه باشد. متن هر دکمه باید کاملاً واضح باشد تا کاربر متوجه شود که با فشردن این دکمه به کجا می‌رود.

 اکنون کاربر کجاست؟

روش‌های زیادی وجود دارد که می‌توانید کاربر را جهت‌یابی کنید. استفاده از breadcrumb، sub-headings یا sitemap روش‌های مناسبی هستند.

تایپوگرافی و خوانایی

متن رایج‌ترین عنصر طراحی است. بنابراین جای تعجب ندارد که به آن توجه زیادی شود. مهم نیست که طراحی شما چقدر خوب است، این متن است که اطلاعات را به کاربر می‌دهد. شما باید همراه با استفاده از کلمات کلیدی، meta-data و سایر عناصر مهم برای سئو، تایپوگرافی خود را برای بازدیدکنندگان جذاب و خوانا نگه دارید. مهم است که موارد زیر را در نظر داشته باشید:

انتخاب فونت

از فونت هایی که خواندن آنها ساده تر است استفاده کنید.

سایز نوشته

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

طول خطوط

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

رنگ

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

قابلیت استفاده

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

ترازبندی مناسب (Alignment)

تراز کردن باعث می‌شود طرح شما مرتب‌تر و قابل هضم‌تر شود. همچنین سایت رسمی‌تر به نظر می‌رسد.

انسجام

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

سازگاری با موبایل

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

پالت رنگی و تصاویر مناسب

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

برقراری ارتباط با کاربر

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

بارگیری آسان

هیچکس از وب سایتی که دیر بارگیری می‌شود، خوشش نمی‌آید. بنابراین بهینه‌سازی اندازه تصویر، ادغام کردن فایل‌های CSS یا JavaScript باعث کاهش درخواست به سمت سرور می‌شود.

یک مشاور سئو باید تمامی موارد ذکر شده را بررسی کند. در ادامه کدهایی را به شما معرفی خواهیم کرد که در طراحی سایت باید از آنها استفاده کنید:

مبانی HTML برای SEO

اگر به بخش source code در هر صفحه مراجعه کنید، با مجموعه‌ای از کدهای HTML روبه‌رو خواهید شد که ممکن است شما را وحشت‌زده کند. اینها کدهایی هستند که مرورگرهای وب آن را می‌خوانند تا نحوه نمایش محتوای صفحه وب را تشخیص دهند  Google و سایر موتورهای جستجو source code را می‌خوانند تا بدانند سایت در مورد چیست. در ادامه به معرفی موارد پایه‌ای HTML مورد نیاز سئو خواهیم پرداخت.

Title tag

Title tagمهم‌ترین عنصر در هر صفحه وب است. با فشردن کلید ترکیبی Control + U در هر صفحه، Title tagرا در source code مشاهده خواهید کرد. باید مطمئن شوید که هر صفحه تنها یک Title tag دارد. آنچه که در بخش قرار می‌گیرد در واقع همان عنوانی است که Google آن را در نتایج نشان می‌دهد.

گوگل در حال حاضر در حال آزمایش کردن این است که این متن را کمی تغییر دهد، اما بیشتر موارد آنچه که دقیقاً در Title tag است را در نتایج نمایش می‌دهد. بنابراین بسیار مهم است که این متن جذاب باشد تا کاربر روی لینک آن کلیک کند.

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

<title> example text </title>

Meta description

meta description همان خط پایین title tag قرار دارد. این بخش را گوگل به رایگان در اختیار شما قرار می‌دهد که برای معرفی سایت خود از آن استفاده کنید.

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

تکراری بودن ایhttps://webimo.info/header-tags/ن بخش بین صفحات مختلف، بر رتبه‌بندی جستجو تأثیر نمی‌گذارد و مشکلی بزرگ نیست، اما می‌توانید شانس خود را برای استفاده از تبلیغات رایگان از دست بدهید.

<meta name=”description” content=”example text”/>

Header tags

این tagها خوانایی مطب شما را بالا می‌برند و به‌طور مستقیم در متن به کار برده می‌شوند. چندین Header tags مختلف وجود دارد. بسته به متن ممکن استh1 ، h2 ، h3 و گاهی اوقات h4 یا حتی h5 داشته باشید. این Headerها به ترتیب کوچک می‌شوند و عناوین و زیرنویس‌های خوبی را برای سازماندهی مطالب ایجاد می‌کنند.

عنوان H1، عنوان اصلی صفحه است. این عنوان باید به قدری جذاب و گیرا باشد که کاربر را به خواندن ادامه مطلب ترغیب کند. برخی افراد تصور می‌کنند که اگر محتوای title tag را در H1 کپی کنند، کار تمام است، اما بهتر است که متنی جذاب‌تر در صفحه داشته .

<h1> example text </h1>

<h2> example text </h2>

<h3> example text </h3>

…

<h6> example text </h6>

لینک داخلی (Internal link) و anchor text

یک بحث مهم و پایه‌ای در HTML، دانستن عملکرد لینک‌های داخلی و anchor text است. هر صفحه وب باید به یک محتوا لینک داشته باشد. هر لینک نیز کد مخصوص به خود را دارد. لینک‌ها می‌توانند به داخل سایت شما اشاره کنند یا به یک سایت دیگر.

نکته مهم دیگر این است که محتوایی که در این tag قرار گرفته همان anchor text است. کلمات موجود در متن لنگر مهم‌اند؛ چراکه موتورهای جستجو به آن توجه می‌کنند.

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

<a href=”http://example-website.com”>this is anchor text</a>

Nofollow links

ویژگی nofollow درون یک anchor link بکار برده می‌شود. ویژگی nofollow به Google و سایر موتورهای جستجو می‌گوید که لینک به صفحه بعد را دنبال نکنند. وقتی از nofollow استفاده می‌کنید که نمی‌خواهید Google روی لینک به صفحه بعدی متمرکز شود. در واقع شما می‌خواهید Google را به سمت مواردی هدایت کنید که فکر می‌کنید مهم‌تر هستند.

شما تنها باید از آن برای نظرات در بلاگ استفاده کنید تا میزان اسپم را پایین نگه دارید؛ چراکه ممکن است کاربران در نظرات خود، لینک‌هایی قرار دهند.

<a rel=”nofollow” href=”http://www.example.com/”>Cheap Flights</a>

Image alt tags

image alt یک tag بسیار مهم است، به‌خصوص در سایت‌هایی که تجارت الکترونیکی هستید. این tag به یک موتور جستجو می‌فهماند که تصویر در مورد چیست. اینگونه روبات‌های Google می‌دانند تصویر شما درمورد چیست و کمک می‌کند تا تصویر در جستجوی تصویری، در جایگاه بالاتری نشان داده شود.

<img src=”smiley.gif” alt=”Smiley face”>

Canonical tag

این tag که در سال ۲۰۰۹ منتشر شده بسیار مهم است؛ زیرا اگر صفحات وب زیادی دارید که محتوای مشابه دارند، می‌توانید به Google بگویید که تنها صفحه‌ای که باید به آن توجه کند، یک صفحۀ خاص است. استفاده از Canonical یک راهکار مناسب برای جلوگیری از duplicate content (محتوای تکراری) است.

</”/link rel=”canonical” href=http://www.example.com>