اگر گوگل محتوای تصاویر را درک می کند، اضافه کردن تگ های alt چه فایده ای دارد؟ آیا بهینه سازی تصاویر سایت قابل استفاده است؟ اصلا. ما در این پست، 12 نکته عملی بهینه سازی تصاویر سایت را برای جذب ترافیک ارگانیک بیشتر ارائه خواهیم کرد. خدمات سئو ایراکد در نظر دارد با ارائه راهکارهایی به سئو سایت های تازه تاسیس که تازه وارد حوزه رقابت شده اند کمک نماید.
12 نکته کلیدی بهینه سازی تصاویر سایت
1. تصاویر خود را به درستی نامگذاری کنید:
نام فایل می تواند سرنخ هایی در مورد موضوع تصویر به گوگل بدهد. برای مثال my-new-black-kitten.jpg بهتر از IMG00023.JPG است.
این مبانی ابتدایی سئو است. اکثر مردم این کار را انجام می دهند. این احتمالاً به این دلیل است که گوگل سال‌ها همین توصیه را ارائه می‌کند.
اما بار دیگر، با توجه به پیشرفت‌های اخیر گوگل در یادگیری ماشینی و توانایی جدید آنها در تشخیص تصاویر، این واقعا چقدر مهم است؟ سؤال خوبی بود.
2. از متن و زیرنویس های جایگزین توصیفی برای بهینه سازی تصاویر سایت استفاده کنید:
متن جایگزین (متن جایگزین) یک تصویر را توصیف می کند. این چیزی است که مرورگر به کاربران دارای صفحه خوان نمایش می دهد. در صورت بروز مشکل در ارائه تصاویر، مرورگرها متن جایگزین را نمایش می دهند. در اینجا کد HTML آمده است:
<img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”/>
این مثال مستقیماً از دستورالعمل‌های رسمی Google آمده است. برای نشان دادن اینکه یک تگ alt به خوبی نوشته شده چگونه به نظر می رسد استفاده می شود. در اینجا توصیه کلی آنها برای نوشتن این موارد است:
گوگل از متن جایگزین همراه با الگوریتم های بینایی کامپیوتر و محتویات صفحه برای درک موضوع تصویر استفاده می کند. هنگام انتخاب متن جایگزین، روی ایجاد محتوای مفید و غنی از اطلاعات تمرکز کنید که از کلمات کلیدی مناسب استفاده می کند و در زمینه محتوای صفحه است. از پر کردن ویژگی‌های alt با کلمات کلیدی (پر کردن کلمات کلیدی) خودداری کنید زیرا منجر به تجربه کاربری منفی میشود و ممکن است باعث شود سایت شما به عنوان اسپم دیده شود.
با این حال، در اینجا میانبری وجود دارد که تقریباً همیشه عالی کار می کند – این جمله را تمام کنید:
“این یک (n) تصویر یا اسکرین شات یا عکس یا طراحی از __________ است.”هر گونه ربط یا اتصال (به عنوان مثال، a/an) را از جمله به دست آمده حذف کنید و از آخرین قسمت به عنوان متن جایگزین خود استفاده کنید. در اینجا چند نمونه هستند:”این عکس یک چیزکیک شکلاتی است.”
<img src=”chocolate-cheesecake.jpg” alt=”Chocolate cheesecake”/>
“این نقاشی از گربه من، مارک، است که با اسباب بازی هایش بازی می کند.”
<img src=”mark-the-cat.jpg” alt=”My cat, Mark, playing with his toys”/>
ممکن است بخواهید هنگام نوشتن متن جایگزین برای تصاویر محصول کمی از این فرمول منحرف شوید. برای این موارد، اضافه کردن محصول یا شماره سریال می تواند مفید باشد، مانند موارد زیر
<img src=”battery-tender.jpg” alt=”Battery tender (022-0186G-DL-WH)”/>
گوگل هیچ دستورالعمل رسمی مبنی بر اینکه شما باید این کار را انجام دهید ندارد. اما منطقی است زیرا گوگل به وضوح روابط بین نام محصول و شماره سریال/محصول را درک می کند.
گوگل تنها بر اساس جستجوی شماره محصول می داند که ما به دنبال چه محصولی هستیم. بنابراین گنجاندن آن در متن جایگزین شما ممکن است به Google کمک کند و در بهینه سازی تصاویر سایت کمک نماید.
نکته: با استفاده از حسابرسی سایت Ahrefs، تمام تصاویر موجود در سایت خود را با متن جایگزین گم شده پیدا کنید.
Site Audit > project > Resources > Images > Missing alt text
زیرنویس ها را فراموش نکنید. اینها هم مهم هستند. در اینجا چیزی است که گوگل می گوید:
گوگل اطلاعات مربوط به موضوع تصویر را از محتوای صفحه استخراج می کند، از جمله زیرنویس ها و عنوان تصاویر. تا جایی که ممکن است، مطمئن شوید که تصاویر در نزدیکی متن مرتبط و در صفحاتی که با موضوع تصویر مرتبط هستند قرار داده شده اند.
دوباره به آن تصویر آخر نگاه کنید تا نمونه ای از شرح تصویر را ببینید. این متن کوچک زیر است که آنچه را نشان می دهد توصیف می کند. من توصیه می کنم تا جایی که ممکن است از آنها استفاده کنید.
3. بهترین نوع فایل را برای بهینه سازی تصاویر سایت انتخاب کنید:
اکثر تصاویر موجود در وب یکی از سه نوع فایل هستند: JPEG، PNG، و GIF. هر کدام از آنها از روش فشرده سازی متفاوتی استفاده می کنند. این بدان معناست که اندازه فایل‌ها بین سه نوع فایل می‌تواند به‌طور چشمگیری متفاوت باشد. این مهم است. دلیل این امر این است: تصاویر اغلب بزرگ‌ترین عامل در اندازه کلی صفحه هستند، که می‌تواند صفحات را کندتر کند.
زمان بارگذاری صفحه برای بهینه سازی تصاویر سایت بسیار مهم است. Google تایید کرد که این یک فاکتور رتبه‌بندی هم در دسک‌تاپ و هم در موبایل است.
وظیفه شما این است که مناسب‌ترین نوع فایل را برای هر تصویر انتخاب کنید—یعنی نوع فایلی که بهترین فشرده‌سازی را با کمترین کاهش کیفیت ارائه می‌دهد. با در نظر گرفتن این موضوع، در اینجا همان تصویر JPEG، PNG و GIF:
می توانید ببینید که تصویر JPEG یک برنده واضح است. این کوچکترین اندازه فایل را دارد و تفاوت کمی بین آن و دو تصویر دیگر در کیفیت تصویر وجود دارد. بنابراین آیا JPEG همیشه انتخاب درستی است؟ اصلا .
به طور کلی، فرمت‌های JPEG بهترین فرمت برای عکس‌ها هستند، در حالی که فرمت‌های PNG برای نقاشی‌های خطی، متن و غیره بهترین فرمت هستند. GIF برای تصاویر متحرک بهترین هستند.
اکثر برنامه های حرفه ای ویرایش تصویر (به عنوان مثال، فتوشاپ) به شما این امکان را می دهند که به صورت JPEG، PNG یا GIF ذخیره کنید. همچنین می توانید از آنها برای تبدیل یک تصویر از یک فرمت فایل به فرمت دیگر استفاده کنید.
برای اسکرین شات ها، در اینجا چند برنامه وجود دارد که به شما امکان می دهد در قالب های مختلف صادر کنید:
- Skitch (مک)
- Monosnap (مک، ویندوز)
- Lightshot (مک، ویندوز)
نکته: همچنین یک فرمت تصویر جدید در صحنه وجود دارد: WebP. این نوید فشرده سازی برتر را برای JPEG و PNG می دهد. با این حال، تصمیم گرفتم فعلاً آن را از مقاله کنار بگذارم زیرا در حال حاضر فقط توسط Chrome و Opera پشتیبانی می شود.
4. اندازه تصاویر خود را مطابق با ابعاد سایت بهینه سازی تصاویر سایت خود تغییر دهید:
توجه داشته باشید که فضای سفید زیادی در دو طرف آن محتوا وجود دارد؟ به این دلیل که حداکثر عرض محتوای وبلاگ 720 پیکسل است. به عبارت دیگر، صرف نظر از اندازه صفحه نمایش شما، تصاویر هرگز بیشتر از 720 پیکسل نمایش داده نمی شوند.
اکنون، هرچه تعداد پیکسل های تصویر شما بیشتر باشد، اندازه فایل بزرگتر خواهد بود. مرورگر اندازه تصاویر را بیشتر از 720 پیکسل تغییر می‌دهد تا روی صفحه نمایش داده شوند (حداقل با وب‌سایت‌های واکنش‌گرا که به خوبی کدگذاری شده‌اند).
اما مهمتر از همه، مرورگر هنوز باید تصویر در اندازه کامل را بارگیری کند. به عبارت دیگر، اگر بخواهیم تصویری با عرض 6000 پیکسل آپلود کنیم، مرورگر همچنان باید کل آن را بارگذاری کند، حتی اگر در 720 پیکسل نمایش داده شود. این کند است. راه حل تغییر اندازه و آپلود تصاویر در حداکثر عرض مورد نیاز است.
توجه داشته باشید که این ممکن است 720 پیکسل نباشد. این بستگی به طراحی کلی وب سایت شما دارد. اولین قدم این است که متوجه شوید. شما می توانید این کار را با عمیق شدن در CSS خود انجام دهید.
مهم
در این مورد مراقب باشید، به خصوص اگر از طراحی واکنش گرا استفاده می کنید. گاهی اوقات ممکن است عرض وب سایت شما در صفحه های کوچکتر بیشتر از صفحه های بزرگتر باشد.
در غیر این صورت، ابزار تمام تصاویر را به یک نوع فایل تصویری ثابت تبدیل می کند. شما می توانید بین JPEG و PNG در خود ابزار انتخاب کنید. از گزینه مناسب برای دسته ای از تصاویری که در حال بهینه سازی هستید استفاده کنید. در اینجا دو دلیل برای عالی بودن این ابزار وجود دارد:
1. تغییر اندازه حداکثر عرض:
فرض کنید که حداکثر عرض وب سایت شما 700 پیکسل است. شما تعداد زیادی عکس دارید که نیاز به تغییر اندازه دارند. برخی از آنها عریض تر از 700 پیکسل و برخی باریک تر از 700 پیکسل هستند. شما نمی خواهید اندازه های باریک تر را به 700 پیکسل تغییر دهید زیرا این کار کیفیت کلی تصویر را کاهش می دهد. این ابزار آن تصاویر را در اندازه ای که هستند نگه می دارد. فقط مواردی را که خیلی پهن هستند تغییر اندازه می دهد.
2. نام فایل ها را دست نخورده نگه می دارد:
شما سال ها را صرف نام گذاری تصاویر خود بهینه سازی تصاویر سایت کرده اید. شما اندازه آنها را تغییر می دهید و نسخه های تغییر یافته را دانلود می کنید. شما .zip را باز می کنید تا image1.png، image2.png را پیدا کنید. (اگر تا به حال تصاویری را از Google Docs دانلود کرده باشید، این ناراحتی را درک خواهید کرد!) این ابزار نام فایل ها را دست نخورده نگه می دارد، بنابراین نیازی به تغییر نام پس از تغییر اندازه نخواهید داشت.
5. حجم فایل تصاویر خود را کاهش دهید:
به این دو تصویر دقت کنید:
هر دوی آنها JPEGS هستند. تفاوت قابل توجهی در کیفیت بین این دو وجود ندارد، اما تصویر اول 58 درصد کوچکتر از تصویر اول است (31 کیلوبایت در مقابل 73 کیلوبایت).
گوگل اسناد گسترده ای در زمینه بهینه سازی تصاویر برای وب دارد.
نکته کلیدی در مورد اندازه فایل این است: برای بهترین نتایج، تنظیمات کیفیت مختلف را برای تصاویر خود آزمایش کنید و از کاهش کیفیت نترسید – نتایج بصری اغلب بسیار خوب هستند و صرفه جویی در اندازه فایل می تواند بسیار زیاد باشد.
گوگل سه ابزار منبع باز را برای کمک به این امر توصیه می کند: Guetzli، MozJPEG (توسط Mozilla)، و pngquant. با این حال، توجه داشته باشید که اینها ابزارهای خط فرمان هستند. اگر با استفاده از چنین ابزارهایی راحت نیستید، توصیه گوگل این است که از ImageOptim استفاده کنید، ابزاری رایگان برای مک. فقط تصاویر خود را رها کنید، و آنها فشرده می شوند.
می توانید سطح فشرده سازی را در تنظیمات تغییر دهید و حتی فشرده سازی با اتلاف را فعال کنید. همچنین داده های EXIF را به طور پیش فرض حذف می کند. این به کاهش بیشتر اندازه فایل کمک می کند – البته نه معمولاً. اگر قصد دارید از ImageOptim استفاده نکنید، می‌توانید از این ابزار رایگان مبتنی بر وب (که به طور رسمی توسط Google توصیه میشود) برای حذف داده‌های EXIF استفاده کنید.
نکته: گوگل اعلام کرده است که داده های EXIF ممکن است یک “عامل رتبه بندی” در تصاویر گوگل باشد.
به همین دلیل، ممکن است چیزی باشد که بخواهید آن را نگه دارید. می توانید حذف داده های EXIF را در تنظیمات ImageOptim خاموش کنید.
حکم ما؟ نکات مثبت احتمالی دست نخورده ماندن داده های EXIF – هنگام انجام سئوی محلی – احتمالاً بیشتر از موارد منفی است.
نتایج حاصل از این ابزار چقدر خوب است؟ تصمیم گرفتم یک آزمایش کوچک انجام دهم. من یک نمونه کوچک از 15 عکس گرفتم – برخی JPEG، برخی PNG. من همه آنها را در این ابزار در تنظیمات پیش فرض انداختم. من همین کار را برای چند گزینه دیگر انجام دادم.
Imageoptim (ابزار پیشنهادی گوگل) تا حد زیادی برای JPEG بهترین بود. اما یکی از بدترین ها برای PNG ها بود. با این حال، شایان ذکر است که یک نکته مهم است – ImageOptim به طور پیش‌فرض کیفیت PNG را 70 درصد می‌کند. می توانید تا 40 درصد پایین بیایید.
این کار را انجام دهید و میانگین فشرده سازی برای PNG ها به 75.6 درصد افزایش می یابد. این باعث می شود که برنده کلی JPG و PNG تا حد زیادی باشد. با این حال، اگر به نتایج تنظیمات پیش‌فرض بالا پایبند باشیم، به نظر می‌رسد که Shortpixel بهترین کمپرسور تصویر همه جانبه است. این به خصوص برای کاربران وردپرس خبر خوبی است زیرا یک افزونه وردپرس ShortPixel وجود دارد.
تا 100 عکس در ماه رایگان است. علاوه بر این، به شما این امکان را می دهد که تمام تصاویری را که قبلاً در سایت وردپرس خود دارید فشرده کنید. شما نمی توانید این کار را با سایر ابزارهای موجود در لیست انجام دهید.
نکته: می توانید تصاویری را در سایت خود بیابید که ممکن است از فشرده سازی با ابزار حسابرسی سایت Ahrefs بهره مند شوند.
Site Audit > project > Resources > Images
برای مطالعه مقالات بیشتر از سایت ایراکد در زمینه شبکه های اجتماعی می توانید روی لینک زیر کلیک کنید.
6. یک نقشه سایت تصویری ایجاد کنید:
در اینجا آنچه گوگل در مورد نقشه سایت تصویر می گوید:
تصاویر منبع مهمی از اطلاعات در مورد محتوای سایت شما هستند. می‌توانید جزئیات بیشتری درباره تصاویر خود به Google بدهید و URL تصاویری را که در غیر این صورت با افزودن اطلاعات به نقشه سایت تصویر کشف نمی‌کنیم، ارائه کنید.
اینها برچسب هایی هستند که می توانید در نقشه های سایت تصویر استفاده کنید:
اگر از WordPress و Yoast SEO استفاده می کنید، تصاویر به صورت خودکار به نقشه سایت شما اضافه می شوند. این حتی برای سایت هایی که صفحات “رسانه” روی noindex تنظیم شده اند نیز صادق است. (توجه: اکنون این تنظیمات پیش فرض در آخرین نسخه Yoast است.) با این حال، Yoast فقط شامل تگ های <image:image> و <image:loc> مورد نیاز است.
اگر در وردپرس به تصاویر خود زیرنویس اضافه می کنید، Yoast اینها را اضافه نمی کند. باید خودتان آن ها را به صورت دستی وارد کنید.
نکته جالب
اسناد گوگل برای نقشه های سایت تصویری نسبتاً کم است. هیچ کجا سینتکس مورد نظر را برای تگ <image:geo_location> مشخص نمی کنند. مشخص نیست که آیا تصویری از شفیلد، انگلستان باید به عنوان برچسب گذاری شود:
<image:geo_location>Sheffield, England</image:geo_location>
<image:geo_location>Sheffield, United Kingdom</image:geo_location>
همین امر در مورد <image:licence> نیز صادق است. آیا گوگل امیدوار است که به این صفحات مجوز رسمی Creative Commons پیوند دهید؟ یا ترجیح می دهند به یک صفحه مجوز در سایت خود پیوند دهید؟ حدس شما به خوبی حدس ما است.
گوگل همچنین بیان می کند که:نقشه های سایت تصویر می توانند حاوی URL هایی از سایر دامنه ها باشند، برخلاف نقشه های سایت معمولی که محدودیت های بین دامنه ای را اعمال می کنند.
این به مدیران وب اجازه می دهد تا از CDN (شبکه های تحویل محتوا) برای میزبانی تصاویر استفاده کنند. ما شما را تشویق می‌کنیم که نام دامنه CDN را در کنسول جستجو تأیید کنید تا بتوانیم هر گونه خطای خزیدن را که ممکن است پیدا کنیم به شما اطلاع دهیم.
