वर्डप्रेस में छवियों का अनुकूलन कैसे करें (स्पीड + एसईओ दोनों के लिए)

जब छवि अनुकूलन की बात आती है, तो संभवतः आपने ऑल्ट टेक्स्ट के बारे में पर्याप्त सुना है.


छवियों को अनुकूलित करने के लिए वास्तव में 20 अलग-अलग तरीके हैं (यदि आप एसईओ और गति अनुकूलन दोनों शामिल हैं)। ये आपको जीटीमेट्रिक्स / पीएसडीआई में बेहतर स्कोर देंगे, संभवतः आपको खोज में उच्च रैंक देंगे, और आपकी सामग्री को बहुत तेज़ी से लोड करेंगे। मैं .5 लोड समय के साथ 100% GTmetrix रिपोर्ट प्राप्त करने में कामयाब रहा … वर्डप्रेस में मेरी छवियों का अनुकूलन इसका एक बड़ा हिस्सा था.

अपलोड करने से पहले छवियों का अनुकूलन करें – अपलोड करने से पहले छवियों को अनुकूलित करने के लिए फ़ोटोशॉप जैसे कार्यक्रम का उपयोग करके उन्हें बहुत सारे काम बचा सकते हैं। आप आकार बदल सकते हैं, संपीड़ित कर सकते हैं, EXIF ​​डेटा, सही प्रारूप (उदा। PNG / JPEG) में सहेज सकते हैं, और एक वर्णनात्मक फ़ाइल नाम लिख सकते हैं (जो स्वचालित रूप से ऑल्ट टेक्स्ट के रूप में उपयोग किया जाएगा यदि उपयोग करते हैं स्वचालित छवि Alt गुण प्लगइन)। यह 6 अनुकूलन है!

यदि आप उच्च संकल्प छवियों की आवश्यकता है (उदाहरण। एक फोटोग्राफी वेबसाइट), आप उनका आकार बदलना और उन्हें संक्षिप्त नहीं करना चाहते (चरण 3 और 8) क्योंकि ये गुणवत्ता को कम कर सकते हैं, भले ही यह एक छोटी राशि से हो.

मुख्य उपकरण जो मैं उपयोग करता हूं – मैं उपयोग करता हूं GIMP आकार बदलने / संपीड़ित करने के लिए (मेरी पसंद का छवि संपादक), WP रॉकेट मेरे कैश प्लगइन के लिए, Imagify आगे दोषरहित संपीड़न + EXIF ​​डेटा को हटाने के लिए, दोनों CloudFlare तथा StackPath CDN, स्वचालित छवि एएलटी प्लगइन का समर्थन करता है स्वचालित रूप से छवि फ़ाइल नाम का उपयोग पूरी तरह से पाठ के रूप में, और इष्टतम Gravatar कैश Gravatars को टिप्पणियों में कैश करने के लिए। मैं उपयोग करता हूं WP समीक्षा प्रो मेरी समृद्ध स्निपेट प्लगइन के रूप में, बेहतर खोज बदलें बल्क अपडेट इमेजेस (बहुत काम), और GTmetrix मेरी गति परीक्षण उपकरण के रूप में। उपकरणों की पूरी सूची देखें.

Contents

1. Unoptimized छवियाँ खोजें

के माध्यम से अपनी साइट चलाएँ GTmetrix और आपको ये आइटम पृष्ठ गति / YSlow टैब में दिखाई देंगे. पहले पांच आमतौर पर पृष्ठ-विशिष्ट होते हैं, अर्थ GTmetrix केवल आपके द्वारा परीक्षण किए गए एकल पृष्ठ के लिए अडॉप्ट की गई छवियों को दिखाएगा. अंतिम 3 आमतौर पर आपकी पूरी साइट पर होता है. बेशक, ये छवियों को अनुकूलित करने के केवल 7 तरीके हैं, लेकिन कुछ सबसे महत्वपूर्ण हैं, इसलिए हम पहले ये कर रहे हैं.

  • स्केल की गई छवियों की सेवा करें: सही आयामों के लिए बड़ी छवियों का आकार बदलें (चरण 2)
  • छवि आयाम निर्दिष्ट करें: छवि के HTML या सीएसएस में एक चौड़ाई / ऊंचाई निर्दिष्ट करें (चरण 3)
  • छवियों का अनुकूलन करें – दोषरहित चित्रों को संकुचित करें (चरण 4)
  • सीएसएस स्प्राइट्स का उपयोग करके छवियों का आना – 1 छवि में कई छवियों को मिलाएं (चरण 5)
  • URL पुनर्निर्देशन से बचें – गलत www या http (s) संस्करण से छवियों की सेवा न करें (चरण 6)
  • सामग्री वितरण नेटवर्क का उपयोग करें – सीडीएन से चित्र / फाइलें परोसें (चरण 7)
  • ब्राउजर की अस्थायी मेमोरी का संतुलन अपने कैश प्लगइन का उपयोग करके कैशे चित्र / फाइलें (चरण 8)
  • फ़ेविकॉन को छोटा और कम करने योग्य बनाएं – 16x16px फ़ेविकॉन का उपयोग करें और इसे कैश करें (चरण 9)

जीटीमेट्रिक्स में छवि अनुकूलन

कई पृष्ठों पर दिखाई देने वाली छवियों को ठीक करके प्रारंभ करें: लोगो, साइडबार / पाद चित्र, इत्यादि भी स्केल किए गए चित्रों के साथ शुरू करें क्योंकि आपको अपने आयामों के साथ आकार बदलना / पुनः लोड करना पड़ सकता है.

2. स्केल की गई छवियाँ परोसें

अगर आप देखें स्केल की गई छवियों की सेवा करें GTmetrix में त्रुटियां, इसका मतलब है कि आपने छवियों को ओवरसाइज़ किया है और उन्हें सही आयामों में बदलने की आवश्यकता है (जो GTmetrix आपको प्रदान करता है)। जब तक आप अपनी इमेज डायमेंशन चीट शीट (नीचे देखें) का पालन करते हैं, तब तक आपको ये त्रुटियां नहीं दिखेंगी। लेकिन अगर आप पहले से ही ओवरसाइज़्ड इमेज अपलोड करते हैं, तो आपको उन्हें मैन्युअल रूप से आकार बदलने या प्लगइन का उपयोग करने की आवश्यकता होगी.

परोसें-स्केल्ड-छवियाँ

एक प्लगइन का उपयोग कर छवियों का आकार बड़ा करें – इसके साथ समस्या यह है कि अलग-अलग छवियां अलग-अलग आयामों (विगेट्स, स्लाइडर्स, फुलव्यू इमेज) के लिए कॉल करती हैं। जबकि अधिकांश इमेज ऑप्टिमाइज़ेशन प्लग इन में छवियों को एक में बदलने का विकल्प होता है एक आयामों के विशिष्ट सेट, आपको अपलोड करने से पहले वास्तव में फसल / आकार देना चाहिए। यदि आप किसी प्लगइन का उपयोग करके छवियों का आकार बदलते हैं, तो मूल छवियों का बैकअप रखें (और केवल कुछ परीक्षण करें) यदि आप परिणामों से खुश नहीं हैं.

बड़ी छवियों का आकार बदलें

छवियों को मैन्युअल रूप से आकार दें – जीटीमेट्रिक्स से सही आयाम प्राप्त करें और उनका आकार बदलें / फिर से लोड करें। याद रखें, GTmetrix आपके द्वारा परीक्षण किए गए एकल पृष्ठ के लिए केवल अडॉप्ट किए गए चित्र दिखाता है.

अपनी वेबसाइट की छवि आयामों की एक धोखा शीट बनाएं
आपके स्लाइडर्स, ब्लॉग साइडबार, चुनिंदा चित्र, और ब्लॉग कंटेंट बॉडी सभी विशिष्ट आयामों के लिए कॉल करते हैं, जिन्हें छवियों का आकार बदलना चाहिए। एक चीट शीट बनाएं ताकि आप उन्हें वर्डप्रेस पर अपलोड करने से पहले आकार बदल सकें. यह विशेष रूप से उपयोगी है यदि आपके पास अपनी वेबसाइट के कई क्षेत्र हैं जो अलग-अलग छवियों के आकार की आवश्यकता होती है, और यदि आपके पास कई डिजाइनर / संपादक हैं.

उदाहरण:

  • स्लाइडर छवियाँ: 1900 (डब्ल्यू) x 400 (एच)
  • हिंडोला चित्र: 115 (एच)
  • विजेट छवियां: 414 (w)
  • फ़ुल विड्थ ब्लॉग पोस्ट छवियाँ: 680 (w)
  • विशेष रुप से प्रदर्शित चित्र: 250 (डब्ल्यू) x 250 (एच)
  • Yoast Facebook OG छवि: 1200 (w) x 628 (h) – चरण 11
  • Yoast Twitter OG छवि 1024 (w) x 512 (h) – चरण 11

680 पिक्सेल चौड़ाई आयत

3. छवि आयाम निर्दिष्ट करें

इसका मतलब छवि के HTML या CSS में एक चौड़ाई / ऊँचाई जोड़ना है। विज़ुअल एडिटर आपके लिए ऐसा करता है (लेकिन विगेट्स, कुछ पेज बिल्डरों, और कस्टम HTML ऐसा न करें)। GTmetrix में कुछ पृष्ठों का परीक्षण करें.

GTmetrix आपको छवि के आयाम बताता है…

विशेष छवि आयाम GTmetrix

छवि के HTML में चौड़ाई / ऊँचाई जोड़ें…

छवि आयाम निर्दिष्ट करें

4. हानिरहित छवियों को संपीड़ित करें

ये जीटीमेट्रिक्स में “छवियों का अनुकूलन” आइटम हैं। कई कार्यक्रमों (जैसे। फोटोशॉप और जिम्प) को निर्यात करने पर संपीड़ित करने का विकल्प होता है। जबकि यह एक शानदार शुरुआत है, छवि संपीड़न प्लगइन्स आमतौर पर और भी बेहतर परिणाम प्राप्त करते हैं। मैं पसंद करता हूं Imagify, Kraken, ShortPixel, या Smush. अन्य प्लगइन्स छवि गुणवत्ता को नेत्रहीन रूप से कम करने के लिए जाने जाते हैं और आपकी छवियों के साथ त्रुटियों का कारण बन सकते हैं.

कल्पना के साथ छवियों का संपीडन

  1. के लिए साइन अप Imagify
  2. स्थापित करें प्लगइन की कल्पना करें
  3. आपको नीचे दिए गए निर्देशों के साथ संकेत दिया जाएगा:
  4. अपने इमेजिफाई खाते से अपनी एपीआई कुंजी दर्ज करें
  5. अपना कंप्रेशन लेवल सेट करें (सामान्य, आक्रामक, अल्ट्रा)
  6. इमेजिफ़ेम (बल्क के साथ सभी फोटो) आपकी साइट पर सभी छवियों को अनुकूलित करता है
  7. एक बार जब आप अपनी सीमा तक पहुँच जाते हैं, तो $ 4.99 का भुगतान करें या अपनी सीमा को रीसेट करने के लिए अगले महीने की प्रतीक्षा करें

imagify

परीक्षण करें कि चित्र संपीड़न के विभिन्न स्तरों के साथ कैसे दिखते हैं …

कल्पना की तुलना करें

एक बार साइन अप करने के बाद, बल्क आपकी साइट पर सभी छवियों का अनुकूलन करता है …

imagify-वर्डप्रेस छवि अनुकूलन

अपलोड पर छवियों को अनुकूलित करने का विकल्प सेट करें…

अपलोड पर छवियों को अनुकूलित करने की कल्पना करें

5. सीएसएस स्प्राइट में छवियों को मिलाएं

मेरे होमपेज पर, आपको लगता है कि आप 21 आइकन देख सकते हैं, लेकिन वे वास्तव में 1 एकल छवि हैं। यह है एक सीएसएस स्प्राइट, जहां आप कई छवियों को 1 एकल छवि में संयोजित करते हैं। यह छवियों की संख्या (और अनुरोधों) को कम करता है यही कारण है कि मेरे होमपेज में केवल 10 अनुरोध हैं। 21 छवियों को लोड करने के बजाय, यह 1 लोड करता है। ऐसा करने के लिए आपको सीएसएस ज्ञान की आवश्यकता होगी, या ए का उपयोग करना होगा सीएसएस स्प्राइट जनरेटर.

सीएसएस स्प्राइट्स

GTmetrix CSS Sprites

केवल सजावटी छवियों के लिए सीएसएस स्प्राइट्स का उपयोग करें – जब आप 21 छवियों को जोड़ते हैं तो आप बहुत सारी इमेज ऑल्ट टैग खो देते हैं। यदि वे आपकी सामग्री का वर्णन करते हैं तो सीएसएस स्प्राइट में महत्वपूर्ण छवियों को संयोजित न करें। मेरे लिए, मेरे होमपेज की गति एसईओ की तुलना में अधिक महत्वपूर्ण है … मैं अपने होमपेज की GTmetrix रिपोर्ट का उपयोग बहुत सारे स्थानों में करता हूं (इसलिए मुझे इसे साफ रखना होगा) और मेरा मुखपृष्ठ, यह विश्वास करता है कि नहीं, लक्ष्य नहीं करता है कीवर्ड। इसका उद्देश्य मेरे ट्यूटोरियल को रेखांकित करना … और तेजी से लोड करना है.

6. छवि URL रीडायरेक्ट से बचें

यदि आप HTTPS, www संस्करणों में बदल गए हैं, या CDN से चित्र बनाना शुरू कर दिया है, तो आपको अपनी सभी छवियों (और लिंक) का उपयोग करके बल्क अपडेट करना चाहिए बेहतर खोज बदलें इसलिए वे सही संस्करण परोस रहे हैं। अन्यथा आप देख सकते हैं रीडायरेक्ट को कम करें या कुकी-मुक्त डोमेन का उपयोग करें त्रुटियों.

रीडायरेक्ट कम करें

कुकी मुक्त डोमेन

छवि अपडेट URL को बल्क अपडेट करने के लिए बेहतर खोज बदलें प्लगइन का उपयोग करें …

बेहतर खोज डब्ल्यूडब्ल्यूडब्ल्यू संस्करण बदलें

बेहतर खोज HTTP बनाम HTTPS को बदलें

7. एक सीडीएन से छवियाँ परोसें

इसे आपके शामिल करने के लिए छवि URL बदलने की आवश्यकता है सीडीएन यूआरएल

  • पुरानी छवि URL (CDN के बिना): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • नई छवि URL (CDN के साथ): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare बनाम StackPath – मैं दोनों का उपयोग करता हूं CloudFlare तथा StackPath चूंकि अधिक डेटा केंद्र = तेज़ सामग्री वितरण। Cloudflare है 200+ डेटा सेंटर, स्टैकपाथ के पास है 34+ डेटा सेंटर जो संयुक्त राज्य अमेरिका में स्थित हैं (जो कि मेरे अधिकांश आगंतुक हैं). Cloudflare आपको CDN URL असाइन नहीं करता है इसलिए हम छवियों की सेवा करने के लिए StackPath की CDN का उपयोग करेंगे.

StackPath-डाटा-केंद्र

चरण 1: एक CDN चुनें। मैं उपयोग करता हूं StackPath (उनका 30 दिन का परीक्षण है).

चरण 2: डैशबोर्ड में, CDN टैब पर क्लिक करें एक StackPath CDN साइट बनाएँ

StackPath-CDN-टैब

StackPath-CDN-डोमेन

CDN-यूआरएल-StackPath

चरण 3: अपने सीडीएन URL को कॉपी करें और अपने कैश प्लगइन में पेस्ट करें (नीचे WP रॉकेट के लिए है)…

WP-रॉकेट-CDN

चरण 4: अपने सीडीएन URL को शामिल करने के लिए छवि URL बदलें (उपयोग करके) बेहतर खोज बदलें).

बेहतर खोज सीडीएन यूआरएल बदलें

चरण 5: पुरानी छवि के URL की जाँच करें क्रोम DevTools. कभी-कभी, अपने कैश प्लगइन या सीडीएन एनबलर सीएसएस और जावास्क्रिप्ट के लिंक को छोड़कर, हार्ड-कोडित हैं, इस बात का ध्यान रखता है। जो लिंक पीछे छूट गए हैं, वे सामान्य रूप से हैं फ़ाइलें (जैसे सीएसएस या जावास्क्रिप्ट) जिन्हें मैनुअल चेकिंग और रीप्लेसिंग की आवश्यकता होती है। Chrome DevTools आपको वर्तमान में उपयोग किए जा रहे सभी डोमेन दिखाता है.

चरण 6: में अपनी साइट चलाएँ GTmetrix और “सामग्री वितरण नेटवर्क” YSlow में हरा होना चाहिए। आपको “कम से कम पुनर्निर्देशन” या “कुकी-मुक्त डोमेन का उपयोग करें” में कोई त्रुटि नहीं होनी चाहिए.

CDN GTmetrix YSlow

8. कैश छवियां

अधिकांश कैश प्लगइन्स के लिए एक विकल्प है ब्राउज़र कैशिंग, जो छवियों को कैश करता है। मैं WP रॉकेट का उपयोग करता हूं जिसे कई फेसबुक चुनावों में # 1 कैश प्लगइन का दर्जा दिया गया था, और मेरे पास इसके लिए ट्यूटोरियल है. स्विफ्ट प्रदर्शन आम तौर पर # 1 मुक्त कैश प्लगइन रैंक किया जाता है (मेरे पास इसके लिए एक ट्यूटोरियल है).

ब्राउज़र कैशिंग

9. फ़ेविकॉन को छोटा और कम करने योग्य बनाएं

सुनिश्चित करें कि आपका फ़ेविकॉन 16x16px है, फ़ेविकॉन.इको प्रारूप है, और आपके कैश प्लगइन का उपयोग करके कैश किया गया है.

10. EXIF ​​डेटा निकालें

डेटा से बाहर निकलें इसमें एपर्चर, शटर स्पीड, आईएसओ, फोकल लेंथ, कैमरा मॉडल, फोटो खींचने की तारीख, आदि जैसी जानकारी होती है। आपको अपनी वेबसाइट पर छवियों के लिए इसकी आवश्यकता नहीं है। VA निष्कासन प्लगइन चित्र अपलोड होते ही Exif डेटा को स्वचालित रूप से हटा देता है.

अधिकांश इमेज ऑप्टिमाइजेशन प्लगइन्स (इमेजिफाई, शॉर्टपिक्सल, क्रैकन, ईडब्ल्यूडब्ल्यूडब्ल्यू, और स्मश सहित) में EXIF ​​डेटा को स्वचालित रूप से हटाने का एक विकल्प है। यहाँ कल्पना के लिए सेटिंग्स है …

निष्कासन डेटा की कल्पना करें

11. क्लाउडफ्लेयर इमेज ऑप्टिमाइजेशन

Cloudflare में छवियों को अनुकूलित करने के कुछ तरीके भी हैं। मिराज और पोलिश आपके में पाए जाते हैं Cloudflare गति सेटिंग्स जबकि Hotlink सुरक्षा अपने में पाया जाता है स्क्रैप सेटिंग्स.

मेघफ्लेर मिराज (प्रो फ़ीचर) – छवि अनुरोधों को कम करता है, आलसी छवियों को लोड करता है, और धीमी नेटवर्क कनेक्शन वाले मोबाइल उपकरणों पर छवि लोड समय में सुधार करता है। यहाँ अधिक विवरण हैं…

  • विज़िटर के डिवाइस / कनेक्शन के आधार पर छवियों का आकार बदलता है। खराब कनेक्शन पर एक आगंतुक को एक छोटे संस्करण (कम रिज़ॉल्यूशन) मिलेगा जब तक कि वे उच्च बैंडविड्थ पर वापस नहीं आते.
  • अनुरोधों की मात्रा कम करता है – वेबसाइट पर सभी छवियों के लिए कई अनुरोध भेजने के बजाय, मिराज इसे एक अनुरोध में खींचता है ताकि आगंतुक तुरंत चित्र देख सकें।.
  • आलसी छवियों को लोड करता है (केवल एक बार उपयोगकर्ता लोड होने पर उन्हें लोड करता है और वास्तव में छवि को देखता है).

क्लाउडफ्लेयर छवि मिराज

Cloudflare पोलिश (प्रो फ़ीचर) – EXIF ​​डेटा स्ट्रिप्स और छवियों को संपीड़ित करता है.

Cloudflare Image पोलिश

Cloudflare Hotlink सुरक्षा – लोगों को आपकी छवियों को कॉपी करने और उन्हें अपनी वेबसाइट पर चिपकाने से रोकता है, जो (क्योंकि आप अभी भी उस छवि को होस्ट कर रहे हैं) आपके बैंडविड्थ को पूरा करेगा.

Cloudflare Hotlink सुरक्षा

12. आलसी लोड छवियाँ

यह छवियों को लोड करने में देरी करता है जब तक कि उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल नहीं करते और छवि को देखते हैं। हालांकि यह शुरुआती लोड समय में सुधार करता है, लगातार छवियों को लोड करना क्योंकि आप स्क्रॉल करते हैं, बहुत कष्टप्रद हो सकते हैं। मैं व्यक्तिगत रूप से केवल आलसी वीडियो लोड करता हूं, क्योंकि वे छवियों की तुलना में लोड होने में बहुत समय लेते हैं.

आप उपयोग कर सकते हैं आलसी लोड प्लगइन, वीडियो प्लगइन के लिए आलसी लोड, या WP रॉकेट का उपयोग करें …

WP-रॉकेट-लेज़ी लोड

13. सही प्रारूप के रूप में सहेजें

पीएनजी बनाम जेपीईजी – पीएनजी असम्पीडित (बड़ा फ़ाइल आकार) है और इसे बहुत सारे रंगों के बिना सरल चित्रों में उपयोग किया जाना चाहिए। जेपीईजी एक संपीड़ित (छोटे फ़ाइल आकार) है जो छवि गुणवत्ता को थोड़ा कम करता है लेकिन आकार में छोटा होता है, और इसका उपयोग बहुत सारे रंगों के साथ किया जाता है। जीआईएमपी और अन्य छवि संपादन कार्यक्रमों को स्वचालित रूप से सही प्रारूप का उपयोग करना चाहिए, लेकिन यह जानना अभी भी अच्छा है.

jpg_vs_png

द्वारा चित्रण Labnol

14. छवि फ़ाइल नाम

सर्च इंजन ऑल्ट टेक्स्ट और इमेज फाइल नाम दोनों का उपयोग करते हैं, इसलिए वर्डप्रेस पर अपलोड करने से पहले अपनी फाइलों को नाम दें। यदि आप एक प्लगइन का उपयोग कर रहे हैं कि स्वचालित रूप से Alt पाठ जोड़ता है फ़ाइल नाम के आधार पर, आपकी फ़ाइलों का नामकरण आपको बस इतना करना है! कीवर्ड न भरें, बस छवि का वर्णन करें.

लेबल छवि फ़ाइल नाम

15. ऑल्ट टेक्स्ट

ये आपकी छवि फ़ाइल नाम के समान होनी चाहिए। आप उपयोग कर सकते हैं स्वचालित छवि Alt गुण प्लगइन स्वचालित रूप से फ़ाइल नाम का उपयोग संपूर्ण पाठ के रूप में करने के लिए। जब तक आप प्रासंगिक छवियों का उपयोग कर रहे हैं, उनमें से कुछ को स्वाभाविक रूप से आपके कीवर्ड में (बिट्स) शामिल करना चाहिए … छवियों में कीवर्ड को सामान करने का कोई कारण नहीं है, जो एक जोखिम है खोजशब्द भराई दंड.

स्वचालित रूप से छवियों के लिए Alt पाठ जोड़ें – उपयोग स्वचालित छवि Alt गुण प्लगइन. अब जब भी आप कोई चित्र जोड़ते हैं, तो प्लगइन ऑल्ट टेक्स्ट जोड़ देगा जो फ़ाइल नाम के समान है …

alt ="WP-सबसे तेजी से कैश-प्लगइन" चौड़ाई ="577" ऊंचाई ="247" />

गुम Alt पाठ खोजें – चीखना मेंढक एक नि: शुल्क उपकरण है जो आपको सभी छवियों को लापता पाठ दिखाता है.

  • डाउनलोड चीखना मेंढक एसईओ स्पाइडर
  • अपनी वेबसाइट दर्ज करें और वेबसाइट को क्रॉल करने के लिए “प्रारंभ” पर क्लिक करें
  • छवियों टैब पर क्लिक करें
  • अवलोकन पर जाएं → लापता पाठ (निचे देखो)
  • अपनी साइट पर उन छवियों का पता लगाएँ और संपूर्ण पाठ जोड़ें

लापता छवि Alt पाठ - चीखना मेंढक

16. ओपन ग्राफ (फेसबुक + ट्विटर)

फेसबुक / ट्विटर पर साझा किए जाने पर यह आपकी सामग्री का प्रारूप ठीक से बनाता है, विशेष रूप से आपकी छवि क्योंकि दोनों नेटवर्क इसे प्रदर्शित करने के लिए कस्टम आयामों का उपयोग करते हैं, अन्यथा यह अजीब लगेगा.

फेसबुक साझा

यदि Yoast का उपयोग कर रहे हैं, तो “सामाजिक” सेटिंग पर जाएं और फेसबुक / ट्विटर दोनों के लिए ओपन ग्राफ़ सक्षम करें …

Yoast-सामाजिक-मेटा डेटा

अब एक पृष्ठ / पोस्ट को संपादित करें, फिर योस्ट में “शेयर” लिंक पर क्लिक करें और आपको फेसबुक (1200 चौड़ाई x 628 ऊंचाई) और ट्विटर (1024 चौड़ाई x 512 ऊंचाई) के लिए कस्टम चित्र अपलोड करने के विकल्प दिखाई देंगे।.

yoast-सामाजिक मीडिया अनुकूलन

17. विशेष रुप से स्निपेट्स में छवियां

विशेष रुप से प्रदर्शित स्निपेट्स जब Google आपकी सामग्री के बिट्स को खोज परिणामों के शीर्ष पर दिखाता है और एक छवि को शामिल करने के लिए (लेकिन गारंटी नहीं दी जाती है) कर सकते हैं. Google इन्हें किसी भी 1 पृष्ठ के परिणाम से खींचेगा, हालांकि यह उन पर निर्भर है कि वे एक चित्रित स्निपेट या छवि भी प्रदर्शित करेंगे या नहीं। ये आपके स्निपेट को दो बार दिखाते हैं और बहुत सारे ट्रैफ़िक प्राप्त करने का एक अविश्वसनीय तरीका है.

विशेष रुप से प्रदर्शित स्निपेट्स के 3 प्रकार

  • जवाब
  • टेबल्स
  • सूचियाँ

विशेष रुप से प्रदर्शित छवि-स्निपेट्स

Google में फीचर्ड स्निपेट कैसे प्राप्त करें

  • एक खोजशब्द को लक्षित करें जहाँ लोग चाहते हैं संक्षिप्त उत्तर
  • उपयोग मोज़ेक कीवर्ड एक्सप्लोरर प्रश्न खोजशब्दों की पहचान करने के लिए
  • और भी अधिक प्रश्नवाचक शब्द खोजने के लिए जनता के उत्तर का उपयोग करें
  • चुनें कि क्या उत्तर एक पैराग्राफ, सूची या तालिका होना चाहिए
  • कीवर्ड का वर्णन करते हुए एक अच्छा ग्राफिक डिज़ाइन करें (या फोटो लें)
  • इष्टतम वर्ण लंबाई का उपयोग करें (नीचे दी गई फ़ोटो देखें) Moz)
  • गुणवत्ता-संदर्भ (लिंक, ग्राफिक्स आदि) के साथ तथ्य-आधारित सामग्री बनाएं
  • ऐसे कीवर्ड लक्षित करें, जिनमें पहले से ही एक विशेष स्निपेट है, लेकिन एक खराब काम करते हैं
  • यदि आप उत्तर बॉक्स के लिए लक्ष्य कर रहे हैं, तो सटीक मिलान का उपयोग करके अपने कीवर्ड को लक्षित करें
  • सुनिश्चित करें कि आप कीवर्ड के लिए 1 पृष्ठ पर हैं, यदि नहीं, तो सामग्री में सुधार करें

वैकल्पिक विशेष रुप से प्रदर्शित स्निपेट लंबाई

18. संरचित डेटा

में छवियों का उपयोग किया जा सकता है संरचित डेटा (तथा बैज) निम्नलिखित सामग्री प्रकारों के लिए:

वीडियो रिच स्निपेट

पकाने की विधि-रिच स्निपेट्स

उत्पाद रिच स्निपेट

रिच स्निपेट्स प्लगिन मुझे क्या उपयोग करना चाहिए?
मैं उपयोग करता हूं MyThemeShop की WP समीक्षा प्रो (यहां एक पृष्ठ मैं इस पर उपयोग करता हूं) जो व्यंजनों और उत्पाद समीक्षाओं सहित 14 डेटा प्रकारों का समर्थन करता है। मैं WP रिच स्निपेट्स का उपयोग करता था लेकिन डेवलपर ने प्लगइन को छोड़ दिया और इसे 2+ वर्षों के लिए अपडेट नहीं किया गया, और सभी एक स्कीमा प्लगइन में बस उबाऊ है (इसमें विकल्पों और स्टाइल की कमी है)। WP Review Pro का उपयोग करना बहुत आसान है.

19. स्टाइल इमेज

अपनी छवियों को स्टाइल करना न भूलें! मैं ज्यादातर खदानों पर सीमाओं का उपयोग करता हूं.

  • छवि शीर्षक
  • छवि लिंक
  • छवि सीमाएँ
  • छवि कैप्शन

20. जीआईएफ का आकार बदलें

जैसे आप छवियों को सही आयामों में बदलते हैं, GIF का भी आकार बदला जाना चाहिए (उपयोग करें) जीआईएफ GIF).

GIF का आकार बदलें …

GIF का आकार बदलना

फिर इसे संकुचित करें …

GIF को संपीड़ित करें

परिणाम :-)

ऑप्टिमाइज़ डॉग जीआईएफ

21. कैश ग्रेवटार

अगर आपके पास बहुत सारी टिप्पणियों के साथ पोस्ट हैं, Gravatars आपकी रिपोर्ट को पूरी तरह से बर्बाद कर सकता है। आप उन्हें अक्षम कर सकते हैं, टिप्पणियों को केवल कुछ निश्चित टिप्पणियों को दिखाने के लिए तोड़ सकते हैं, या Gravatar cache plugin की कोशिश कर सकते हैं। आपको कुछ टेस्टिंग करने की आवश्यकता हो सकती है क्योंकि कुछ प्लगइन्स कुछ वेबसाइटों पर काम नहीं करते हैं.

  • कैश ग्रेवार्तर्स (अनुकूलतम, हैरी के, या FV Gravatar कैश)
  • Gravatars को पूरी तरह से अक्षम करें
  • अपने डिफ़ॉल्ट Gravatar को रिक्त पर सेट करें
  • उन टिप्पणियों को हटाएं जो मूल्य नहीं जोड़ते हैं
  • अपने सर्वर पर एक कस्टम छवि के लिए अपने डिफ़ॉल्ट Gravatar सेट करें
  • अपने Gravatar चित्रों को छोटे आयामों में प्रतिबंधित करें (उदा। 32px)
  • WP में Paginate टिप्पणियाँ एक बार में केवल 20 टिप्पणियाँ दिखाने में अक्षम
  • यदि इनमें से कोई भी काम नहीं करता है, तो देखें WP रॉकेट के कैचिंग Gravatars ट्यूटोरियल

कैश-Gravatar है छवियाँ

22. बाहरी वेबसाइट से इमेज को एम्बेड करने से बचें

हमेशा अपनी वेबसाइट पर चित्र अपलोड करें, उन्हें कभी भी कॉपी / पेस्ट न करें। अन्यथा आप अतिरिक्त अनुरोधों के साथ समाप्त होते हैं क्योंकि छवि आपके सर्वर पर होस्ट नहीं की जाती है इसलिए इसे कहीं और से खींचना होगा.

23. छवि अनुकूलन उपकरण

डुप्लिकेट कार्यक्षमता वाले प्लगइन्स का उपयोग करने से बचें – कल्पना कीजिए, शॉर्टपिक्सल, क्रैकन, ईडब्ल्यूडब्ल्यूडब्ल्यू और स्मश सभी मूल रूप से एक ही काम करते हैं (दोषरहित संपीड़न, एक्सआईएफ डेटा हटाने, छवियों का आकार बदलें)। WP रॉकेट में आलसी लोड, कैशिंग और सीडीएन (और डेटाबेस क्लीनअप + स्थानीय रूप से Google Analytics की मेजबानी) के विकल्प हैं, जो कि अधिकांश कैश प्लगइन्स नहीं करते हैं, जो आपको अतिरिक्त प्लगइन्स का उपयोग करने से बचाते हैं।.

  • बहुत बढ़िया स्क्रीनशॉट – स्क्रीनशॉट लेने के लिए क्रोम एक्सटेंशन.
  • स्वचालित छवि Alt विशेषताएँ – छवि फ़ाइल नाम का उपयोग करके स्वचालित रूप से संपूर्ण पाठ सम्मिलित करता है.
  • बेहतर खोज बदलें – इसका उपयोग बल्क अपडेट इमेज में करें.
  • CloudFlare 200 + डेटा केंद्रों के साथ मुफ्त सीडीएन, हॉटलिंक संरक्षण, मृगतृष्णा, चमकाने.
  • क्रोम DevTools – यदि आपके पास GTmetrix रीडायरेक्ट त्रुटियां हैं, तो उपयोग किए जा रहे डोमेन दिखाता है.
  • सीएसएस स्प्राइट जेनरेटर – 1 सीएसएस स्प्राइट में कई छवियों के संयोजन के लिए नि: शुल्क उपकरण.
  • EWWW छवि अनुकूलक – दोषरहित संपीड़न, EXIF ​​निष्कासन, आकार बदलना.
  • GifGifs – जीआईएफ का आकार बदलता है.
  • GIMP – फ्री इमेज एडिटिंग सॉफ्टवेयर जो मैं उपयोग करता हूं.
  • GTmetrix – आपको दिखाता है कि किन छवियों को अनुकूलित करने की आवश्यकता है.
  • Imagify – दोषरहित संपीड़न, EXIF ​​निष्कासन, आकार बदलना.
  • Imsanity – जीटीमेट्रिक्स में “स्केल की गई छवियों की सेवा” को ठीक करने के लिए बड़ी छवि का आकार बदलता है.
  • Kraken – दोषरहित संपीड़न, EXIF ​​निष्कासन, आकार बदलना.
  • हल्का भार – प्लगइन जब तक वे दृश्यमान नहीं हो जाते, तब तक छवियों को लोड करने में देरी करते हैं.
  • वीडियो के लिए आलसी लोड – प्लगइन जो वीडियो के लोड होने में देरी करता है जब तक कि वे दृश्यमान नहीं हो जाते.
  • इष्टतम Gravatar कैश – Gravatars कैश (या प्रयास करें हैरी का ग्रेवटर कैश).
  • चीखना मेंढक एसईओ स्पाइडर – लापता अल्ट टेक्स्ट, मेटा डिस्क्रिप्शन इत्यादि का पता लगाएं.
  • ShortPixel – दोषरहित संपीड़न, EXIF ​​निष्कासन, आकार बदलना.
  • Smush – दोषरहित संपीड़न, EXIF ​​निष्कासन, आकार बदलना.
  • StackPath – 31 डेटा केंद्रों के साथ $ 10 / माह सीडीएन.
  • स्विफ्ट प्रदर्शन लाइट – अधिकांश फेसबुक चुनावों में # 1 मुफ्त कैश प्लगइन.
  • WP समीक्षा – समृद्ध स्निपेट प्लगइन (खोज परिणामों में चित्र दिखाने में मदद करता है).
  • WP रॉकेट – अधिकांश फेसबुक चुनावों में # 1 कैश प्लगइन.
  • VA निष्कासन – छवियों से अनावश्यक डेटा स्ट्रिप्स.
  • ज़ूम  -स्क्रीनशॉट लेते समय सही ज़ूम प्राप्त करने के लिए क्रोम एक्सटेंशन.
  • Yoast – फेसबुक / ट्विटर मेटा डेटा को सक्षम करता है ताकि साझा किए जाने पर छवियों को ठीक से प्रारूपित किया जा सके.

बार बार पूछे जाने वाले प्रश्न

&# X2705; आप GTmetrix में ऑप्टिमाइज़ इमेज त्रुटियों को कैसे ठीक करते हैं?

ShortPixel, Imagify, या Smush जैसे प्लगइन का उपयोग करके दोषरहित रूप से उन्हें संपीड़ित करके। मैं शॉर्टपिक्सल का उपयोग करता हूं क्योंकि यह हमेशा जीटीमेट्रिक्स में इस त्रुटि को ठीक करता है.

&# X2705; जीटीमेट्रिक्स में आप सीरियस स्केल्ड इमेज त्रुटियों को कैसे ठीक करते हैं?

इसका मतलब है कि आपको चित्रों को सही आयामों में बदलने / आकार देने की आवश्यकता है। यदि चित्र बहुत बड़े हैं, तो GTmetrix स्केल की गई छवि त्रुटियों को दिखाएगा और आपको सही आयाम बताएगा कि उन्हें किस आकार का होना चाहिए.

&# X2705; आप GTmetrix में इमेज डाइमेंशन की त्रुटियों को कैसे ठीक करते हैं?

छवि का एचटीएमएल देखें और यह सुनिश्चित करने के लिए जांचें कि इसमें एक निर्दिष्ट चौड़ाई और ऊंचाई है, जैसा कि इस ट्यूटोरियल में दिखाया गया है.

&# X2705; छवियों को और अधिक तेजी से लोड करने का कोई अन्य तरीका?

EXIF डेटा निकालना और अपनी छवियों की सेवा करने के लिए CDN का उपयोग करने से GTmetrix में सिफारिशों के बाहर सबसे अधिक फर्क पड़ेगा.

&# X2705; कौन सा छवि अनुकूलन सबसे अच्छा है?

मैं शॉर्टपिक्सल का उपयोग करता हूं क्योंकि गुणवत्ता में लगभग शून्य नुकसान है और यह जीटीमेट्रिक्स में ऑप्टिमाइज़ इमेज आइटम को ठीक करता है.

तुम क्या सोचते हो?
क्या आपकी GTmetrix रिपोर्ट थोड़ी बेहतर दिखती है? टिप्पणियों में क्या है मुझे जानने दें! और यदि आप अधिक युक्तियां चाहते हैं जो आपको बेहतर स्कोर / लोड समय प्राप्त करेंगे, तो मेरा पूरा वर्डप्रेस स्पीड गाइड देखें.

चियर्स,
टॉम

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map