آموزش سئو-آموزش تکنیک سئو موبایل Mobile SEO

آموزش تکنیک های سئو موبایل (Mobile SEO)

امروزه ، میلیون ها نفر از کاربران توسط گوشی های موبایل، اسمارت فون ها و تبلت ها که بر روی سیستم عامل های مختلف ios، اندروید و ویندوز اجرا می شوند، به اینترنت دسترسی دارند. از این رو، این مسئله به امر ضروری و مهم تبدیل شده که وب سایت خودتان را با این تغییرات محیط کاری، هماهنگ کرده و به روز رسانی لازم و مناسب را در طراحی خودتان اعمال نموده تا به این دسته از کاربران نیز، سرویس مناسب ارائه کنید.
نسخه desktop یا معمولی یک سایت که برای مشاهده در یک مانیتور بزرگ، طراحی شده است، ممکن است برای نمایش در یک دستگاه موبایل مناسب نباشد. نسخه ای از یک سایت که با اندازه صفحه نمایش موبایل سازگاری ندارد (در اصطلاح mobile-friendly نیست)، کاربر را مجبور به zoom کردن متوالی و جا به جایی نقاط صفحه، جهت خواندن مطالب آن، خواهد کرد.
معمولا کاربران این حالت را خسته کننده و آزار دهنده یافته و تمایل دارند مشاهده سایت را متوقف کنند. در مقابل، یک نسخه متناسب با موبایل، بسیار راحت قابل خواندن و استفاده خواهد بود.
در به روز رسانی های جدید استانداردهای سئو گوگل، mobile-friendly بودن یک سایت جهت تاثیر نمایش در نتایج جستجو توسط موبایل ها، اجباری شده است. به این نکته هم توجه داشته باشید، وب سایتی که موبایل فرندلی نباشد، شانس کمتری جهت نمایش در نتایج جستجوهای معمولی موتورهای جستجو، خواهد داشت.
در این درس، به آموزش نحوه طراحی یک سایت به صورت mobile-friendly پرداخته ایم تا کاربران با دستگاه های دارای صفحه نمایش کوچک نیز، در هنگام مشاهده سایت، تجربه خوشایندی کسب کنند.

سئو موبایل (SEO Mobile) چیست ؟

به طور کلی، تکنیک بهینه سازی سایت ها جهت موتور جستجو برای موبایل (Mobile Search Engine Optimization) عبارت است از پروسه طراحی یک سایت به صورتی که نمایش آن بر روی موبایل های مختلف با صفحه نمایش های دارای اندازه متفاوت، مناسب و سازگار بوده و پهنای باند کمتری را مصرف کند. جدا از تمام قوانین سئو ای که به نسخه معمولی یا desktop یک وب سایت بایستی اعمال کنیم، نیاز داریم تا توجه ویژه ای در هنگام طراحی صفحات برای دستگاه های موبایل نیز داشته باشیم. یک وب سایت در صورت رعایت استانداردهای زیر می تواند سازگار با موبایل یا mobile-friendly باشد :

یک وب سایت خوب برای موبایل، بایستی به صورت واکنش گرا یا responsive طراحی شده باشد. یعنی در هر حالت (نسخه desktop یا موبایل) و با هر اندازه صفحه نمایشی، خود را سازگار کرده و محتویات را به درستی نشان دهد. این کار نه تنها نگهداری و استفاده از سایت را ساده تر کرده، محتویات آن را برای موتورهای جستجو قابل درک خواهد بود.
محتویات یک سایت مناسب جهت موبایل، بایستی بدون نیاز به بزرگ یا کوچک کردن صفحه و یا حرکت افقی آن، قابل مشاهده و خواندن باشد. همچنین بایستی دارای fonts، رنگ و قالب مناسب جهت صفحات موبایل باشد.
حرکت بین صفحات و آدرس ها (navigate) در یک سایت موبایل فرندلی، بایستی ساده باشد. برای این کار معمولا از لینک ها و دکمه های بزرگ تر استفاده می شود که به راحتی با انگشت قابل لمس کردن و انتخاب باشند.
معمولا سایت های mobile-friendly، سایت های کم حجمی بوده و به پهنای باند و زمان کمی جهت لود کامل، نیاز دارند.
صفحه اول یک وب سایت موبایلی، نقش بسیار مهمی در ارتباط دادن کاربران با محتویاتی که به دنبال آن هستند، دارد. بنابراین، سایت های مناسب جهت موبایل، حتما توجه می کنند تا لینک های مهم آن ها بر روی صفحه اول قرار گرفته و به خوبی دیده شوند.

رنک یک سایت به شدت بستگی به کاربر پسند بودن آن دارد. برای این منظور، از راهکارهای ارائه شده در قست های بعدی برای ایجاد یک سایت mobile-friendly خوب استفاده کنید.

سایت خود را برای موبایل بهینه کنید

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

مرحله اول : یک تنظیمات خاص موبایل (mobile Configuration) را انتخاب کنید.
مرحله دوم : اطلاع رسانی به موتورهای جستجو.
مرحله سوم : از اشتباهات رایج دوری کنید.

مرحله اول : انتخاب تنظیمات ویژه موبایل

سه نوع تنظیمات خاص جهت نمایش سایت های موبایلی وجود دارد :

طراحی واکنش گرا (Responsive Web Design).
اجرا شدن دینامیک از روی سرور.
تعیین آدرس های جداگانه برای بخش موبایل (Seprate URLs).

هر یک از تنظیمات فوق، معایب و مزایای خاص خود را دارد. البته گوگل، طراحی واکنش گرا را توصیه می کند، ولی از هر 3 تنظیمات نیز پشتیبانی انجام می دهد. جدول زیر نشان می دهد چگونه تنظیمات فوق، URL و کد Html Code صفحه شما را تحت تاثیر قرار می دهند :

تغییرات آدرس و کد صفحه در انواع طراحی های صفحه
طراحی وب واکنش گرا Responsive Web Design	آدرس ثابت می ماند	کد HTML ثابت می ماند
اجرا شدن دینامیک از روی سرور Dynamic Serving	آدرس ثابت می ماند	کد HTML ثابت می ماند
آدرس های مجزا Separate URLs	آدرس صفحه تغییر می کند	کد HTML صفحه تفییر می کند

بررسی طراحی واکنش گرا Responseve Design :

گوگل استفاده از طراحی وب واکنش گرا را توصیه می کند، زیرا ساده ترین نوع تنظیمات موبایلی بوده و اجرای آن ساده است. این نوع طراحی، کد HTML و آدرس URL یکسانی را برای صفحات به کار برده، ولی نحوه نمایش هر صفحه را بر حسب اندازه صفحه نمایش دستگاه کاربر تغییر می دهد :

بررسی طراحی واکنش گرا Responseve Design در سئو

اجرای دینامیک از روی سرور (Dynamic Serving) :

اجرای دینامیک (Dynamic Serving) نوعی از تنظیمات جهت طراحی موبایلی است که در آن آدرس URL صفحات سایت بدون تغییر باقی می ماند، ولی سرور بر حسب اندازه صفحه نمایش و دستگاهی که کاربر در حال مشاهده صفحه است، کدهای HTML متفاوتی را تولید و ارسال می کند :

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

تعیین آدرس های جداگانه برای سایت (Seprate URLs) :

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

این روش چندان کاربردی نیست، زیرا نگهداری و به روز رسانی دو نسخه متفاوت از یک وب سایت نیازمند تلاش و هزینه دو برابر خواهد بود. از طرف دیگر، با راهبری همزمان دو نسخه از سایـت، نمی توانید مطمئن شوید بین محتوای هر دو نسخه، تفاوتی وجود نداشته باشد.
از نظر تکنیک SEO، هر یک از URL های متفاوت سایت شما، عملکرد و ارزش مختلف خواهد داشت. از این رو، رنک نسخه desktop سایت هیچگاه به رنک نسخه تحت موبایل اضافه نخواهد شد و گوگل همواره این دو آدرس را به عنوان دو سایـت متفاوت در نظر خواهد گرفت. لذا به هیچ عنوان نگهداری دو آدرس URL متفاوت برای سایـت جهت بهره مندی از مزایای سئو SEO، توصیه نمی شود.

آموزش اطلاع رسانی به موتورهای جستجو در سئو SEO

حتما مطمئن شوید گوگل و سایر موتورهای جستجو، تنظیمات ویژه موبایل شما را می فهمند. از همه مهم تر این که گوگل برای رنک دادن به وب سایت شما، بایستی صفحات آن را به درستی بخواند. این که چگونه می توان گوگل را از تنظیمات ویژه موبایلی مطلع کرد، بستگی به این دارد که از کدام روش برای ایجاد آن استفاده کرده اید. روش طراحی واکنش گرا، لود دینامیکی محتوا و یا روش آدرس های متقاوت (Seprate URLs).
در حالتی که سایت شما دارای طراحی واکنش گرا (Responsive Design) است، الگوریتم های سئو SEO گوگل می توانند به صورت اتوماتیک، از محتوی صفحات اطلاع کسب کنند. هنگامی که از طراحی واکنش گرا استفاده می کنید، حتما مطمئن شوید متاتگ زیر در بخش head صفحه سایت قرار داشته باشد :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

خاصیت viewport تعیین می کند صفحه وب شما، چگونه بر روی یک دستگاه (device) نمایش داده شود. یک سایت با طراحی واکنش گرا (Responsive Design)، سایز صفحات خود را بر حسب سایز دستگاه مشاهده کننده کاربر، تغییر می دهد. با تعیین viewport مناسب، صفحه وب بر روی هر نوع دستگاهی به درستی نمایش داده خواهد شد.
همچنین اگر سایت شما با روش خواندن اتوماتیک از سرور (dynamically served) کار می کند، مطمئن شوید که با استفاده از Vary HTTP Header در بالای صفحات، گوگل از تنظیمات سایت مطلع خواهد شد :

Vary: User-Agent

به وسیله خاصیت Vary Header به موتورهای جستجو اطلاع داده می شود که محتویات سایت بر حسب موبایل یا سیستم های desktop کاربر مشاهده کننده، به صورت جداگانه تولید و ارسال می شود.
Vary هدر در زمانی که محتویات شایت شما با یک سیستم Cache مثل یک CDN یا (Content Delivery Network) تولید و ارائه می شود؛ بسیار مهم بوده و این سیستم ها از این هدر برای تولید محتویات جداگانه برای دستگاه های مختلف استفاده می کنند.
در زمانی که برای سایت تان از آدرس های جداگانه مثل example.com و m.example.com استفاده می کنید، می توانید با استفاده از یک تگ ویژه link با خاصیت rel="alternate" ، در نسخه های desktop و یا موبایل، وضعیت نوع نسخه نمایشی را جهت موتورهای جستجو تعیین نمایید :

Desktop page should have following in its header:
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com" >
Mobile page should have following in its header:
<link rel="canonical" href="http://www.example.com" >

از اشتباه های رایج در SEO سئو جلوگیری کنید

در جهت بهینه سازی سایت خود برای دستگاه های موبایل، دقت کنید اشتباهات رایج زیر را انجام ندهید :
- صفحات کند موبایلی (Slow Mobile Pages) : معمولا سرعت شبکه های موبایلی کمتر از شبکه های اینترنت محلی و ADSL است، بنابراین حجم کم صفحات و سرعت لود آن ها در دستگاه های موبایل را بایستی مورد توجه قرار دهید. این پارامتر یک فاکتور حیاتی در رنکینگ گوگل می باشد. از یک ابزار سئو موبایل برای سنجش سرعت لود صفحات خود استفاده کنید. گوگل چندین ابزار مناسب جهت سئو SEO موبایل در نظر گرفته که از طریق آدرس www.google.com/webmasters/tools/mobile-friendly می توانید به آن ها دسترسی داشته باشید.
- دستورات CSS و جاوا اسکریپت را بلاک نکنید : گوگل توصیه می کند در سایت های ویژه موبایل (mobile-friendly) از دستورات CSS به صورت inline استفاده کرده تا همزمان با خواندن تگ ها، اجرا شوند. بنابراین اگر کدهای CSS چندانی ندارید، سعی نموده آن ها را درون خود تگ قرار دهید. اما اگر از دستورات CSS زیادی در فایل های جداگانه استفاده می کنید، سعی نموده آن ها را در پایین بخش هدر صفحه قرار داده تا مانع دانلود شدن سایر محتویات صفحه نشوند. این قانون در مورد فایل های جاوا اسکریپت نیز صادق است، که می توان آن ها را درون خود صفحه یا پایین صفحات قرار داد. اگر فایل های Script را در بالای صفحات قرار نمی دهید، حتما توجه داشته باشید که خاصیت asyn attribute را همانند کد زیر در تگ <script> قرار داده تا اسکریپت ها همزمان با سایر محتویات خوانده شوند :

<script async type="text/javascript" src="jquery.js"></script>

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

- از plug-in ها و pop-up اجتناب کنید : plug-in هایی مثل Flash و یا Java ممکن است بر روی دستگاه کاربر نصب نباشند. بنابراین همواره دقت داشته باشید محتویات غیر قابل اجرا بر روی صفحات موبایلی سایت قرار نداشته باشد. همچنین از pop-up ها در نسخه موبایلی استفاده نکنید، زیرا کاربر را گیج کرده و باعث می شود سایت را ترک کند.
زمانی که یک صفحه وب جهت موبایل طراحی می کنید، همواره به یاد داشته باشید که کاربر فضای کمی برای کار کردن با سایت در اختیار دارد. بنابراین همواره بایستی تا حد امکان عنوان ها، URLs و meta-description ها و مطالب را خلاصه و مفید کرده و همزمان از کیفیت و ضرورت مطالب نیز کاسته نشود.

معرفی چند ابزار مناسب جهت کار با طراحی موبایل سئو

با استفاده از ابزارهای زیر می توانید بفهمید سایت شما در چه حد برای موبایل مناسب یا mobile-friendly است :

ابزار وب مسترهای گوگل (Google Webmaster Tools) : از ابزارهای موجود در بخش وب مسترهای گوگل و تکنیک های آن می توان برای درک بهتر بایدها و نبایدهای سئو SEO در هنگام طراحی صفحات desktop و همچنین نسخه های موبایلی استفاده کرد.
شبیه ساز موبایل (Mobile Emulator) : از شبیه ساز موبایل می توانید برای مشاهده و نمایش خروجی سایت شما بر روی انواع دستگاه های موبایل استفاده کنید.
ابزار Moz Local : از این ابزار می توانید برای سنجش کیفیت SEO خود در حالت Local استفاده کنید.
ابزار امتحان کردن طراحی وب واکنش گرا (Responsive Web Design Tool) : از این ابزار می توانید برای مشاهده قابلیت های Responsive سایت خودتان بر روی انواع دستگاه ها با سایزهای صفحه نمایش مختلف، استفاده کنید.
ابزار Screaming Fog : از این ابزار نیز می توانید جهت آنالیز سایت خودتان و چک کردن redirect ها استفاده کنید.
ابزار (User Agent Switcher) : این ابزار یک افزونه ویژه مرورگر فایرفاکس است که به وسیله آن می توانید بفهمید کلربرانی که از طریق یک سیستم دیگر سایت شما را مشاهده می کنند، خروجی اش برای شما چطور است.