تکنیک های بهینه سازی سایت

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

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

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

در این مبحث شرح می دهیم چگونه یک وب سایت را می توان موبایل پسند کرده و تجربه ی کاربرانی که با گوشی های هوشمند به سایت دسترسی پیدا می کنند، ارتقا داد.
سئوی Mobile چیست (بهینه سازی سایت برای کاربران موبایل)؟

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

۱٫ یک وب سایت بهینه برای موبایل دارای طراحی واکنش گرا است (responsive) که علاوه بر دسکتاپ بر روی محیط موبایل نیز به راحتی قابل اجرا و استفاده می باشد. نه تنها نیاز به تعمیر و نگهداشت سایت را کاهش می دهد، بلکه محتوای آن را برای موتورهای جستجوگر منسجم (یکپارچه) و سازگارتر می سازد.
۲٫ محتوای یک وب سایت بهینه برای موبایل بدون نیاز به بزرگنمایی تصویر به راحتی برای کاربر خوانا و قابل استفاده می باشد. علاوه بر آن چنین وب سایتی دارای اندازه ی فونت، رنگ و طرح بندی (layout) مناسب می باشد.
۳٫ پیمایش در یک سایت بهینه برای موبایل باید با توجه به اندازه ی کوچک تصویر آن آسان و بی درد سر باشد. این سایت دارای لینک ها و دکمه هایی است که با توجه به قابلیت لمس به آسانی قابل دسترسی و استفاده هستند.
۴٫ یک سایت بهینه برای موبایل بایستی کم حجم و سبک باشد به گونه ای که برای بارگذاری بر روی شبکه ی موبایل زمان و پهنای باند کمتری مصرف کند.
۵٫ صفحه ی اصلی (homepage) یک سایت بهینه برای موبایل مهمترین نقش را در متصل کردن کاربر به محتوای مدنظرشان ایفا می کند. از این رو وب سایت های بهینه برای موبایل سعی می کنند لینک های مهم را در صفحه ی اصلی سایت لحاظ کنند تا بیشترین بازدید و کلیک را داشته باشند.

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

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

۱٫ انتخاب نحوه ی configuration و پیکربندی موبایل (انتخاب روش بهینه سازی نسخه ی موبایل سایت)
۲٫ آگاه سازی موتورهای جستجو (از نحوه ی پیکربندی و config موبایل)
۳٫ اجتناب از اشتباه های رایج

در نظر گرفتن پیکربندی موبایل

در کل سه config مختلف (جهت بهینه سازی نسخه ی موبایل سایت) برای انتخاب وجود دارد:

۱٫ Responsive Web Design (طراحی واکنش گرا)
۲٫ Dynamic serving (سرویس دهی مجزا)
۳٫ Separate URL (URL های جداگانه)

هر یک از گزینه های فوق مزایا و محدودیت های خود را دارند. البته خود Google طراحی واکنشگرا را پیشنهاد می کند. جدول زیر نشان می دهد چگونه config موبایل می تواند URL و کد HTML سایت را تحت تاثیر قرار دهد:
Mobile Configuration
URL
HTML
Responsive Web Design
Stays the same (تغییری نمی کند)
Stays the same (تغییری نمی کند)
Dynamic Serving
Stays the same (تغییری نمی کند)
Different HTMLs (کد HTML متفاوت)
Separate URLs
Different URLs (URL های مختلف)
Different HTMLs (کد HTML متفاوت)
Responsive web design (طراحی وب سایت واکنش گرا)

Google به این خاطر طراحی واکنش گرا را پیشنهاد می کند که ساده ترین روش (config موبایل) بوده و پیاده سازی آن بسیار آسان می باشد. در این روش همان کد HTML بر روی URL یکسان سرویس دهی می شود و تنها ظاهر سایت با توجه به اندازه ی صفحه ی نمایش موبایل تنظیم می گردد (کوچک و بزرگ می شود).
Dynamic serving (سرویس دهی مجزا یا کد HTML متفاوت)

روشی است که در آن کدهای HTML به نمایش گذاشته شده برای کاربر با توجه به نوع دستگاهی که سایت با آن مورد دسترسی قرار می گیرد، فرق می کند ولی URL سایت تغییری نخواهد داشت.

در صورت انتخاب این نحوه ی پیکربندی، لازم است به Google اعلان کنید محتوایی که crawl ( بررسی، جمع آوری و فهرست بندی) می کند، ممکن است در دستگاه های مختلف دارای ظاهری متفاوت باشد. یکی از کاستی های عمده ی روش مزبور این است که قبل از ارائه ی محتوا به کاربر، باید پردازش بیشتری بر روی آن (در سمت سرور) انجام شود. این روش زحمت و بار اضافی بر دوش سرور می گذارد و سبب کندی و افت کارایی آن می شود.
Separate URLs (URL های مجزا)

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

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

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

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

Google و دیگر موتورهای جستجوگر باید با از نوع پیکربندی (mobile config) سایت شما برای موبایل آگاه باشد. مهمتر از همه، Google برای اینکه سایت شما را به خوبی رتبه بندی کند باید بتواند محتوای آن را خوانده و بفهمد (اینکه چگونه گوگل را از آن آگاه می کنید دیگر بستگی به روشی دارد که برای پیکربندی سایت برای موبایل انتخاب کرده اید – روش responsive، dynamic یا URL).

در صورتی که سایت شما از طراحی واکنش گرا برخوردار باشد، الگوریتم های Google به صورت خودکار آن را تشخیص می دهند و نیازی نیست که شما موتور جستجو را از نحوه ی پیکربندی مطلع کنید. در صورت استفاده از طراحی واکنش گرا برای سایت، لازم است تگ meta زیر را به header صفحه اضافه نمایید:
?
۱

name=”viewport” content=”width=device-width, initial-scale=1.0″>

مقدار viewport مشخص می کند که صفحه ی وب شما چگونه در دستگاه به نمایش گذاشته می شود. سایتی که طراحی آن واکنشگرا باشد، اندازه ی خود را متناسب با اندازه ی صفحه نمایش دستگاه مورد استفاده تغییر می دهد. با تخصیص مقدار viewport به خصیصه ی name، صفحه ی سایت خود را با اندازه ی صفحه ی نمایش تنظیم می کند.

در صورتی که سایت شما با نوع پیکربندی dynamic serving برای موبایل تنظیم شده باشد، لازم است با استفاده از هدر Vary HTTP این را به Google اعلان نمایید:
?
۱

Vary: User-Agent

هدر Vary به موتورهای جستجو می گوید که بر روی دستگاه موبایل و رایانه های دسکتاپ محتوای متفاوت سرویس دهی خواهد شد. این header به خصوص زمانی که محتوای سایت خود را با یک سیستم ذخیره ی موقت اطلاعات (cache system) همچون Content Delivery Network سرویس دهی می کنید، اهمیت پیدا می کند. در واقع سیستم مزبور برای ارائه ی محتوا در دستگاه ها (محیط ها) مختلف از این header استفاده می کنند.

The Vary header is important to tell the search engines that different content will be served on desktops and mobile devices. This header is really important when your content is served by any cache system like a Content Delivery Network and those systems will make use of this header while serving content on different devices.

اگر دو نسخه ی متفاوت از سایت داشته باشید (هر یک بر روی URL متفاوت) برای مثال example.com و m.example.com، آنگاه بایستی از تگ link rel=alternate در نسخه ی دسکتاپ و بالعکس استفاده کنید:
?
۱
۲
۳
۴
۵

: نسخه ی دسکتاپ باید تگ زیر را در بخش هدر داشته باشد

:نسخه ی موبایل بایستی تگ زیر را در بخش هدر داشته باشد

اجتناب از اشتباه های رایج

۱٫ داشتن صفحاتی که با سرعت پایین بارگذاری می شوند (Slow Mobile Pages) – همان طور که می دانید شبکه و اینترنت موبایل نسبت به شبکه های اینترنتی سیمی کندتر هستند، از اینرو باید به سرعت بارگذاری صفحات موبایل توجه داشته باشید. در واقع سرعت بارگذاری صفحات وب سایت در موبایل یکی از عوامل بسیار مهم در رتبه بندی برای گوگل محسوب می شود. می توانید برای اندازه گیری سرعت بارگذاری صفحات از یک ابزار سنجش SEO موبایل استفاده کنید. برای این منظور Google ابزار متعددی را ارائه می دهد. می توانید برای استفاده از آن ها به لینک زیر مراجعه کنید: −https://www.google.com/webmasters/tools/mobile-friendly/
۲٫ مسدود کردن CSS و JavaScript– Google توصیه می کند برای بهینه سازی نسخه ی موبایل سایت، CSS و JavaScript را به صورت درون خطی (inline) در صفحه تعریف کنید تا همراه با بقیه ی محتوا به راحتی دانلود شود. بنابراین اگر کد CSS زیادی در صفحه ندارید، بهتر است آن را داخل خود تگ تنظیم کنید. اما اگر دستورات CSS زیادی در چندین فایل مجزا دارید، بهتر است آن را در پایین صفحه قرار دهید که در آن صورت راه دانلود و بارگذاری دیگر محتویات صفحه را نمی بندد. این امر در مورد JavaScript نیز صادق است که می آن را به صورت inline و داخل صفحه و همچنین در پایین صفحه لحاظ کرد. اگر مجبورید فایل JavaScript را در بالای صفحه قرار دهید، در آن صورت توصیه می کنیم خصیصه ی async را به هنگام افزودن فایل در صفحه لحاظ نمایید.

async type=”text/javascript” src=”jquery.js”>

۳٫ Redirect های متعدد صفحات Mobile – از آنجایی که شبکه ی موبایل معمولا کند است، redirect های متعدد (هدایت کاربر به آدرس دیگر) می تواند تاثیر بدی بر سرعت بارگذاری صفحه ی سایت شما داشته باشد. اگر نسخه های مجزا از یک سایت دارید (مستقر بر روی چند URL متفاوت)، مطمئن شوید تمامی لینک های شما به صفحات مرتبط ارجاع می دهند. برای مثال در صورتی که چندین نسخه از سایت دارید و تشخیص می دهید که کاربری نسخه ی دسکتاپ از سایت را با موبایل مشاهده می کند، اما شما یک نسخه ی معادل از آن سایت برای موبایل در آدرس دیگر دارید، بایستی بجای نمایش خطای ۴۰۴، کاربر را به آن URL هدایت (redirect) کنید.
۴٫ فایل های تصویری سنگین و پرحجم – فایل های تصویری سنگین می توانند سرعت بارگذاری صفحه را کاهش دهند، با این همه نمی توان آن ها را به طور کلی از محتوای سایت حذف کرد چراکه در مواردی لازم و در جلب بازدیدکننده موثر هستند. از این رو می بایست تناسبی بین متن و فایل های تصویری سنگین برقرار کرد. می توانید با بهره گیری از ابزار کارامد عکس ها و فایل های تصویری خود را با وضوح و کیفیت پایین ذخیره کرده و آن ها را برای بارگذاری سریع بهینه نمایید (و بدین وسیله از دانلود عکس های سنگین و کاهش سرعت لود سایت جلوگیری کنید).
۵٫ داشتن افزونه و پنجره های pop-up – افزونه هایی (plug-in) نظیر Flash و Java ممکن است بر روی محیط موبایل کاربر اجرا نشود. توصیه می کنیم از داشتن محتوایی که بر روی صفحات موبایل اجرا نمی شود، خودداری نمایید. تحت هیچ شرایطی از پنجره های pop-up در صفحات موبایل استفاده نکنید، چرا که بستن آن ها با توجه به صفحه نمایش کوچک موبایل و قابلیت لمس دشوار بوده و سبب رنجش کاربر می شود.

همیشه به هنگام طراحی صفحه ی وب سایت برای موبایل، در نظر داشته باشید که کاربر با صفحه نمایش کوچک و فضای محدود مواجه است. بنابراین باید در انتخاب و تنظیم URL، عنوان صفحه و meta-description مختصر عمل کنید – البته بدون خدشه دار کردن یا ضربه زدن به اصل یا کیفیت اطلاعات که در بهبود SEO سایت ضروری است.
ابزار کاربردی و مفید

در زیر لیستی از ابزار کاربردی را مشاهده می کنید که می توان با استفاده از آن ها به میزان بهینه بودن سایت برای موبایل و به اصطلاح همراه پسند بودن آن پی ببرید:

۱٫ ابزار Google Webmaster – به کمک ابزار و تکنیک های موجود Google پی ببرید به هنگام طراحی سایت برای دسکتاپ و موبایل بایستی چه نکاتی را رعایت کرده و از انجام چه کارهای بپرهیزید.
۲٫ Mobile Emulator (ابزار شبیه ساز محیط موبایل) – محیطی را برای شما شبیه سازی می کند که می توانید در آن ظاهر و نحوه ی نمایش سایت خود را بر روی دستگاه های مختلف موبایل مشاهده نمایید.
۳٫ Moz Local – به کمک این ابزار می توانید local SEO (سئوی محلی) خود را ارزیابی کرده و از خوب بودن آن اطمینان حاصل کنید.
۴٫ Responsive Web Design Testing Tool (ابزار تست طراحی واکنش گرا) – با استفاده از این ابزار می توانید ظاهر سایت واکنش گرای خود را در دستگاه های مختلف که اندازه ی صفحه نمایش آن ها متفاوت است، مشاهده نموده و از بهینه بودن آن اطمینان حاصل نمایید.
۵٫ Screaming frog – یک ابزار کاربردی است که به شما امکان می دهد سایت خود را تحلیل کرده و تمامی redirect های آن را چک کنید (از عملکرد صحیح اطمینان حاصل نمایید).
۶٫ افزونه ی User Agent Switcher – یک افزونه برای مرورگر Firefox است که به وسیله آن می توان نحوه ی نمایش سایت را با user agent تست کرد (در واقع با استفاده از آن می توان مشاهده کرد که نمایش سایت در نسخه های مختلف مرورگر یا مرورگر دیگر چگونه است).