سئو در طراحی سایت - مرتضی مهرابی

اصول سئو در طراحی سایت

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

در ادامه سعی میکنیم به صورت مختصر و مفید اکثر موارد رایج را پوشش دهیم:

انتخاب هاست مناسب

البته انتخاب هاست در مرحله پیش از طراحی سایت است اما به دلیل این که در نهایت کل المان های طراحی شده باید توسط سرور رندر شود، قوی بودن آن از اهمیت بالایی برخوردار است. سرعت ریسپانس سرور و آپتایم مناسب از مهمترین عوامل در انتخاب هاست می باشد. مباحث دیگری در انتخاب هاست مثل کچینگ مناسب وب سرور، IP، Location و … مطرح است که بیان آن در این مقاله نمیگنجد.

تگ ها و متاتگ های هدر سایت

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

تایتل صفحه

<title> اینجا نوشته می شود </title>

دیسکریپشن صفحه

<meta name="description" content="اینجا نوشته می شود"/>

متاتگ ربات ها (Follow – Nofollow – Index – Noindex)

<meta name="robots" content="اینجا نوشته می شود" />

متاتگ های og (برای شبکه های اجتماعی)

حالت های زیادی دارد که با سرچ در وب انگلیس به راحتی قابل دسترس است.

کنونیکال

تگ های دیگری مثل Viewport Meta Tag هم وجود دارد که بار سئویی برای ما ندارد که قطعا طراحان عزیز رعایت میکنند.

تگ های محتوایی و داخلی صفحه

در تگ بادی (<body> اینجا </body>) محتوای اصلی سایت قرار دارد که استفاده اصولی و رعایت مفاهیم آنها به شدت مهم می باشد. در ادامه برخی از تگ های html پرکاربرد را باهم بررسی خواهیم کرد.

تگ های h1 الی h6

تگ های h یا heading، تگ عنوان های ما هستند که به صورت ساختار درختی طراحی شده اند. بدین شکل که h2 زیرتیتر h1 و h3 زیر تیتر h2 است، به همین شکل الی h6.

تگ Header

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

تگ Article

اگر سایت محتوا محور باشد بخش Content را میتوانیم در تگ Article قرار دهیم.

تگ Aside

مطالب مرتبط با موضوع اصلی را میتوانیم در این تگ قرار دهیم. مثلا ساید بار سایت که محتوای اصلی در آن نیست ولی مرتبط با محتوا اصلی است را میتوانیم در تگ Aside قرار دهیم.

تگ Footer

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

تگ nav

در این تگ لینک های منو و ناوبری سایت قرار میگیرد.

تگ a

یکی از تگ های بسیار مهم برای سئو سایت است زیرا که کرالر ها از طریق لینک ها در صفحات وب می خزند. توجه شود که عملیات ارجاع در تگ a حتما با href=”” انجام شود مثل:

<a href=”لینک مورد نظر” >Anchor text</a>

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

<a onclick=”myFunction()”>َAnchor text</a>

<a href=”javascript:void(0);” onclick=”window.location.href=’لینک مورد نظر'”>Anchor Text</a>

تگ های مهم دیگری مثل تگ P (برای پاراگراف)، تگ Strong (برای بولد و مهم کردن)، تگ Blockquote (برای نقل قول) و … وجود دارد که آسان هستند و از یک طراح سایت انتظار می رود به این مسائل مسلط باشد، لذا از ادامه بیان تگ ها صرف نظر می کنیم.

استفاده صحیح از جاوااسکریپت و درخواست های Ajax

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

توجه به زبان نشانه گذاری Schema

گاهی لازم است در مراحل طراحی برای برخی صفحات به صورت خودکار یک سری Schema به صورت JSON–LD یا Micro Data در نظر گرفته شود، لذا مطالعه دقیق داکیومنت های گوگل و سایت Schema.org برای این مورد خالی از لطف نمی باشد.

ریسپانسیو بودن سایت

با توجه به افزایش تعداد کاربران موبایلی، نمایش صحیح سایت در این دستگاه ها به شدت حائز اهمیت است، گوگل که در سال 2018 به دلیل افزایش چشمگیر کاربران موبایلی از الگوریتم Mobile First Index خود رونمایی کرد. در این الگوریتم کرالرها نسخه موبایلی وب سایت را مورد بررسی قرار میدهند و محتوا را ایندکس میکنند.

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

سرعت بارگذاری سایت

فاکتورهای Core web vitals اخیرا از فاکتورهای تاثیرگذار سئو شده است، لذا توجه به آن از واجبات طراحی سایت است. از فاکتورهای مهم core web vitals میتوان به FCP ,LCP و CLS اشاره کرد، همچنین ابزارهایی مانند GTMetrix,Lighthouse, Page Speed Insight و Pingdom برای تست مناسب می باشند. توضیحات مرتبط با هر یک از فاکتورهای مذکور و همچنین ابزارهای نامبرده در مقالاتی جداگانه به صورت تخصصی، تشریح و مورد بررسی قرار خواهند گرفت.

آموزش سئو قالب وردپرس

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

نظرات تخصصی لغو پاسخ