Content-Type: text/html; charset=utf-8 के साथ एक HTML दस्तावेज़ प्रस्तुत करें, जिसके दस्तावेज़ के head में उसका शीर्षक और विवरण हों और body में पढ़ने योग्य सामग्री हो। Mac के लिए यह वॉकथ्रू एक काल्पनिक पेज बनाता है और जाँचता है कि एक ही प्रतिक्रिया में ये तीनों मौजूद हैं।

इस कार्य में ब्राउज़र में पढ़ा जा सकने वाला सार्वजनिक दस्तावेज़ तैयार करना शामिल है। उसी संरचना को किसी प्रकाशन प्रणाली में स्थानांतरित करने से पहले स्थानीय पूर्वावलोकन का उपयोग करें। उदाहरण में कागज़ की आकृतियों के बारे में केवल काल्पनिक पाठ है और किसी बाहरी संसाधन की आवश्यकता नहीं है।

एक ही टाइप की गई HTTP प्रतिक्रिया में क्या शामिल होता है?

“टाइप की गई” का अर्थ है कि प्रतिक्रिया अपना मीडिया प्रकार घोषित करती है। Content-Type फ़ील्ड प्राप्तकर्ता को प्रतिनिधित्व का फ़ॉर्मैट और उसे संसाधित करने का अपेक्षित तरीका बताती है। यहाँ वह फ़ॉर्मैट HTML है। यह फ़ील्ड-दर-फ़ील्ड ऐप्लिकेशन स्कीमा उपलब्ध नहीं कराता। RFC 9110, section 8.3

HTTP/1.1 प्रतिक्रिया में एक status line, header fields, एक खाली पंक्ति और वैकल्पिक body होता है। इसलिए, अलग मेटाडेटा अनुरोध बनाए बिना, आप headers में परिवहन मेटाडेटा और body में पूरा दस्तावेज़ भेज सकते हैं। RFC 9112, section 2.1

इस प्रकाशन कार्य के लिए, नीचे दिए गए स्थान-निर्धारण मार्गदर्शक का उपयोग करें। यह HTTP प्रतिनिधित्व का वर्णन करने वाली जानकारी को पेज का वर्णन करने वाली जानकारी से अलग करता है।

जानकारी स्थान उदाहरण
प्रतिनिधित्व का फ़ॉर्मैट और एन्कोडिंग HTTP header Content-Type: text/html; charset=utf-8
दस्तावेज़ का शीर्षक HTML head <title>कागज़ की आकृतियाँ: वृत्त और वर्ग</title>
पेज का सारांश HTML head <meta name="description" content="A short guide to arranging paper circles and squares.">
पाठक के लिए सामग्री HTML body शीर्षक, परिचय और आकृतियाँ सजाने के निर्देश

WHATWG के अनुसार, title element दस्तावेज़ का शीर्षक या नाम होता है और description मेटाडेटा मान पेज का विवरण होता है। एक title और अधिकतम एक description घोषणा का उपयोग करें। HTML दस्तावेज़ के भीतर उनका स्थान होने के कारण, सामग्री और वर्णनात्मक मेटाडेटा साथ-साथ भेजे जाते हैं। HTML Standard: Document metadata

Mac पर काम करने वाला पूर्वावलोकन कैसे बनाएँ?

Terminal खोलें और उपलब्ध कमांड जाँचें:

python3 --version
curl --version

नीचे दिए गए प्रोग्राम के लिए Python 3.7 या उसके बाद का संस्करण चाहिए और यह केवल इसकी मानक लाइब्रेरी का उपयोग करता है। यदि python3 उपलब्ध नहीं है, तो macOS के लिए आधिकारिक इंस्टॉलेशन निर्देशों का पालन करें और फिर Terminal दोबारा खोलें। Python के दस्तावेज़ों में इंस्टॉलर और टर्मिनल से python3 चलाने, दोनों के बारे में बताया गया है। Using Python on macOS

नीचे दिया गया पूरा ब्लॉक Terminal में पेस्ट करें। इसमें शुरुआती कमांड और आखिरी PY पंक्ति भी शामिल करें। इससे प्रोग्राम सीधे चलता है; कोई फ़ाइल बनाई या ओवरराइट नहीं होती। पेज जाँचते समय इस टर्मिनल विंडो को चालू रखें।

python3 - <<'PY'
from html import escape
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer

TITLE = "Paper Shapes: Circle and Square"
SUMMARY = "A short guide to arranging paper circles and squares."
PAGE = f"""<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{escape(TITLE)}</title>
<meta name="description" content="{escape(SUMMARY, quote=True)}">
</head>
<body>
<main>
<h1>{escape(TITLE)}</h1>
<p>{escape(SUMMARY)}</p>
<h2>Try a simple arrangement</h2>
<p>Place one paper circle beside one paper square.</p>
<p>Switch their positions — then compare the two arrangements.</p>
</main>
</body>
</html>
""".encode("utf-8")

class Handler(BaseHTTPRequestHandler):
    protocol_version = "HTTP/1.1"

    def respond(self, include_body):
        if self.path != "/paper-shapes":
            self.send_error(404, "Page not found")
            return
        self.send_response(200)
        self.send_header("Content-Type", "text/html; charset=utf-8")
        self.send_header("Content-Length", str(len(PAGE)))
        self.end_headers()
        if include_body:
            self.wfile.write(PAGE)

    def do_GET(self):
        self.respond(True)

    def do_HEAD(self):
        self.respond(False)

if __name__ == "__main__":
    with ThreadingHTTPServer(("127.0.0.1", 8000), Handler) as server:
        print("Preview: http://127.0.0.1:8000/paper-shapes", flush=True)
        try:
            server.serve_forever()
        except KeyboardInterrupt:
            pass
PY

यह हैंडलर Python की दस्तावेज़ित प्रतिक्रिया विधियों का उपयोग करता है: send_response() प्रतिक्रिया शुरू करता है, send_header() फ़ील्ड जोड़ता है और end_headers() body के बाइट लिखे जाने से पहले header अनुभाग पूरा करता है। Python HTTP server documentation

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

लंबाई की गणना करने से पहले पेज को एन्कोड किया जाता है। HTTP में Content-Length ऑक्टेट यानी बाइट में बताई जाती है; वर्णों की गिनती करने पर इस उदाहरण के em dash के लिए गलत परिणाम मिलेगा। RFC 9110, section 8.6

कैसे जाँचें कि सामग्री और मेटाडेटा साथ पहुँचे?

एक दूसरी Terminal विंडो खोलें और यह कमांड चलाएँ। यह सामान्य दस्तावेज़ अनुरोध भेजता है और प्रतिक्रिया के headers तथा सामग्री, दोनों दिखाता है:

curl -i --max-time 10 http://127.0.0.1:8000/paper-shapes

-i विकल्प प्रतिक्रिया के headers को body वाली उसी आउटपुट स्ट्रीम में शामिल करता है। समय-सीमा से स्थानांतरण दस सेकंड तक सीमित रहता है। इन विकल्पों का विवरण curl command-line manual में दिया गया है।

आउटपुट को क्रम से जाँचें:

  1. Status line में 200 OK दिखना चाहिए।
  2. एक ही Content-Type फ़ील्ड में text/html; charset=utf-8 घोषित होना चाहिए।
  3. Header अनुभाग की खाली पंक्ति के बाद, HTML में शीर्षक और विवरण होना चाहिए।
  4. उसी body में कागज़ की आकृतियों के निर्देश भी होने चाहिए।
  5. डिकोड किए गए पाठ में em dash सही दिखाई देना चाहिए।

इसके बाद Safari के address bar में http://127.0.0.1:8000/paper-shapes दर्ज करें। दिखने वाले पेज में शीर्षक, सारांश और निर्देश होने चाहिए। विवरण की घोषणा मेटाडेटा है; इसकी मौजूदगी लौटाए गए markup में जाँची जाती है, पेज के दिखने के ढंग से इसका अनुमान नहीं लगाया जाता।

आप केवल headers वाला पथ भी जाँच सकते हैं:

curl -I --max-time 10 http://127.0.0.1:8000/paper-shapes

इससे HEAD भेजा जाता है, इसलिए यह पुष्टि नहीं कर सकता कि body में शीर्षक या विवरण मौजूद है। HEAD प्रतिक्रिया में सामग्री नहीं होती, हालाँकि वह संबंधित प्रतिनिधित्व का वर्णन करती है; वास्तविक दस्तावेज़ देखने के लिए पहले वाली GET जाँच का उपयोग करें। RFC 9110, section 8.2

अगर पूर्वावलोकन काम न करे, तो लक्षण के आधार पर अगला कदम चुनें:

लक्षण अगला कदम
शुरू करते समय पता पहले से उपयोग में होने की सूचना मिलती है प्रोग्राम में 8000 को 8001 से बदलें, उसे दोबारा चलाएँ और हर पूर्वावलोकन कमांड में 8001 का उपयोग करें।
अनुरोध में कनेक्शन विफल होने की सूचना मिलती है जाँचें कि पहली टर्मिनल विंडो में पूर्वावलोकन अभी चल रहा है और पोर्ट मेल खाते हैं।
प्रतिक्रिया 404 है ठीक /paper-shapes का उपयोग करें; यह उदाहरण अंत में स्लैश या क्वेरी स्ट्रिंग स्वीकार नहीं करता।
ब्राउज़र में अब भी पुराना संस्करण दिखता है प्रोग्राम को Control-C से रोकें, संपादित ब्लॉक दोबारा चलाएँ और पेज रीलोड करें।
शीर्षक सही दिखता है, लेकिन मेटाडेटा मौजूद नहीं है GET आउटपुट देखें और पुष्टि करें कि घोषणाएँ दस्तावेज़ के head के भीतर हैं।

Google Search इस प्रतिक्रिया से क्या उपयोग कर सकता है?

वर्णनात्मक शीर्षक, सटीक विवरण और उपयोगी दिखने वाला पाठ, पेज प्रस्तुत करने के लिए Google को दस्तावेज़ित इनपुट देते हैं। Google अपने आप title links बनाने के लिए title element, मुख्य दृश्य शीर्षक, heading elements और अन्य स्रोतों को इनपुट में शामिल करता है। इन सभी संकेतों को दस्तावेज़ के विषय के अनुरूप रखें। Influencing your title links in search results

Google snippets मुख्य रूप से पेज की सामग्री से बनाता है और कभी-कभी meta description का उपयोग करता है, यदि वह पेज का अधिक सटीक वर्णन करे। अलग-अलग खोजों में अलग snippets दिख सकते हैं। विवरण को उपयोगी सारांश मानें, खोज परिणाम में दिखने वाला तयशुदा कैप्शन नहीं। Control your snippets in search results

काल्पनिक उदाहरण में विवरण एक छोटी सजावट मार्गदर्शिका का वादा करता है और body में वह मार्गदर्शिका दी गई है। नमूना पाठ बदलते समय इस संबंध की स्पष्ट जाँच करें: केवल विवरण पढ़ने वाले व्यक्ति को पेज के बारे में सटीक अपेक्षा बननी चाहिए।

कस्टम मेटाडेटा नाम जोड़ने से यह साबित नहीं होता कि उनके लिए समर्थन उपलब्ध है। Google बताता है कि वह उन meta tags को अनदेखा करता है जिनका वह समर्थन नहीं करता। खोज से जुड़े मेटाडेटा के लिए उसके दस्तावेज़ित फ़ील्ड का उपयोग करें; आपके अपने ऐप्लिकेशन के लिए गढ़े गए फ़ील्ड के लिए अलग से उपभोक्ता तय करना होगा। Meta tags and attributes that Google supports

पूर्वावलोकन सार्वजनिक प्रकाशन की प्रणाली कैसे बनता है?

इस वॉकथ्रू में दिया गया स्थानीय पता डेस्कटॉप पूर्वावलोकन है, प्रकाशित पेज नहीं। Python यह भी बताता है कि http.server को उत्पादन में इस्तेमाल करने की सलाह नहीं दी जाती। इस प्रदर्शन को सार्वजनिक होस्टिंग सेवा बनाने के बजाय, HTML संरचना और प्रतिक्रिया संबंधी आवश्यकताएँ अपनी प्रकाशन प्रणाली में स्थानांतरित करें। Python HTTP server documentation

अगर आप कंटेंट मैनेजमेंट सिस्टम का उपयोग करते हैं, तो उसमें दस्तावेज़ित page-title और meta-description नियंत्रण खोजें। Google बताता है कि CMS में सीधे HTML संपादित करने के बजाय खोज सेटिंग उपलब्ध हो सकती हैं। उन नियंत्रणों को यहाँ दिखाए गए फ़ील्ड से जोड़ें, फिर परिणामी दस्तावेज़ प्रतिक्रिया की जाँच करें। Google’s guidance on adding meta descriptions

HTTP में multipart representations समर्थित हैं, लेकिन पैकेजिंग का वह अलग विकल्प है। ब्राउज़र में पढ़े जा सकने वाले इस दस्तावेज़ के लिए, समर्थित HTML संरचना में एक ही प्रतिनिधित्व के भीतर सामग्री और दस्तावेज़ मेटाडेटा शामिल किए जा सकते हैं। multipart चुनने से उपभोक्ता के लिए प्रसंस्करण की ऐसी आवश्यकता पैदा होगी जिसकी इस वॉकथ्रू को ज़रूरत नहीं है। RFC 9110, section 8.3.3

काम पूरा होने की ठोस जाँच यह है: दस्तावेज़ के एक सफल अनुरोध में सही मीडिया प्रकार, पूरा HTML body, सटीक शीर्षक और विवरण, और वह पाठ लौटे जिसे पढ़ने के लिए पाठक आए हैं। यही जाँच स्थानीय पूर्वावलोकन के साथ-साथ बाद में प्रकाशित सार्वजनिक प्रतिक्रिया पर भी लागू करें, ताकि प्रकाशन प्रणाली का आउटपुट आपके तैयार किए दस्तावेज़ से मेल खाए।

स्रोत