به مقاله ی این هفته ی لایوگالری خوش آمدید!
امروز تصمیم داریم شما را با یکی دیگر از عوامل مهم و موثر در جذب ترافیک بالا و طبیعی در سایت یعنی "سئو تصاویر" آشنا کنیم. همانطور که می دانید یکی از راههای بهبود رتبه ی سایت در موتور جستجوی گوگل افزایش ترافیک طبیعی به سایت است. در این مقاله به کمک منبع معروف و معتبر Ahref به شما خواهیم گفت که چگونه سئو تصاویر خود را بهینه انجام دهید. با ما باشید....
همه ی ما می دانیم که یکی از راه های سئو کردن تصاویر استفاده از تگ alt برای آنها می باشد. اما آیا فقط همین مورد اهمیت دارد؟ قدم بعدی چیست؟
بد نیست بدانید که برخی افراد استفاده از این تگ را به دلیل بهره گیری گوگل از الگوریتم های جدید یادگیری ماشین (machine learning) منسوخ شده می دانند. بگذارید سخن خود را با یک مثال برای شما شرح دهیم، به تصویر زیر نگاه کنید، زمانی که شما تصویری مشابه این تصویر را درGoogle’s Cloud Vision API وارد می کنید، ابزارهای یادگیری ماشین مشخصاتی مشابه مشخصات درج شده در کنار تصویر را به طور اتومات برای آن در نظر می گیرند!!
همان طور که می بینید گوگل می تواند به شما بگوید که این یک تصویر از گربه است و حتی سایر خصوصیات آن را هم برای شما شرح دهد ( تمام اطلاعات متا (metadata) این تصویر در زمان آپلود حذف شده است! حتی همان طور که در تصویر بالا مشخص است نام تصویر نیز (IMG_0696_2.jpg) هیچ ارتباطی با محتوای آن ندارد).
سوال اینجاست:
چرا استفاده از تگ alt در درک بهتر محتوای تصویر توسط گوگل اهمیت دارد؟ آیا بطور کلی سئو تصاویر دیگر منسوخ شده است و اهمیتی ندارد؟ پاسخ این است، سئو تصاویر همچنان از اهمیت بسیار بالایی برخوردار است!
در زیر 12 نکته ی بسیار مهم در جذب ترافیک ارگانیک در سایت و از طریق سئو تصاویر را برای شما آورده ایم، سعی کرده ایم در اثبات هرکدام عبارتی از خود سایت گوگل نیز بیاوریم:
1- تصاویر را به دقت و به درستی نام گذاری کنید!
آنچه گوگل در این رابطه می گوید:
نام فایل می تواند به موتور جستجوی گوگل سرنخ های لازم را در جهت شناسایی موضوع تصویر ارائه دهد.به عنوان مثال نام my-new-black-kitten.jpg بسیار پر اهمیت تر و بهتر از IMG00023.JPG می باشد.
این عبارت در سال 2013 مطرح شده است اما همچنان گوگل بر اهمیت این مورد اشاره می کند، اما چرا با وجود الگوریتم های یادگیری ماشین فوق العاده ی گوگل که در بالا مطرح شد هنوز نیاز به انجام چنین کاری است؟ به تصویر زیر نگاه کنید:
در رابطه با این تصویر گوگل 91 درصد اطمینان دارد که محتوای آن پنیر است، در صورتی که اشتباه می کند و این یک تصویر از کره است! متوجه شدید که چرا نام گذاری اهمیت دارید؟
شما باید بدانید که گوگل یک ابزار بی عیب نیست و شما خود بایستی تمام سعی تان را انجام دهید تا این ابزار بتواند محتویات تصویر شما را تشخیص دهد.
توجه: این به معنای آن نیست که شما در نام گذاری اسامی تصاویر از تکنیک keyword stuffing استفاده کنید. نام فایل بایستی ساده و در عین حال توصیفی باشد.
مثال خوب: dog.jpg
مثال بد: dog-puppy-pup-pups-puppies.jpg
باور کنید تغییر نام تصویر چند ثانیه بیشتر زمان نمی برد، اما ارزش اش را دارد!
2- استفاده از متن های توصیفی در نگارش کپشن ها و alt
همان طور که می دانید متن alt محتوای یک تصویر را شرح می دهد، در واقع متنی است که browser در هنگامی که از نمایش تصویر پشتیبانی نمی کند و یا کاربر محتوای مورد نظر خود را در حالت screen reader مطالعه می کند، نمایش می دهد. در زیر یک نمونه سینتکس HTML که خود Google’s official guidelines آن را مطرح کرده و به عنوان مثالی بهینه از نگارش متن تگ alt آن را عنوان کرده است برای شما آورده شده:
متن گزارش گوگل:
موتور جستجوی گوگل از تگ های alt در کنار الگوریتم های بینایی ماشین و محتوای صفحه ی مورد نظر استفاده می کند تا بتواند موضوع یک تصویر را تشخیص دهد. در هنگام انتخاب متن تگ alt دقت کنید که متنی که انتخاب می کنید کاربردی و در عین حال حاوی توضیح کامل و مفیدی از تصویر باشد، به گونه ای که در این توضیحات کلمات کلیدی شما به درستی بکار گرفته شده باشد. توجه کنید، منظور از این عبارت استفاده از تکنیک (keyword stuffing) نیست و در صورت استفاده از این روش و بازخورد منفی از سمت کاربران ممکن است سایت شما اسپم شود.
آقای matt cut توصیه های بسیار خوبی را در این رابطه مطرح می کند که در ویدئو زیر آورده شده است:
در اینجا یک الگوی مناسب برای شما آورده شده است که می توانید از آن در تگ های alt خود استفاده نمایید:
“This is a(n) image/screenshot/photograph/drawing of __________.”
متن خود را در عبارت بالا بنویسید و هرگونه کلمه ی ربط و یا حرف اضافه ای را از آن حذف کنید و در نهایت متن ویرایش شده را در تگ alt قرار دهید. مثال:
“This is a photograph of a chocolate cheesecake“
“This is a drawing of my cat, Mark, playing with his toys“
همچنین، چنانچه تمایل داشتید که برای تصاویر محصولات خود تگ alt قرار دهید، سعی کنید حتما در این تگ شماره ی سریال و یا شماره ی محصول را نیز قرار دهید.
لازم به ذکر است که گوگل هیچ گونه سندی در رابطه با این موضوع ارائه نکرده است اما فهمیدن این اصل کار دشواری نیست. به تصویر زیر نگاه کنید:
از این تصویر چنان برداشت می شود که گوگل بر اساس شماره سریال یک محصول می تواند متوجه شود که شما به دنبال چه محصولی هستید. بعلاوه، استفاده از شماره سریال سبب می شود تا گوگل متوجه شود که این تصویر متعلق به یک محصول است.
بعلاوه، استفاده از کپشن ها نیز اهمیت و جایگاه ویژه ای دارد. گوگل در این رابطه می گوید:
سعی کنید برای تصاویر خود عناوین و کپشن های مناسبی انتخاب نمایید و تصاویر را در محلی قرار دهید که متن مرتبط با آن وجود دارد.
3- مناسب ترین نوع فایل را انتخاب کنید
همان طور که می دانید بیشتر تصاویر موجود در وب به سه فرمت JPEG، PNG و GIFهستند. هرکدام از این فرمت ها از یک روش فشرده سازی منحصر به فرد استفاده می کنند و همین موضوع سبب می شود تا سایز آنها متفاوت شود. موضوع سایز، موضوع بسیار مهمی است و دلیل آن این است که:
تصاویر عمدتا بیشترین تاثیر را در حجم یک صفحه از سایت دارند و می توانند سبب شوند تا سرعت بارگذاری یک صفحه افزایش یابد.
یکی از عوامل بسیار مهم و موثر در سئو، زمان بارگذاری یک صفحه است و گوگل خود نیز تایید کرده است که چه در حالت دسکتاپ و چه در حالت موبایل این موضوع در رتبه بندی سایت اهمیت دارد. به همین دلیل شما بایستی مناسب ترین نوع تصویر را انتخاب کنید. به شکل زیر توجه کنید:
همان طور که می بینید، تصویر با فرمت JPEG با اختلاف زیادی بهتر از دو مورد دیگر است زیرا حجم بسیار کمتری دارد و تفاوت قابل توجهی نیز در کیفیت تصاویر وجود ندارد.
توجه:
بطور کلی می توان گفت فرمت JPEG بهترین فرمت برای تصاویر، فرمت PNG بهترین نوع برای نمودارها، متن و موارد این چنینی و نیز GIF مناسب ترین فرمت جهت تصاویر متحرک می باشد.
تغییر فرمت:
برای انجام این کار شما می توانید از نرم افزارهای مختلفی نظیر فتوشاپ و یا ابزارهای رایگان موجود در اینترنت نظیر این ابزار استفاده نمایید.
همچنین در زیر سه ابزار جهت تغییر فرمت اسکرین شات ها برای شما آورده شده است:
4- تغییر سایز تصاویر در راستای عرض صفحه
قبل از هرچیز لازم است بدانید که هرچقدر اندازه ی تصویر شما بزرگ باشد، باز هم در نهایت چیزی که به کاربر نمایش داده می شود بیش از اندازه ی محتوای در نظر گرفته شده در سایت نیست. به عنوان مثال در تصویر زیر حتی اگر عرض تصویر 6000 پیکسل نیز باشد بازهم عرض تصویر نهایتا 700 پیکسل خواهد بود زیرا عرض تعریف شده برای محتوا 700 پیکسل می باشد. پس لازم است شما در ابتدا عرض محتوای مورد نظر خود را بدانید.
بعلاوه، می دانید که هرچه سایز یک تصویر بزرگ تر باشد حجم تصویر نیز بزرگ تر است. یک ابزار بسیار خوب برای تغییر سایز تصاویر smartresize می باشد.
شما می توانید از این ابزار در جهت تغییر سایز گروهی تصاویر خود استفاده نمایید. روش کار با این ابزار بسیار آسان است. برروی دکمه ی Upload Multi Images کلیک کنید و تصاویر خود را آپلود نمایید، پس از این برروی دکمه ی max width کلیک کنید و حداکثر سایز مورد نظر خود را وارد نمایید.
5- سایز تصاویر را کاهش دهید
دو تصویر زیر را تماشا کنید:
فرمت هردو تصویر JPEG است. تفاوت بسیار اندکی میان کیفیت این دو وجود دارد اما حجم تصویر اول 58 درصد کمتر از تصویر دوم است. گوگل اسناد معتبر زیادی دارد که نشان از اهمیت این موتور جستجو به بهینه سازی حجم تصاویر دارد:
برای رسیدن به بهترین نتیجه، تنظیمات مختلفی را برای تصاویر خود در نظر بگیرید و از افت کیفیت تصاویر هراسی نداشته باشید – به طور کلی می توان گفت کیفیت آنچه که شما مشاهده می کنید با کاهش سایز تصاویر کاهش چشمگیری نخواهد داشت.
گوگل سه منبع رایگان و open source زیر را برای کاهش حجم سایز تصاویر پیشنهاد می دهد:
Guetzli, MozJPEG (by Mozilla), and pngquant
برای آشنایی با ابزارهای نام برده شده می توانید به این راهنما مراجعه نمایید.
اگر استفاده از این ابزارها برای شما آسان نیست، پیشنهاد گوگل به شما استفاده از ابزار ImageOptim می باشد (توجه نمایید: این ابزار یک ابزار رایگان برای مک می باشد؛ شما می توانید ابزارهای دیگری را برای سیستم عامل های ویندوز و لینوکس از این لینک دریافت نمایید).
برای استفاده از ابزار ImageOptim تنها کاری که لازم است انجام دهید آن است که تصویر خود را در محل مشخص وارد کنید، این ابزار بطور اتومات آن را برای شما فشرده خواهد کرد.
همچنین، شما می توانید درجه ی فشرده سازی تصاویر را در تنظیمات تغییر دهید و حتی فشرده سازی اندکی انجام دهید.
6- سایت مپ برای تصاویر ایجاد کنید
متن زیر متنی است که گوگل در رابطه با سایت مپ تصاویر ارائه داده است:
تصاویر بخش های مهم و حائز اهمیت محتوای درون سایت شما هستند. شما می توانید با افزودن تگ های به سایت مپ تصاویر خود اطلاعات بیشتری را در خصوص این تصاویر به گوگل ارسال کنید.
در تصویر زیر تگ هایی که می توانید به سایت مپ تصاویر خود اضافه نمایید، نمایش داده شده است:
7- استفاده از تصاویر برداری در جایی که مناسب است
در اینجا متنی را که گوگل در این خصوص منتشر کرده می خوانیم:
در تصاویر برداری از خطوط، نقاط و چند ضلعی ها استفاده می شود، اینگونه تصاویر می توانند گزینه ی بسیار مناسبی برای نمایش تصاویری باشند که از اشکال هندسی تشکیل شده اند (نظیر: ایکن ها، لوگوها و متن ها)، زیرا تصاویر برداری در هر رزولوشن و درجه ی بزرگنمایی به خوبی نمایش داده می شوند.
به یاد داشته باشید، این فرمت از تصاویر ایده آل ترین فرمت در صفحه نمایش هایی با رزولوشن بالا می باشد. بطور حتم SVG مشهورترین فرمت تصاویر برداری است و تقریبا توسط تمام مرورگرهای مدرن پشتیبانی می شود.
توصیه های گوگل در استفاده از فرمت SVG:
1- حجم تصاویر SVG بایستی کاهش یابد (ابزار پیشنهادی گوگل برای این کار: svgo).
2- تصاویر SVG بایستی به روش GZIP فشرده شوند.
8- تصاویر خود را ریسپانسیو (واکنش گرا) کنید
فرض کنید تصویری را به سایت خود اضافه نموده اید که عرض آن 720 پیکسل است این تصویر در سایت به درستی نمایش داده می شود اما زمانی که با یک دستگاه با عرض 320 پیکسل وارد سایت می شوید، این تصویر به درستی نمایش داده نمی شود ضمن آنکه در این رزولوشن نیز تصویر 720 پیکسلی نمایش داده می شود که باعث افزایش مدت زمان لود صفحه می شود.
روش های زیادی برای ریسپانسیو نمودن تصاویر وجود دارد، یکی از این روش ها استفاده از ویژگی srcset در تگ img می باشد، یک نمونه از این مورد در زیر برای شما آورده شده است:
برای اطلاعات بیشتر نیز می توانید به این راهنما مراجعه نمایید.
9- از schema markup ها استفاده کنید (برای دستورالعمل غذاها، محصولات و ویدئوها)
بطور حتم شما نیز schema markup ها را در نتایج جستجوی گوگل مشاهده نموده اید، یک نمونه از آنها در تصویر زیر آورده شده است:
اما آیا می دانستید که این موارد می توانند در سئو تصاویر شما تاثیر گذار باشند؟
این مورد به دلیل آن است که گوگل نشان ها را درتصاویر thumbnail یا بند انگشتی در نتایج جستجوی تصاویر در تلفن های موبایل اضافه می کند، مانند تصویر زیر:
در این رابطه خود گوگل این چنین می گوید:
اگر شما نیز در صفحات سایت خود از تصاویر استفاده می کنید باید بدانید که می توانید با استفاده از داده های ساختار یافته (structured data) در صفحات تان نوع محتوایی را که این تصویر در آن منتشر شده است، مشخص کنید و به کاربرانتان نمایش دهید. این مورد به کاربران کمک می کند تا محتوای مرتبط با جستجوی خود را سریع تر بیابند و ترافیک هدفمند بیشتری به سمت سایت شما روانه شود.
در حال حاضر گوگل از 4 نوع markup پشتیبانی می کند و این نشان ها را در تصاویر نمایش می دهد: محصول، دستورالعمل، ویدئو و گیف.
برای اضافه کردن این نشان ها به تصاویر می توانید از راهنماهای زیر استفاده کنید:
راهنمای ایجاد schema markup در محصولات
راهنمای ایجاد schema markup در دستورالعمل ها
راهنمای ایجاد schema markup در ویدئو
توجه:
فرمت GIF نیازی به markup اضافه تری ندارد و گوگل بطور پیش فرض فرمت اینگونه تصاویر را تشخیص می دهد.
10- از تکنیک lazy-loading در نمایش تصاویر استفاده کنید
در این تکنیک تصاویر (و یا هر نوع آبجکت دیگر نظیر ویدئو و ...) تا زمانی که نیاز نباشد لود یا بارگذاری نمی گردند؛ بدین معنا که این ابجکت ها تنها زمانی نمایش داده می شوند که صفحه اسکرول شود و به محل قرارگیری آنها برسد.
گوگل در این رابطه می گوید:
تکنیک lazy loading بدلیل لود تصاویر تنها در زمان نیاز، می تواند سرعت بارگذاری صفحات طولانی که شامل تصاویر زیادی هستند را به شدت افزایش دهد.
به منظور استفاده از این تکنیک روش های مختلفی پیشنهاد شده است که البته تمامی آنها مبتنی بر زبان جاوا اسکریپت می باشند. برای راهنمایی بیشتر می توانید به این راهنما مراجعه نمایید.
11- Leverage browser caching
Browser caching یا حافظه ی نهان جایی است در مرورگر کامپیوتر کاربر که در آن تصاویر (و سایر فایل ها) ذخیره می شوند و نتیجه ی آن این خواهد بود که اگر آن فرد بار دیگر به سایت شما مراجعه کند نمایش سایت شما سریع تر خواهد بود. در واقع، با ورود مجدد کاربر به سایت شما، مرورگر کاربر نیازی به دانلود مجدد فایل های دانلود شده ی قبلی نخواهد داشت.
گوگل در این رابطه می گوید:
HTTP caching می تواند سرعت لود صفحات را در بازدیدهای تکراری افزایش دهد.
برای افزودن این ویژگی به سایت خود شما بایستی کد زیر را در فایل .htaccess وارد نمایید:
12- از CDN استفاده کنید:
اکثر وب سایت ها تمامی فایل های خود را (نظیر تصاویر) از یک سرور واحد که در یک مکان مشخص قرار دارد، دریافت می کنند. تصور کنید که سرور سایت شما در انگلیس قرار دارد، زمانی که فردی در این کشور قصد بازدید از سایت شما را دارد نیازی نیست که فایل ها مسیر طولانی را طی کنند تا بدست مرورگر آن فرد برسند و در صفحه نمایش کاربر نمایش داده شوند اما حالتی را در نظر بگیرید که کاربری که در امریکا زندگی می کند به سایت شما سر بزند، در این صورت وضعیت خیلی فرق می کند و فایل های سایت شما بایستی راه طولانی را طی کنند تا بدست کاربر نهایی برسند که این به معنای سرعت لود کمتر خواهد بود.
استفاده از CDN ها یا شبکه های مبتنی بر محتوا می تواند این معضل را حل کند؛ در این شبکه ها تمامی سرورهای موجود در آنها فایل های سایت شما را ذخیره (cache) می کنند، هرزمان کاربری درخواستی به سایت شما ارسال کند آن درخواست به نزدیک ترین سرور به آن کاربر ارسال می شود و پاسخ به کاربر نمایش داده می شود، نتیجه ی این عمل سرعت لود بسیار بالاتر در نمایش صفحات سایت خواهد بود. در زیر عملکرد یک نمونه از این شبکه ها با نام Cloud Flare نمایش داده شده است:
بطور کلی شبکه های CDN زیادی وجود دارند که شما می توانید از آنها استفاده کنید، در زیر تعدادی از آنها نام برده شده اند:
- Cloudflare (free tier available);
- KeyCDN;
- Amazon CloudFront (free tier available);
- Google Cloud CDN (free trial available)
سخن آخر:
سئو تصاویر بحث بسیار مهم و جدی است. اسناد منتشر شده ی گوگل در این خصوص بطور تقریبی 15 هزار کلمه می باشند؛ در نتیجه بطور حتم تمام موارد در این مقاله مورد بحث قرار نگرفته است و از حوصله ی این مقاله خارج بوده است و تنها به مهم ترین آنها نگاهی اجمالی شده است.
منبع: https://ahrefs.com