نکات بهینه سازی تصاویر و جذب کاربر ارگانیک به سایت

حال می توانید نکات بهینه سازی تصاویر را مطالعه کرده و به کار ببرید تا ترافیک ارگانیک بیشتری را به وبسایت خود جذب نمایید:

7. در صورت لزوم از گرافیک برداری برای نکات بهینه سازی تصاویر استفاده کنید:

در اینجا آنچه گوگل در مورد گرافیک برداری می گوید:
گرافیک برداری از خطوط، نقاط و چندضلعی ها برای نمایش یک تصویر استفاده می کند. [آنها] برای تصاویری که از اشکال هندسی ساده (مثلاً آرم، متن، نمادها و غیره) تشکیل شده اند، ایده آل هستند و نتایج واضحی را در هر رزولوشن و تنظیم زوم ارائه می دهند، که آنها را به فرمتی ایده آل برای وضوح بالا تبدیل می کند. صفحه نمایش ها و دارایی هایی که باید در اندازه های مختلف نمایش داده شوند.

بسیاری از سایت ها از گرافیک برداری برای لوگو و سایر عناصر ساده در سایت استفاده می کنند.
SVG (گرافیک برداری مقیاس پذیر) شاید محبوب ترین فرمت برداری در وب باشد. کنسرسیوم وب جهانی (W3C) آنها را توسعه داده و بر اساس XML هستند. به این ترتیب، تمام مرورگرهای وب مدرن از آنها پشتیبانی می کنند.مهم نیست چه مرورگر، دستگاه یا وضوح صفحه‌ای که دارید، SVGها شفاف به نظر می‌رسند زیرا پیکسلی ندارند. شما می‌توانید یک SVG را روی صفحه‌ای به اندازه یک سیاره نمایش دهید – این یک اونس کیفیت را از دست نمی‌دهد.نکته: آیا می خواهید بدانید که چگونه SVG ایجاد کنید؟ این را بخوان. همچنین می‌توانید با استفاده از اکثر برنامه‌های طراحی گرافیک مدرن مانند Adobe Illustrator، تصاویر را به‌صورت SVG صادر کنید.در اینجا پیشنهادات گوگل برای بهینه سازی SVG آمده است:

فایل های SVG باید کوچک شوند تا اندازه آنها کاهش یابد
فایل های SVG باید با GZIP فشرده شوند.

ابزار پیشنهادی آنها برای کوچک کردن فایل های SVG svgo است.

با استفاده از command-line interface راحت نیستید؟ از این برنامه وب یا این برنامه مک برای انجام همین کار استفاده کنید. هر دو یک رابط کشیدن و رها کردن ساده برای کوچک کردن چنین فایل هایی ارائه می دهند. من برنامه وب را ترجیح می دهم. شرکت سئو با بهینه سازی تصاویر باعث جذب ارگانیک به وبسایت شما شده تا در سئو و بهینه سازی وبسایت کمک نماید.

این اسکرین شات همه چیزهایی را که باید در مورد SVG بدانید خلاصه می کند. می بینید که اندازه اصلی SVG 8.54 کیلوبایت بود. این دیوانه کننده کوچک است. نسخه کوچک شده (و gzipped) حتی کوچکتر است و فقط 3.56 کیلوبایت دارد – 41.67٪ صرفه جویی.فشرده سازی Gzip چیزی است که در سطح سرور فعال می شود. به عبارت دیگر، SVG فوق فقط از 3.56 کیلوبایت پهنای باند استفاده می کند اگر سرور اجازه دهد – در غیر این صورت، از 8.54 کیلوبایت استفاده خواهد کرد.

8. تصاویر واکنشگرا را برای نکات بهینه سازی تصاویر ارائه دهید:

بیایید بگوییم که شما یک تصویر با عرض 720 پیکسل در سایت خود آپلود می کنید.

اگر شخصی با یک دستگاه تلفن همراه با صفحه نمایش بسیار کوچکتر، مثلاً عرض 320 پیکسل، بازدید کند، مرورگر او همچنان باید تصویر 720 پیکسلی را بارگیری کند. آن تصویر کاملاً خوب به نظر می رسد. اما یک تصویر با عرض 320 پیکسل نیز همینطور است.ایا مشکل را متوجه شدید؟

بارگذاری تصویر 720 پیکسلی اتلاف پهنای باند است و تنها به کاهش سرعت بارگیری صفحه کمک می کند. این برای سئو خوب نیست. راه حل استفاده از srcset است.این یک قطعه جادویی از کد HTML است که به مرورگر می‌گوید نسخه‌های مختلف یک تصویر را برای وضوح‌های مختلف صفحه بارگیری کند.در اینجا نحو، به دنبال توضیح است:

بخش اول نحو یک تگ بسیار استاندارد <img> است. سپس پیوندهایی را به دو نسخه دیگر از همان تصویر در اندازه های مختلف اضافه می کنیم – متوسط (عرض 1000 پیکسل) و بزرگ (عرض 2000 پیکسل).

فرض کنید روی دستگاهی با عرض صفحه 320 پیکسل و صفحه نمایش 1x (غیر شبکیه) هستید. تصاویری که در اختیار دارید عبارتند از small.jpg (عرض 500 پیکسل)، medium.jpg (عرض 1000 پیکسل) و large.jpg (عرض 2000 پیکسل).

مرورگر می گوید:

خب، بنابراین از آنجایی که من یک نمایشگر 1x هستم، 1.5625 نزدیکترین چیزی است که من نیاز دارم. کمی بالاست، اما در مقایسه با سایر گزینه‌هایی که خیلی بالا هستند، بهترین گزینه است.

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

خب، بنابراین از آنجایی که من یک صفحه نمایش 2x هستم، می خواهم آن تصویر 1.5625 را بیرون بیاورم زیرا برای من خیلی کم است و ممکن است بد به نظر برسد. من از تصویر 3.125 استفاده خواهم کرد.

مرورگر اساساً کارآمدترین تصویر را برای ارسال به بازدیدکننده انتخاب می کند، بنابراین پهنای باند را کاهش می دهد و زمان بارگذاری را بهبود می بخشد. کامل. اما آیا این بدان معناست که شما باید اندازه های مختلف بسیاری از تصاویر خود را آپلود کنید؟ لازم نیست.

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

تصویر کوچک: یک برش مربع (150 پیکسل در 150 پیکسل)
متوسط: اندازه آن طوری تغییر می کند که طولانی ترین ضلع 300 پیکسل عرض یا بلند باشد
متوسط بزرگ. تغییر اندازه به 768 پیکسل عرض
Large: اندازه آن طوری تغییر می کند که طولانی ترین ضلع 1024 پیکسل عرض یا ارتفاع داشته باشد
کامل: تصویر اصلی.

علاوه بر این، وردپرس همچنین srcset را به صورت خودکار اضافه می کند.
در اینجا به نظر می رسد که برای وبلاگ ما (که در وردپرس اجرا می شود):

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

توجه داشته باشید که اگر می‌خواهید نمایشگرهای شبکیه را بهینه کنید، می‌توانید از نحو @2x استفاده کنید. این افزونه وردپرس نیز وجود دارد که تقریباً از چنین نمایشگرهایی پشتیبانی می کند. با این اوصاف، مگر اینکه با فشرده سازی تصویر (یعنی چیزی کمتر از 40٪) برای JPEG دیوانه شوید، احتمالاً متوجه خواهید شد که تصاویر «معمول» شما به خوبی در نمایشگرهای شبکیه بزرگ می شوند. به هر حال این تجربه من است.

9. از نشانه گذاری طرحواره (برای دستور العمل ها، محصولات و ویدیوها) استفاده کنید:

نشانه گذاری طرحواره یکی از نکات بهینه سازی تصاویر است که احتمالاً چیزی است که در زمینه جستجوی وب Google با آن بیشتر آشنا هستید. در نتایج جستجوی معمولی چیزی شبیه به این به نظر می رسد:

اما آیا می دانستید که نشانه گذاری طرحواره ممکن است برای سئوی تصویر نیز مرتبط باشد؟

این به این دلیل است که Google نشان‌های مربوطه را روی تصاویر کوچک در نتایج جستجوی تصاویر تلفن همراه نشان می‌دهد. در اینجا ظاهر آنها به شرح زیر است:

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

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

نشانه گذاری دستور غذا را به صفحات دستور غذا اضافه کنید
علامت گذاری محصول را به صفحات محصول اضافه کنید
اضافه کردن نشانه گذاری ویدئو به صفحات دارای ویدئو

توجه داشته باشید که GIF ها نیازی به نشانه گذاری اضافی ندارند—Google از قبل می داند که GIF هستند. البته، تا زمانی که هیچ یک از این نوع محتوا را در وب سایت خود نداشته باشید، لازم نیست نگران نشانه گذاری طرحواره باشید. به احتمال زیاد گوگل از نشان‌ها برای این چهار نوع محتوا پشتیبانی می‌کند، زیرا آنها متوجه شده‌اند که کاربرانشان اغلب به دنبال چنین محتوایی در Google Images هستند.

10. بارگذاری کند و کم سرعت را در نظر بگیرید:

بارگذاری کند زمانی است که مرورگر بارگیری تصاویر (یا هر شیء دیگر – ویدئو و غیره) را تا زمانی که نیاز به نمایش بر روی صفحه نمایش داشته باشد به تعویق می اندازد. تصاویر دیگر همانطور که نیاز به بارگیری دارند بارگیری می شوند – به عنوان مثال، همانطور که شما پیمایش می کنید.

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

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

این یک توصیه از ابزار Google PageSpeed Insights است. گوگل در اینجا نحوه پیاده سازی بارگذاری کند را توضیح می دهد (به نحوی که تضمین می کند می توانند محتوای بارگذاری شده تنبل را ببینند—بسیار مهم!). چند روش مختلف وجود دارد، اما همه آنها شامل جاوا اسکریپت هستند.

11. حافظه پنهان مرورگر یکی از نکات بهینه سازی تصاویر، استفاده کنید:

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

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

بنابراین هنگامی که دوباره این صفحه – یا صفحه مشابه را مشاهده می کنید – نیازی به بارگیری مجدد همه آنها نیست. بسیاری از آنها در حال حاضر در رایانه شما هستند و بنابراین، بسیار سریعتر بارگیری می شوند.

در اینجا آنچه گوگل در مورد کش مرورگر می گوید:کش HTTP می تواند زمان بارگذاری صفحه شما را در بازدیدهای مکرر افزایش دهد.هنگامی که یک مرورگر منبعی را درخواست می کند، سروری که منبع را ارائه می دهد می تواند به مرورگر بگوید که چه مدت باید به طور موقت منبع را ذخیره یا “کش” کند. برای هر درخواست بعدی برای آن منبع، مرورگر به جای رفتن به شبکه برای دریافت آن، از نسخه محلی آن استفاده می کند.

اگر وب‌سایت شما می‌تواند از کش مرورگر سود ببرد، حتی ممکن است این هشدار را در Google PageSpeed Insights ببینید:

بنابراین چگونه می‌توانید کش مرورگر را برای تصاویر خود فعال کنید؟

در وردپرس، این بسیار ساده است. فقط یک افزونه مانند W3 Total Cache را نصب کنید. این کار کش مرورگر را به طور پیش فرض فعال می کند و تغییرات مورد نیاز را به فایل htaccess. شما اضافه می کند. برای کاربران غیر وردپرس، باید این کد را به صورت دستی به فایل htaccess. خود اضافه کنید:

<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
</IfModule>

می‌توانید قسمت «۱ سال» را به «۱ ماه»، «۱ هفته»، «۱ روز»، «۱ ساعت» و غیره تغییر دهید. اینها همچنین مقادیری هستند که W3 Total Cache به طور پیش فرض استفاده می کند.

یادداشت مهم: قبل از اجرا بررسی کنید که این کد با سرور شما سازگار است. فایل‌های htaccess گاهی اوقات می‌توانند دردسرساز شوند.

برای مطالعه مقالات بیشتر از سایت ایراکد در زمینه شبکه های اجتماعی می توانید روی لینک زیر کلیک کنید.

بهینه سازی تصاویر سایت

12. از CDN برای نکات بهینه سازی تصاویر استفاده کنید:

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

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

CDN های زیادی وجود دارد. اینجا تنها تعداد کمی از آنها هستند:

Cloudflare (سطح رایگان موجود)
KeyCDN؛
Amazon CloudFront (سطح رایگان موجود)
Google Cloud CDN (نمونه آزمایشی رایگان موجود است)

اگر از وردپرس استفاده می کنید، راه اندازی CDN آسان است. برای CDN انتخابی خود ثبت نام کنید، دستورالعمل ها را دنبال کنید، سپس از افزونه ای مانند W3 Total Cache، CDN Enabler یا WP Rocket برای فعال کردن CDN در سایت خود استفاده کنید. ساده است.

با این حال، شایان ذکر است که CDN شما دارای یک URL مانند xyz.cdnprovider.com خواهد بود. به دلایل زیر برای سئو عالی نیست:

تصاویر شما به طور موثر در یک دامنه جداگانه میزبانی می شوند. اگر شخصی انتخاب کند که یکی از تصاویر شما را جاسازی کند و به شما پیوند دهد، این احتمال وجود دارد که در عوض به CDN پیوند دهد. این بدان معناست که شما یک لینک را از دست می دهید.
اگر بخواهید ارائه دهنده CDN را در آینده تغییر دهید، می تواند مشکلاتی ایجاد کند. شما باید همه URL های تصویر خود را تغییر دهید (یا تغییر مسیر دهید).

در اینجا توصیه جان مولر در مورد CDN ها آمده است:

آدرس‌های اینترنتی CDN خوب هستند، اما من سعی می‌کنم از جابجایی نشانی‌های اینترنتی تصویر بیش از حد خودداری کنم، بنابراین تمایل دارم از دامنه/زیر دامنه خود شما (از طریق CDN) استفاده کنم.به همین دلیل، من تنظیم یک رکورد CNAME را توصیه می کنم. این را به عنوان یک نام مستعار در نظر بگیرید که می تواند به جای URL زشتی که توسط ارائه دهنده CDN به شما اختصاص داده می شود استفاده شود. بنابراین به جای xyz.cdnprovider.com، CDN شما می تواند cdn.yourdomain.com باشد.این راهنما را بخوانید تا یاد بگیرید که چگونه این را تنظیم کنید (و همه چیزهایی که باید در مورد CDN ها به طور کلی بدانید). https://woorkup.com/cdn-for-dummies/

نکته : CDN های تصویر نیز یک چیز هستند. گوگل دو مورد از این موارد را در اسناد رسمی خود توصیه می کند: Cloudinary و imgix.

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

نکته امتیازی: “صندوق لینک” را از بک لینک های تصویر که یکی از نکات بهینه سازی تصاویر است، بازیابی کنید:

اینفوگرافیک گیف ها نمودار. اینها همه دارایی های قابل پیوند هستند که اغلب در وب سایت های دیگر تعبیه می شوند. در اینجا یک مثال اوردم:

این تصویری از مطالعه گزیده های برجسته ما است که در پست وبلاگ شخص دیگری جاسازی شده است. به طور معمول، افراد هنگام انجام این کار به منبع تصویر لینک می دهند که این یکی از نکات بهینه سازی تصاویر است، اما همیشه اینطور نیست. گاهی اوقات افراد اصلاً پیوند نمی‌دهند، و گاهی اوقات مستقیماً به تصویر پیوند می‌دهند (به عنوان مثال، yourdomain.com/yourimage.jpg). این دقیقاً همان کاری است که این سایت انجام داد.

متأسفانه این بک لینک عملاً هدر می رود زیرا هیچ پیج رنکی به خود صفحه منتقل نمی شود. همچنین قادر به “جریان” در اطراف سایت ما نیست.شما می توانید با تماس سریع با لینک دهنده ها، “صندوق لینک” را از این بک لینک ها بازیابی کنید:
سلام [NAME]، دیدم که از عکس من استفاده کردی. به جای پیوند دادن به تصویر، می توانید به منبع اصلی پیوند دهید؟سریع، آسان است و نرخ تبدیل اغلب بسیار بالاست.چگونه چنین بک لینک هایی را پیدا می کنید؟ ساده. قابل اعتماد و متخصص:
Site Explorer > enter your domain > select “domain/*” mode > Backlinks > search for .jpg in “URLs of backlinks”

شما می توانید این فرآیند را با جستجوی تصاویر .png و .gif نیز تکرار کنید.

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

Site Explorer > enter CDN subdomain > select “prefix” mode

تصویر بالا نمایه پیوند برای cdn-backlinko.pressidium.com را نشان می‌دهد — CDN برایان دین برای backlinko.com استفاده می‌کند. بیش از 2300 بک لینک از 158 دامنه ارجاع دهنده (به عنوان مثال، وب سایت های منحصر به فرد) وجود دارد. به عبارت دیگر، 157 وب سایت (یکی از آنها خود backlinko.com است) در مقابل خود سایت به تصاویر و سایر فایل های میزبانی شده در CDN پیوند می دهند. این 157 فرصت لینک شدن است.

در راهنمای کامل ما برای احیای پیوند، در مورد استراتژی های مشابه ایجاد بک لینک بیشتر بخوانید.
https://ahrefs.com/blog/link-reclamation/

نتیجه نهایی

سئوی تصویر یک موضوع پیچیده است. گوگل اسناد زیادی در این زمینه دارد. صفحه آنها در مورد خودکارسازی بهینه سازی تصویر بیش از 15 هزار کلمه را اجرا می کند.

به همین دلیل، مهم است که توجه داشته باشید که من کاملاً همه چیز را در این مقاله پوشش نداده ام. این غیر ممکن خواهد بود. اگر می‌خواهید چیزهای زیادی را بدانید، می‌توانید اسناد Google را بخوانید (و چند هفته فرصت دارید). این مقاله به طور عمدی بر عناصر “بزرگ” تمرکز دارد که معتقدم بیشترین تأثیر مثبت در سئو را خواهند داشت. به خاطر داشته باشید که باید تلاش کنید تا مطمئن شوید که برای نکات بهینه سازی تصاویرباید کیفیت را در نظر بگیرید. و به یک تجربه کاربری عالی کمک می کنند. این به معنای دور ماندن از عکس‌های استوک با کیفیت پایین، امکان گسترش تصاویر محصول و غیره است.