reiha

قواعد سئو که یک متخصص رابط کاربری باید آنها را رعایت کند

سئو و بهینه سازی سایت - نویسنده : ریحا حسینی - ۲۸ مرداد ۱۳۹۴

SEO

در این مطلب قصد داریم به این بپردازیم که چه مواردی توسط یک توسعه دهنده رابط کاربری ( Front-end Developer ) باید رعایت شود.

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

تگ ها ( Tags )

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

به طور مثال به کد زیر توجه کنید:

<header>

    <h1>عنوان یک مقاله</h1>

</header>

همانطور که در صفحه ویکی مستندات به آن اشاره شده است، تگ <header> در اینجا اضافی است و کاربردی ندارد و باید حذف شود.

تعریف تگ <header>:

یک گروه از مواردی که برای معرفی به کار میروند و یا یک سری موارد برای پیمایش ( navigation )

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

به عنوان مثال مقاله جلوگیری از اشتباهات رایج در HTML5 را یک نگاهی بیاندازید.

نقش ها ( Roles )

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

<aside role="complementary">

    <!-- محتوای مربوط به نوار کناری -->

</aside>

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

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

SEO and CSS

استایل ها ( CSS )

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

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

جاواسکریپت ( JavaScript )

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

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

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

تصاویر ( Images )

خیلی نمیخواهم در این باره توضیح دهم، زیرا از حوزه تخصص من خارج است؛ اما تمام تصاویری که در وبسایت بارگذاری میشود را کم حجم ( Optimize ) کنید.

بهترین راه این است که همه عکس های کوچک و ریز که به عنوان تزئین در طرح شما استفاده شده اند را Sprite کنید.


اگر با Sprite آشنا نیستید، از اینجا میتوانید نحوه کار آن را مشاهده کنید و مقاله CSS-Sprites هم مطمئناً مفید خواهد بود.

چند نکته

در انتها نیز مایلم چند نکته اساسی که باید همیشه در ذهن داشته باشید را با هم مرور کنیم:

  1. روز به روز بر هوشمندی موتورهای جستجو افزوده میشود. بنابراین به طور کل روش های فریباننده را فراموش کنید. شاید امروز از آنها نتیجه بگیرید، اما ممکن است فردا گوگل بفهمد و دیگر از شما خوشش نیاید.
  2. اسکریپت ها و استایل ها و حتی الامکان HTML خود را نیز، Minify کنید.
  3. هرکاری که باعث بالارفتن سرعت طرح نهایی که شما اجرا کرده اید میشود، انجام بدهید.
  4. دانستن معنی تگ ها و استفاده درست از آنها، به جرات نیمی از مسیر است.

نظر شما چیست؟ به نظر شما چه مواردی میتوانست در این مقاله جا داشته باشد که جایش خالی است؟

برچسب ها :

start campaign

کسب‌وکار خود را رشد دهید...

راه‌کارهای ای‎نتورک برای رشد کسب‌وکار شما

بیشتر بدانید

ریحا حسینی

ریحا بیشتر وقت روزش را در حال دیدن، نوشتن و فکر کردن به جاواسکریپت می گذراند. در حال حاضر به عنوان Lead Front-end Developer در Anetwork مشغول به کار است. فارغ از تسلطش در برنامه نویسی Back-end مدتی است که تمرکز خود را روی حیطه طراحی تعامل قرار داده و سعی در پیشبرد این شاخه دارد. از طرفداران دو آتیشه Mozilla نیز هست!

تبلیغات

2 دیدگاه در رابطه با “قواعد سئو که یک متخصص رابط کاربری باید آنها را رعایت کند
  1. سینا حسن زاده
    مرداد ۲۹, ۱۳۹۴ — ۵:۲۴ ب.ظ

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

  2. معین امیدی
    شهریور ۲, ۱۳۹۴ — ۳:۴۰ ب.ظ

    واقعا مهم بودن من که Bookmark کردم!

درباره این مطلب دیدگاهی بنویسید...

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز با * علامت‌گذاری شده‌اند.

azar-events

رویدادهای آذر ماه

بازاریابی شبکه‌های اجتماعی - ۲۹ آبان ۱۳۹۵

عضویت در خبرنامه

ایمیل شما برای هیچ منظور دیگری استفاده نخواهد شد !