راهنمای کامل بهینه سازی تصاویر در وردپرس – بخش دوم: تکنیک‌های مدیریت تصاویر

نویسنده : سید ایوب کوکبی ۲۸ اسفند ۱۳۹۶

راهنمای کامل بهینه سازی تصاویر در وردپرس – بخش دوم: تکنیک‌های مدیریت تصاویر

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

  • وقتی آدرس سایت را عوض می‌کنید چه بلایی سر تصاویر شما می‌آید؟
  • اگر سایت شما چند نویسنده داشته باشد و تعدادی از آن‌ها به جای آپلود تصاویر به آن لینک کرده باشند چگونه می‌توانید متوجه آن شوید؟
  • وقتی شخصی تصاویر شما را هات‌لینک می‌کند چه اتفاقی رخ می‌دهد؟ ضمنا منظور از هات‌لینک چیست؟

بهینه سازی تصاویر - تکنیک‌های مدیریت تصاویر

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

چه زمانی آدرس سایت وردپرس تغییر می‌کند؟

پیش از هر کاری، اول باید ببینیم که چرا و تحت چه شرایطی آدرس سایت ممکن است تغییر پیدا کند. سه دلیل عمده ان عبارتند از:

۱- تغییر دادن دامنه سایت: اگرچه توصیه شده دامنه سایت را از ابتدا درست انتخاب کنید تا در آینده با مشکلی مواجه نشوید ولی گاهی اوقات شرایط به گونه‌ای رقم می‌خورد که ناچار به این کار می‌شویم. به عنوان مثال دامنه قبلی سایت معروف Moz که در حوزه سئو فعالیت می‌کند SEOMoz بود که به منظور برندسازی بهتر ترجیح داده شد از یک نام سه حرفی به جای آن استفاده شود. این کار باعث می‌شود تا تمامی آدرس‌های قبلی تصاویر، فایلها، ایبوکها، لینک‌ها و غیره از seomoz.com به moz.com تغییر پیدا کنند.

۲- تغییر فولدر نصب وردپرس: آدرس سایت (URL)، گاهی اوقات به دلیل تغییر محل نصب وردپرس اتفاق می‌افتد. در واقع، این یکی از رایج‌ترین حالت‌هایی است که در این زمینه اتفاق می‌افتد. وردپرس در هنگام نصب به صورت پیش‌فرض در فولدر blog نصب می‌شود. بسیاری از کاربران تازه‌کار وردپرس، بی‌اطلاع از این موضوع، آدرس سایتشان را چیزی شبیه example.com/blog قرار می‌دهند. بعد از گذشت چند ماهی تازه متوجه می‌شوند که باید وردپرس را به ریشه منتقل کنند. به محض جابه‌جا کردن وردپرس به فولدر ریشه، آدرس سایت از example.com/blog به example.com تغییر پیدا می‌کند. در واقع، این بروزرسانی باعث می‌شود تا هر تصویر، فایل یا رسانه‌ای در سایت، ایتگونه تغییر کند:

  • قدیم: example.com/blog/ebook.pdf
  • جدید: example.com/ebook.pdf

۳- نقل مکان از سرورهای آزمایشی به واقعی : این موضوع اغلب در وبلاگ‌های پرترافیک و سایت‌های تجاری که هر خطایی باعث افت نرخ تبدیل مشتری می‌شود شایع است. نقل مکان از سرورهای تست یا آزمایشی به سرورهای اصلی در هاستینگ‌های مدیریت شده‌ی وردپرس نظیر WPEngin یا Flywheel کار ساده‌ای است. مشکل زمانی رخ می‌دهد که شخصی یک تصویر یا لینک را از سرور تست در پست‌های اصلی قرار می‌دهد. وقتی این پست به سرور اصلی منتقل می‌شود، لینک‌ها و تصاویر، کماکان آدرس سرور آزمایشی را یدک می‌کشند که طبیعتا مد نظر هیچ کس نیست. اگر احتمال می‌دهید این کار توسط یکی از افراد تیم شما اتفاق افتاده است با راه‌حلی که در ادامه خواهیم گفت می‌توانید مشکل را حل کنید.

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

  1. سرورهای تست معمولا از منابع کمتری استفاده می‌کنند. شما ناچارید با سرعت کم که نتیجه آن تجربه ناخوشایند کاربران است مدارا کنید.
  2. در اغلب اوقات، لینک‌های مستقر در این سرورها تغییر می‌کنند که ممکن است منجر به شکسته شدن هزاران لینک شود.مقاله‌ای را تصور کنید که با هزار زحمت نوشته‌اید ولی تمامی تصاویر آن به دلیل خراب شدن لینک‌ها با یک ضربدر جایگزین شده‌اند.
  3. سئو هم دل خوشی از این موضوع ندارد. به خاطر داشته باشید که جستجوی تصاویر بخصوص در سال‌های کنونی یکی از منابع ارزشمند برای تامین ترافیک ارگانیک سایت شماست. اگر تصاویر سایت شما بر روی دامنه دیگری قرار داشته باشد، امتیاز برخورداری از این ترافیک ارزشمند را از دست خواهید داد.
بخوانید  اواتار خود را همین الان ایجاد کنید

قصد داریم چه مشکلی را حل کنیم؟

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

مثالی رایج از لینک یک تصویر داخل پست:

http://mywpsite.tld/wp-content/uploads/year/month/image-name.png

وقتی آدرس سایت تغییر می‌کند طبیعتا آدرس دامنه همه تصاویر نیز باید تغییر پیدا کند، یعنی به این صورت:

http://newwordpressdomain.tld/wp-content/year/month/image-name.png

این کار را نه تنها برای تصاویر بلکه برای همه لینک‌ها (اعم از لینک‌های داخلی، فایل‌های مدیا، ایبوک و غیره) باید انجام دهید. خب ظاهرا مشکل به خوبی شرح داده شد. اکنون زمان ارائه راه‌حل است. مثل همیشه برای هر کاری وردپرس یک راه نجات قرار داده است. بله کلید نجات ما یک افزونه وردپرسی تحت عنوان Velvet Blues Update URLs است.

Velvet Blues Update URLs

velvet-blue-plugin

  • اول از همه این افزونه را دانلود و نصب کنید.
  • بعد از فعال‌سازی، جهت پیکربندی افزونه سراغ داشبورد / ابزارها / بروزرسانی آدرس سایت (Update URLs) بروید.

Velvet_Blues_Update-url-plugin-settings

جستجو و جایگزینی در مایکروسافت ورد را که یادتان هست؟ خب؛ این افزونه هم دقیقا همین کار را می‌کند. آدرس قدیمی سایت را در داخل تمامی پست‌ها و صفحات سایت جستجو کرده و با دامنه جدید جایگزین می‌کند. در این حالت تمامی تصاویر داخل پست‌ها به صورت خودکار تغییر پیدا می‌کنند. بعلاوه با گزینه‌هایی که در پایین صفحه وجود دارد می‌توانید قسمت‌هایی که می‌خواهید آدرس آن بروزرسانی شود را به صورت مجزا انتخاب کنید.

در تصویر بالا آدرس سایت را از http://seomoz.com به https://moz.com تغییر داده‌ایم. بعد از وارد کردن آدرس‌های قدیم و جدید سایت، دکمه Update URLs Now را کلیک کنید. افزونه شروع می‌کند به جستجوی تمام پست‌ها و صفحات سایت تا آدرس جدید را جایگزین کند.

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

ترفند دوم: وارد کردن تصاویر خارجی به سایت

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

به دو دلیل، کسی دوست ندارد از تصاویر خارجی در سایت خود استفاده کند:

  • از پهنای باند دیگران استفاده می‌کنیم، که منصفانه نیست. (دزدی پهنای باند!)
  • لطمه دیدن تصاویر از منظر سئو

بیایید نگاهی به پست پایین بیندازیم. به سختی می‌توان از طریق ویرایشگر دیداری وردپرس پی به اکسترنال بودن تصویر برد.

wordpress-editor-visual

مگر به حالت متنی سوئیچ کنیم.

wordpress-editor-text-view

مشاهده می‌کنید که تصویر بر روی imgur.com – یک سایت محبوب میزبانی تصویر – قرار دارد. در حالت معمول برای حل این مشکل نیاز است، به ترتیب، سه کار مختلف انجام دهید:

  • تصویر را دانلود کنید.
  • تصویر دانلود شده را مجددا آپلود کنید.
  • لینک تصویر را بروزرسانی کنید.
بخوانید  کاهش حجم فایل‌های PNG

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

عنوان این افزونه رایگان که نامش به تنهایی گویای عملکرد آن است Import External Images است. بعد از نصب و فعال‌سازی افزونه به داشبورد / رسانه / Import Images مراجعه کنید. تنظیمات پنل این افزونه به این صورت است:

اگر به گوشه پایین سمت راست تصویر نگاه کنید مشاهده می‌کنید که پلاگین به صورت خودکار تصاویر خارجی را تشخیص داده است. البته در اینجا چون سرور آزمایشی است فقط یک تصویر را نشان می‌دهد. اکنون تمام کاری که باید انجام دهید کلیک بر روی دکمه Import Images now است تا پردازش شروع شود. بعد از اتمام عملیات، پیغام تاییدی به همراه تعداد تصاویر ایمپورت شده نمایش داده می‌شود.

ترجیحا، شما می‌توانید با تیک زدن گزینه Exclude Images by domain، آدرس‌های خاصی را مستثناء کنید. به عنوان مثال ممکن است تصاویری بر روی سایت‌های پولی نظیر فوتوباکت داشته باشید که نمی‌خواهید ایمپورت شوند و به همان صورت اکسترنال باقی بمانند. این دامین‌ها را می‌توانید در کادر پایین گزینه‌ای که تیک زدید وارد نمایید. بعد از پایان عملیات وارد کردن تصاویر اگر به کتابخانه رسانه‌ها مراجعه کنید، این تصاویر را مشاهده خواهید نمود.

بسیار خب؛ تصاویر ایمپورت شدند. اما چه بلایی سر محتوای پست‌ها می‌آید. آیا همچنان به تصاویر قدیمی لینک شده‌اند؟ خیر؛ این افزونه همزمان با ایمپورت کردن تصاویر، لینک‌های مرتبط را هم تصحیح می‌کند.

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

ترفند سوم: جلوگیری از هات‌لینک کردن تصاویر در وردپرس

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

۱- پیکربندی وب سرور برای ممانعت از هات‌لینک (آپاچی یا NGINX)

با تنظیم وب‌سرور می‌توان جلوی هات‌لینک شدن تصاویر را گرفت. دو وب‌سرور معروف عبارتند از Apache و NGNIX. اگر از آپاچی استفاده می‌کنید، با اضافه کردن چند خط به فایل htaccess. می‌توانید جلوی این کار را بگیرید.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-site.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-other-domain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://i.imgur.com/g7ptdBB.png [NC,R,L]

و اگر از NGINX استفاده می‌کنید، تکه کد زیر را به فایل پیکربندی اضافه نمایید:

location ~ .(gif|png|jpe?g)$ {
valid_referers none blocked .yourwebsite.com;
if ($invalid_referer) {
return 403;
}
}

به جای عبارت yourwebsite.com آدرس سایت خود را قرار دهید.

این کد به صورت خلاصه از هات لینک شدن هر نوع فایل تصویری اعم از GIF, PNG و JPG/JPEG جلوگیری می‌کند. این فایل‌ها تنها از طریق دامین شما در دسترس خواهند بود. در صورتی که فردی به این سه فایل هات‌لینک کند با خطای ۴۰۳ مواجه خواهد شد.

بخوانید  اضافه کردن گوگل اسلاید به وردپرس

اجازه دهید خط به خط این کد را توضیح دهیم:

  1. خط ۱، فرمت‌های تصویری که می‌خواهید جلوی هات‌لینک شدن آن را بگیرید وارد شده است. در این قسمت می‌توانید فرمت‌های ویدیویی نظیر mp4 هم قرار دهید.
  2. خط دوم به NGINX می‌گوید که تنها به سایت شما اجازه داده شود و سایر دامین‌ها بلاک شود.
  3. خط ۳ به وب‌سرور می‌گوید در صورتی که دامینی غیرمجاز سعی داشت از این تصاویر استفاده کند چه اقدامی انجام دهد.
  4. خط چهارم در صورت برقرار بودن شرایط خط سوم، خطای ۴۰۳ را به کاربر نمایش می‌دهد.
  5. دو خط انتهایی هم برای بستن صحیح کد قرار گرفته‌اند.

به صورت مشابه اگر مایل باشید کل یک فولدر را از هات‌لینک شدن محافظت کنید باید از کد پایین استفاده نمایید:

location /uploads/ {
valid_referers none blocked .yourwebsite.com;
if ($invalid_referer) {
return 403;
}
}

بخش /uploads/ را با دایرکتوری موردنظر خود جایگزین کنید. در این مثال، فولدر پیش‌فرض uploads را انتخاب کرده‌ایم که معمولا در اغلب وب‌سایت‌های وردپرسی تمامی فایلها اعم از تصاویر، فایل‌های PDF، ویدیوها و سایر موارد داخل آن قرار می‌گیرد. بنابراین با محافظت از این فولدر خیال خود را از بابت هات‌لینک شدن همه فایل‌های داخلش راحت کرده‌ایم. چه آن‌هایی که از قبل در سایت آپلود شده‌اند و چه آن‌هایی که در آینده قرار خواهیم داد.

۲- استفاده از سرویس‌های تحویل محتوا یا CDN

تعجب نکنید! سرویس‌های مثل کلودفلر به صورت رایگان جلوی هات‌لینک شدن تصاویر شما را می‌گیرند. برای این کار ابتدا به داشبورد خود در کلودفلر مراجعه کرده و در قسمت Scrape Shield دکمه را بر روی ON قرار دهید. کلودفلر یک سرویس پراکسی است که ترافیک را قبل از ورود به سایت شما کنترل می‌کند و با این کار جلوی حملات هکرها و سرقت پهنای باند را می‌گیرد. در صورت استفاده از سرویس‌های پولی CDN نظیر MaxCDN یا KeyCDN نیازمند تنظیم صحیح آن‌ها هستید که لازم است بر اساس شیوه‌نامه آن این کار را انجام دهید.

۳- استفاده از پلاگین All In One WP Security & Firewall Plugin

شاید شما هم مثل من دوست نداشته باشید با کدهای htaccess. درگیر شوید و ترجیح بدهید برای این کار از پلاگین استفاده کنید. خوشبختانه اینجا هم افزونه‌های زیادی وجود دارند. افزونه All In One WP Security & Firewall Plugin که یکی از برترین پلاگین‌های امنیتی وردپرس بوده و تاکنون بیش از نیم میلیون نصب فعال داشته را نصب و فعال کنید. کاری که باید برای جلوگیری از هات‌لینک شدن تصاویر انجام دهید در تصویر پایین نمایش داده شده است:

  • پلاگین را دانلود و نصب کنید.
  • افزونه را فعال کرده و به داشبورد/WP Security/فایروال مراجعه کنید؛ سپس تیک Prevent Hotlinks را بزنید.
  • در نهایت دکمه Save Settings را بزنید.

و این تمام کاری بود که باید انجام می‌دادید. اکنون هیچ کس نمی‌تواند از تصاویر شما در سایتش استفاده کند.

نتیجه‌گیری

این پست را با نگاهی به آنچه آموختیم، جمع‌بندی می‌کنیم:

  1. برای جایگزین کردن آدرس‌های قدیمی با آدرس‌های جدید از افزونه Velvet Blues Update URLs استفاده کردیم.
  2. آموختیم برای ایمپورت کردن تصاویر خارجی که تجربه آماتوری بسیار از وبلاگ‌نویسان بوده از افزونه Import External Images استفاده کنیم.
  3. متذکر شدیم که هر دو پلاگین بالا، ممکن است منابع زیادی مصرف کنند و در هنگام استفاده از آن‌ها باید احتیاط نمود.
  4. و نهایتا با هات‌لینک‌ها، چیستی آن و چگونگی مقابله با این پدیده آشنا شدیم. یکی از راه‌ها اضافه کردن چند خط کد به فایل htaccess. بود و دیگری استفاده از یک پلاگین امنیتی.

امیدواریم مطالب بخش دوم مقاله بهینه‌ سازی تصاویر، نظر شما را جلب کرده باشد. به زودی با سومین و آخرین بخش از آموزش در خدمت شما خواهیم بود. لطفا نظرات خود را برای ارتقای کیفیت مطالب با ما در میان بگذارید.

سید ایوب کوکبی

نویسنده و مترجم...

2 دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *




    لیمو

    چهارشنبه ۳۰ خرداد ۱۳۹۷

    سلام

    جالبه برام از وقتی اومدم سایتتون ۱ ساعت گذشته و متوجه نشدم خخخخ

    هرچی میچرخم اینجا قسمت هایی که دوست دارم پیدا میکنم

    سایت خوبی پیدا کردم ولی سر سری سایتتونو دیدم حالا سایتتونو تو گوشیم سیو کردم وقتم ازاد شد میام دوباره میبینم

    ممنون

      محمد جواد فرکاریان

      چهارشنبه ۳۰ خرداد ۱۳۹۷

      سلام
      بسیار خوشحالیم که برای شما مفید بودیم
      موفق باشید 😉