अपने पेज के head को निखारें: title, description, favicon और सुरक्षित बाहरी लिंक।
इस पाठ को Kodokon में खोलेंआपके पेज पर आने से पहले ही, लोग इसे कहीं और देखते हैं: एक ब्राउज़र टैब में, सर्च परिणामों में, एक साझा किए गए लिंक में। यह सब head में होता है। एक अच्छी तरह तैयार किया गया head एक शौकिया साइट और एक पेशेवर साइट के बीच का अंतर है।
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Quick Recipes | Lea's Kitchen</title>
<meta
name="description"
content="30 recipes ready in 20 minutes flat,
tested by our readers."
>
</head>title टैब में, बुकमार्क में और सर्च परिणामों में दिखता है: इसे हर पेज के लिए अद्वितीय, वर्णनात्मक बनाएं, विषय को पहले रखते हुए और लगभग 60 अक्षरों में। meta description वह टेक्स्ट है जो सर्च इंजन में title के नीचे दिखाया जाता है: 150 अक्षरों का लक्ष्य रखें जो लोगों को क्लिक करने के लिए प्रेरित करें।
favicon वह छोटा आइकन है जो टैब में और बुकमार्क में दिखता है। आधुनिक अभ्यास: साइट की जड़ में एक फ़ॉलबैक favicon.ico, एक SVG संस्करण जो हर आकार पर तीखा बना रहता है, और Apple होम स्क्रीन के लिए एक समर्पित आइकन।
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">एक आख़िरी पेशेवर आदत: बाहरी लिंक। target="_blank" के साथ किसी लिंक को नए टैब में खोलना खुले हुए पेज को window.opener तक, और इसलिए आपके पेज तक, संभावित पहुंच देता है। उस कड़ी को तोड़ने और रेफ़रिंग पते को आगे न भेजने के लिए rel="noopener noreferrer" जोड़ें।
<a
href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer"
>
MDN documentation (new tab)
</a>