در حال حاضر تصاویری که در داخل متن مطالب سایت استفاده می کنید تاثیر بسیار زیادی در بهینه بودن مطلب برای کاربران و موتورهای جستجو (مخصوصا گوگل) دارند .در ادامه این مطلب ، به روش ها و افزونه هایی برای بهینه سازی عکس های مطالب در وردپرس اشاره خواهد شد.
نحوه بهینه سازی تصاویر مطالب
فهرست سرفصل ها
مهم ترین و بهترین بخش در زمینه بهینه سازی تصاویر وردپرس ،قبل از آپلود کردن آن است . بهترین کار این است که همیشه قبل از اینکه تصویر مورد نظر را در سایتتان آپلود کنید ، آن را با استفاده از نرم افزارهای ویرایش تصویر مانند فتوشاپ ، کاملا بهینه و کم حجم کنید.
استفاده کردن از اندازه های بسیار بزرگ عکس و کیفیت های بسیار بالای آن هیچ کمکی به افزایش بازدید سایت و همچنین کاربر پسند بودن آن نمی کند.
توجه داشته باشید که تصاویر ، منابع بسیار بالایی از هاست و سرور شما را اشغال می کنند .از طرفی لود شدن تصاویر در زمان بازدید از سایت نیز می تواند باعث مصرف پهنای باند سرور سایت و همچنین مصرف اینترنت کاربر شود. به همین دلیل باید به عکس هایی که در مطالب استفاده می کنید به چشم یک دارایی گران قیمت نگاه کرده و از ارسال فله ای و بدون هدف هرگونه عکسی در سایت خودداری کنید.
اضافه کردن متن به تصاویر می تواند برای درک درست مطلب نوشته شده کمک زیادی کند ولی توجه داشته باشید که در بسیاری از موارد ، این نوشته ها زمانی که کاربر با استفاده از گوشی وارد سایت می شود، عملا قابل خواندن نیستند و بسیار کوچک و ناخوانا می شوند .برای رفع این مشکل می توانید نوشته های مهم را با استفاده از css و html بر روی عکس ها نمایش دهید.
تهیه عکس های خوب برای مطالب واقعا سخت و زمان بر است .ولی مطمئن باشید که این زمانی که برای تهیه عکس مناسب صرف می کنید و تلاشی که برای استفاده از بهترین عکس مرتبط با مطلبتان انجام می دهید ، ارزشش را دارد و می تواند در آینده نزدیک بازدهی خوبی برایتان داشته باشد.
اندازه تصاویر – آیا همیشه بزرگتر بهتر است ؟
زمانی که در مورد تصاویر مطالب صحبت می شود ، اولین و یکی از مهمترین بخش ها ، سایز آن است . بسیار مهم است که بدانید ، همیشه و لزوما تصاویر بزرگتر بهتر نیستند.
تصاویری که استفاده می کنید باید با قالب بندی سایت شما هماهنگی داشته باشند و در صورتی که از عکس بزرگی استفاده کنید که قالب سایت شما آن عکس را با استفاده از css کوچک کند ، اصلا خوب نیست . بسیار مهم است که بدانید سایز بندی مناسب برای نمایش در سایتتان چقدر است و در زمان تولید تصاویر ، این سایز را مد نظر داشته باشید.
همچنین وردپرس به صورت خودکار سایزهای مختلفی از هر عکس را برای استفاده در بخش های مختلف قالب تولید می کند. برای مثال ، بسیاری از قالب ها امکان نمایش مطالب در سایدبار و یا بخش مطالب مرتبط را دارند که برای این بخش ها معمولا وردپرس عکس های متناسب را به صورت خودکار تولید می کند.
در هر صورت استفاده از تصاویری که سایز درستی ندارند و توسط مرورگر کوچکتر یا بزرگتر از آن چیزی که هستند نمایش داده می شوند اصلا درست نیست و می تواند سرعت لود سایت را تحت تاثیر قرار دهد. سایت های بررسی کننده سرعت سایت مانند جی تی متریکس ، استفاده نکردن از تصاویر با سایر درست را یک امتیاز منفی در نظر می گیرند.
نحوه کاهش حجم عکس بعد از آپلود کردن در سایت وردپرسی
اگر سایتتان را با وردپرس طراحی کرده اید ، روش ها و افزونه های زیادی برای کاهش حجم و بهینه سازی عکس هایی که در مطالب آپلود می کنید وجود دارند. یکی از معروف ترین افزونه های بهینه سازی عکس ، Smush نام دارد که نسخه رایگان آن در مخزن وردپرس وجود دارد و نسخه پولی آن نیز امکان بیشتری در اختیار کاریر قرار می دهد ولی برای اکثر سایت ها و بخصوص سایت هایی که مطالب کمی دارند و تعداد عکس زیادی در انها وجود ندارد ، همان نسخه رایگان کافی است.
به تازگی به افزونه WP Optimize نیز بخش بعنوان بهینه سازی عکس اضافه شده است. در ورژن های جدید ورپرس ، به صورت خودکار عکس هایی با ویژگی ریسپانسیو تولید می شود به صورتی که در حالت موبایل ، سایزهای کوچکتر هر تصویر برای کاربر لود می شود و می تواند سرعت لود سایت را در حالت ریسپانسیو بهبود بخشد.
توجه داشته باشید که اگر سئوی مطلب برای شما بسیار مهم است ، بهترین حالت برای عکس ، اندازه ای است که عرض و طول آن اختلاف بسیار زیادی با یکدیگر نداشته باشند. برای مثال بهتر است از عکس های عمودی که مثلا برای نمایش یک لباس تمام قد گرفته شده است ، استفاده نکنید.اختلاف بسیار زیاد عرض و ارتفاع عکس می تواند یک امتیار منفی برای سئوی تصاویر شما باشد. نسبت 3 در 4 یا 9 در 16 می تواند مناسب باشد.
فرمت مناسبی برای عکس های خود انتخاب کنید
هر فرمتی از تصاویر ، نقاط قوت و ضعف مخصوص به خود را دارد ولی توصیه می شود تا جایی که ممکن است از فرمت jpg برای تصویر مطالب استفاده کنید.
عکس های PNG به دلیل داشتن قابلیت هایی مانند امکان شفافیت و یا داشتن جزئیات زیاد (و در بیشتر مواقع غیر ضروری) در برخی از موارد باید در مطالب مورد استفاده قرار گیرد ولی در مواردی که به این قابلیت ها نیازی ندارید توصیه می شود به هیچ عنوان از فرمت PNG استفاده نکنید.
برای اطلاعات بیشتر در مورد انتخاب فرمت تصاویر می توانید از بخش راهنمای Smush استفاده کنید ولی در ادامه به صورت مختصر به این مورد اشاره می شود.
انواع مختلفی از تصاویر وجود دارند. برخی از تصاویر با استفاده از اشکال هندسی تولید شده اند و می توان این تصاویر را با کمترین افت کیفیت ، فشرده سازی کرد . در مقابل ، تصاویری نیز وجود دارند .که با استفاده از بلوک های ریز به نام پیکسل تولید شده اند. این تصاویر اگر بیش از حد فشره سازی شوند ، شطرنجی شده و کیفیت خود را از دست می دهند.
فشرده سازی تصاویر در وردپرس
افزونه های بسیاری زیادی برای این کار در مخزن وردپرس وجود دارد. اکثر این افزونه های به این صورت کار می کنند که برخی از بخش های عکس که برای چشم انسان غیر قابل تشخیص است را از عکس حذف کرده و باعث کاهش حجم آن می شوند. (حالت Lossy Compression ).این افزونه های می توانند بسیاری از تصاویر را گاهی حتی تا 75% بدون کاهش کیفیت قابل ملاحظه ، فشرده کنند.
فرمت JPEG
این فرمت یکی از بهترین و پرکاربردترین فرمت های تصویری است که در بین سایت های اینترنتی نیز طرافداران بسیاری دارد. درصد بسیار بسیار بالایی از مرورگرها از این فرمت تصویری پشتیبانی می کنند و توصیه می شود تا جایی که می توانید از این فرمت برای عکس های مطالب سایت استفاده کنید.
این فرمت از حالت شفافیت و انیمیشن پشتیبانی نمی کند .
فرمت PNG
این فرمت تصویری سه نوع مختلف دارد. هر سه نوع فرمت PNG در زمان فشرده سازی ، حجم بیشتری نسبت به فرمت jpg دارند. PNG-8 از رنگ های 24 بیتی برای ایجاد میلیون ها رنگ مختلف استفاده می کند . نوع PNG24 از قابلیت 24 بیتی به همراه یک کانال آلفا برای تولید میلیون ها رنگ مختلف استفاده می کند و به jpg شبیه تر است .
نوع PNG-32 از قابلیت 24 بیتی به همراه یک کانال آلفای اضافی برای ایجاد امکان شفافیت پیشرفته استفاده می کند.
فرمت WebP
فرمت WebP نوعی فرمت تصویری متن باز است که توسط گوگل ارئه شده است . این فرمت ، بهترین امکانات دو فرمت png و jpg را با هم ترکیب کرده است. فایل تصویری با فرمت WebP حجم بسیار پایین تری نسبت به فرمت های دیگر دارد .
دو نوع از فرمت WebP وجود دارد.اگر از وردپرس استفاده می کنید به راحتی می توانید با استفاده از افزونه هایی که در مخزن وردپرس موجود هستند به صورت خودکار فرمت WebP را در زمان آپلود تصاویر ایجاد کنید. این افزونه ها باعث می شوند زمانی که کاربر وارد سایت شما می شود و مرورگر مورد استفاده کاربر ، فرمت WebP را پشتیبانی می کند ، به صورت خودکار WebP برای او لود شده و در غیر این صورت ، فرمت اصلی تصویر برای کاربر نمایش داده خواهد شد.
فرمت SVG
این فرمت تصویری مبتنی بر XML است و به شما این امکان را می دهد که اشکال دو بعدی برای ایجاد گرافیک هایی مانند بردارها استفاده کنید. اشکال ساده دیگر مانند اشکال هندسی ، پرچم و نمودارهای ساده نیز با این فرمت قابل طراحی هستند.
به صورت پیش فرض و برای جلوگیری از بدافزارها ، وردپرس در حالت معمول اجازه آپلود این فرمت تصویری را از طریق داشبورد سایت ، نمی دهد .
فرمت GIF
فرمت GIF نیز یکی از رایج ترین فرمت های تصویری است که از حالت انیمیشن نیز پشتیبانی می کند .با وجود اینکه استفاده از فرمت GIF بسیار رایج است ولی توصیه می شود بجای این فرمت از mp4 و یا WebM استفاده شود چرا که بسیار بهینه تر و کم حجم تر هستند.
فرمت GIF تقریبا با تمام مرورگرها سازگار است .
البته توجه داشته باشید که بهینه سازی تصاویر ، فقط به معنی کاهش حجم و اندازه عکس نیست . برای اینکه تصاویر شما برای موتورهای جستجو قابل درک تر باشند ، اقدامات دیگری نیز باید انجام دهید.
نام تصویر برای سئو مهم است
بعد از انتخاب فرمت مورد نظر برای ذخیره سازی تصویر ، نوبت به نام آن می رسد. اگر با استفاده از دوربین ، خودتان اقدام به عکس برداری کرده اید باید نام پیش فرضی که توسط دوربین برای عکس ایجاد شده است را تغییر دهید.اگر این تصویر را از اینترنت ذخیره کرده اید نیز باید همین کار را انجام دهید.
نامی که برای عکس انتخاب می کنید باید متناسب با خود عکس بوده و توصیفی در مورد آن باشد و در عین حال ، طولانی نباشد. در نام تصویر بهتر است از کلمات کلیدی مربوط به آن استفاده کنید. توجه داشته باشید که نام تصویر حتما باید انگلیسی باشد و از نام گذاری آن با حروف فارسی خودداری کنید.
در ادامه این مطلب به برخی از اقداماتی که بعد از بارگذاری عکس در وردپرس باید انجام شود اشاره خواهد شد.
اندازه های پیشفرض عکس ها در وردپرس
زمانی که عکسی در سایت وردپرسی آپلود می کنید ، به صورت خودکار 4 سایز دیگر از آن تصویر ایجاد می شود.سایز بندانگشتی ، سایز متوسط و سایز بزرگ که در بخش تنظیمات » رسانه ، در دسترس است . یک سایز دیگر نیز وجود دارد بنام medium_large که به صورت پیش فرض پنهان است و از بخش تنظیمات وردپرس قابل دسترسی نمی باشد.
همچنین قالبی که برای سایتتان استفاده می کنید ممکن است متناسب با امکاناتی که در اختیارتان قرار خواهد داد ، سایزهای دیگری را نیز تولید کند که معمولا (و نه همیشه )در فایل functions.php موجود در پوشه قالب ، تعریف شده اند.
غیر فعال کردن اندازه های پیشفرض در وردپرس
برای این منظور می توانید وارد بخش تنظیمات » رسانه شده و هر کدام از اندازه ها را تغییر داده و یا کلا با 0 قرار دادن سایز آن ، غیر فعال کنید.
برای غیر فعال کردن یا تغییر سایر تصاویر مربوط به قالب نیز می توانید عبارت add_theme_support( ‘post-thumbnails’ ); را در بین فایل های قالب جستجو کرده و سایزها را تغییر داده و یا کلا حذف کنید.
اگر از قالب های آماده برای سایت استفاده می کنید باید دقت داشته باشید که این قالب ها به دلیل امکانات زیادی که دارند و به خاطر داشتن چیدمان ها و دموها بسیار زیاد ، تصاویر بیشتری نیز تولید می کنند. توصیه می شود بعد از اینکه چیدمان سایت خودتان را انجام دادید و به جمع بندی نهایی در مورد آن رسیدید ، سایزهای مورد استفاده چیدمان خودتان را پیدا کرده و سایر سایزهای بدون استفاده را از functions.php قالب حذف کنید.
این موضوع زمانی بسیار مهم می شود که تعداد مطالب ارسالی شما زیاد شود. عکس های اضافی که در هاستتان ذخیره می شود می تواند حجم بسیار زیادی را اشغال کند. از طرفی برخی از شرکت های هاستینگ مانند نت افراز ، محدودیت تعداد فایل نیز بر روی هاست هایی که به مشتری ارائه می دهند ، اعمال می کنند که در این صورت وجود سایزهای بدون استفاده تصویری می تواند برای شما دردسر ساز شود.
سایزهای بدون استفاده بعد از تغییر قالب
حالا ممکن است این سوال پیش آید که در صورت تعویض قالب ، سایزهایی که قبلا و توسط قالب قبلی تولید شده اند تکلیفشان چیست؟ برای این منظور می توانید از افزونه Regenerate Thumbnails استفاده کنید. این افزونه سایزهای بدون استفاده موجود در هاست را شناسایی کرده و به صورت خودکار انها را حذف می کند . به صورت همزمان نیز سایزهای مورد نیاز برای قالب جدید را تولید خواهد کرد.
تصاویر ریسپانسیو در وردپرس
یکی از قابلیت های خوبی که بعد از ورژن 4.4 به وردپرس اضافه شده است ، خاصیت ریسپانسیو تصاویر آن است . در این حالت با استفاده از srcset ، وردپرس لیستی از سایزهای مختلف را به مرورگر ارسال کرده و سایزی متناسب با مرورگر کاربر را به او نشان می دهد. این حالت باعث افزایش شدید سرعت لود سایت در حالت موبایلی می شود چرا که بجای لود سایز اصلی ، سایز کوچکتر از هر عکس برای کاربر لود می شود.
بهینه سازی تصاویر از لحاظ سئو
برای اینکه موتورهای جستجو بتوانند موضوع تصویر مورد استفاده در مطلب را بخوبی درک کنند باید اقداماتی انجام دهید که در ادامه به برخی از آنها اشاره می شود.
عنوان تصویر در بخش «افزودن پرونده چند رسانه ای»
عنوان تصویر با نامی که در زمان آپلود کردن به عکس داده اید تفاوت دارد.زمانی که عکسی را در بخش رسانه های وردپرس آپلود می کنید ، می توانید عنوانی به هر تصویر اختصاص بدهید. این عنوان و یا نام تصویر باید توصیفی از عکس مورد استفاده و یا کلمات کلیدی مربوط به آن باشد.
در بخش رسانه ها ، دو کادر برای نام گذاری تصویر وجود دارد که کادر اول مهم است و کادر دوم را می توانید خالی رها کنید و یا همان متن کادر اول را داخل کادر دوم نیز کپی کنید.
متن جایگزین عکس در وردپرس
متن جایگزین و یا Alt تصویر نه تنها برای سئو تصاویر موجود بسیار مهم است بلکه برای زمانی که عکس مورد نظر در دسترس نیست نیز بسیار اهمیت دارد.
این کادر را نیز مانند کادر نام ، باید طوری تکمیل کنید که توصیف کننده تصویر مورد نظر باشد به صورتی که اگر تصویر لود نشد ، کاربر و موتورهای جستجو با خواندن این متن بتوانند در مورد تصویری که لود نشده است ، اطلاعات لازم را بدست بیاورند.
توضیح تصویر
کادر دیگری که در بخش تصاویر وردپرس وجود دارد ، «توضیح » است .در این کادر نیز توصیه می شود توضیح مختصری در مورد موضوع عکس نوشته شود.
سایر عناصر موجود در اطراف عکس
گوگل علاوه بر اینکه مشخصات خود تصویر را برای درک موضوع آن در نظر می گیرد ، به متن های قبل از تصویر و بعد از آن نیز وجه می کند .
نقشه سایت برای عکس ها
برای اینکه تصاویر سایت سریع تر و بهتر ایندکس شوند ، توصیه می شود برای عکس ها نیز نقشه سایت ایجاد کنید. در صورتی که از افزونه سئو Yoast استفاده می کنید این افزونه به صورت خودکار عکس های مطلب را به نقشه سایت اضافه می کند.
برچسب های Open Graph
برچسب های Open Graph یا رسانه های اجتماعی باعث می شوند که در زمان اشتراک گذاری مطلب شما در شبکه های اجتماعی ، تصویر مناسب به صورت خودکار از سرور سایت به شبکه های اجتماعی منتقل شود. برای مثال اگر برچسب Open Graph برای مطلبی به درستی استفاده شده باشد ، در صورت ارسال لینک آن مطلب در تلگرام ، به صورت خودکار عکس مطلب در تلگرام نمایش داده می شود.
با استفاده از برچسب og:image می توانید تعیین کنید که کدام عکس در صورت اشتراک گذاری لینک مطلب ، در شبکه های اجتماعی نشان داده شود. افزونه Yoast و all in one seo به صورت خودکار og:image را به مطالب سایت اضافه کرده و به صورت پیش فرض ، از تصویر شاخص مطلب برای این منظور استفاده می کنند. بسیاری از قالب های جدید نیز این مورد را پشتیبانی می کنند.
Lazy load یا بارگذاری تنبل تصویر
این تکنیک یکی از روش های موثر برای افزایش سرعت لود سایت است . زمانی که شما بارگیری تنبل تصاویر را فعال می کنید ، تصاویر مطلب تنها زمانی لود خواهند شد که کاربر صفحه را اسکرول کرده و به محل تصویر رسیده باشد. در این صورت زمان لود اولیه سایت به شدت کاهش پیدا کرده و منابع سرور و اینترنت کاربر نیز کمتر مصرف می شود.
توجه داشته باشید که اگر این گزینه به درستی اجرا نشود می تواند باعث ایجاد مشکل در ایندکس شدن تصاویر سایت شود .به همین دلیل باید در هنگام کد نویسی و یا انتخاب افزونه ، بسیار دقت کنید.
در حال حاضر بسیاری از افزونه های کش وردپرس از این مورد پشتیبانی می کنند و افزونه های اختصاصی خوبی نیز برای Lazy Load وجود دارد. قالب های مدرن و جدید نیز به صورت پیش فرض این گزینه را در بخش تنظیمات قالب دارند. قالب هایی مثل پابلیشر و جنه به خوبی از لیزی لود پشتیبانی می کنند و تصاویر موجود در مطالب نیز به خوبی توسط گوگل ایندکس می شوند.
کش مرورگر برای تصاویر
یکی دیگر از اقداماتی که برای بهینه سازی تصاویر وردپرس از لحاظ سئو می توانی انجام دهید ، فعال سازی کش مرورگر برای ذخیره تصاویر مطالب و کاهش زمان لود شدن سایت در مراجعات بعدی است .