कई सर्च इंजन, पेजों को इस आधार पर रैंक करते हैं कि वे मोबाइल-फ़्रेंडली हैं या नहीं. व्यूपोर्ट मेटा टैग के बिना, मोबाइल डिवाइस डेस्कटॉप की सामान्य चौड़ाई में पेजों को रेंडर करते हैं. इसके बाद, पेजों को छोटा करके, उन्हें पढ़ना मुश्किल बना देते हैं.
व्यूपोर्ट मेटा टैग को सेट करके, व्यूपोर्ट की चौड़ाई और स्केलिंग को कंट्रोल किया जा सकता है, ताकि सभी डिवाइस पर इसका साइज़ सही तरीके से हो.
लाइटहाउस व्यूपोर्ट मेटा टैग ऑडिट कैसे काम नहीं करता है
Lighthouse, व्यूपोर्ट मेटा टैग के बिना पेजों को फ़्लैग करता है:
पेज तब तक ऑडिट नहीं कर पाता, जब तक ये सभी शर्तें पूरी नहीं होती हैं:
- दस्तावेज़ के <head> में <meta name="viewport"> टैग मौजूद है.
- व्यूपोर्ट मेटा टैग में एक content एट्रिब्यूट शामिल होता है.
- content एट्रिब्यूट की वैल्यू में width= टेक्स्ट शामिल है.
व्यूपोर्ट मेटा टैग जोड़ने का तरीका
अपने पेज के <head> में सही कुंजी-वैल्यू पेयर वाला व्यूपोर्ट <meta> टैग जोड़ें:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
यहां बताया गया है कि हर एक की-वैल्यू पेयर क्या करता है:
- width=device-width, व्यूपोर्ट की चौड़ाई को डिवाइस की चौड़ाई पर सेट करता है.
- जब उपयोगकर्ता पेज पर जाता है, तो initial-scale=1 शुरुआती ज़ूम लेवल सेट करता है.