ओपन ग्राफ़ छवियाँ

हर पेज के लिए जनरेट किए गए 1200×630 सोशल कार्ड — ब्रांडिंग, कार्ड परतें, ग़ैर-लैटिन लिपियों के लिए फ़ॉन्ट, और प्रति-पेज ओवरराइड।

Blume बिल्ड समय पर हर पेज के लिए एक 1200×630 सोशल कार्ड रेंडर कर सकता है — Takumi की बदौलत कोई हेडलेस ब्राउज़र नहीं, इसलिए बिल्ड तेज़ बने रहते हैं। यह डिफ़ॉल्ट रूप से चालू रहता है जब deployment.site सेट हो या स्वतः पहचान लिया जाए (og:image URL को क्रॉलर के लिए उपयोगी होने हेतु निरपेक्ष होना ही चाहिए), अन्यथा बंद रहता है। इसे किसी भी दिशा में ओवरराइड करने के लिए enabled सेट करें:

seo: {
  og: { enabled: true }, // or false to opt out even with a site set
}

जनरेट किए गए कार्ड पर ब्रांडिंग करें

जनरेट किए गए कार्ड को अपने ब्रांड से मिलाने के लिए एक स्थानीय SVG और रंग पैलेट सेट करें। लोगो public/ में या प्रोजेक्ट रूट पर रह सकता है। किसी भी पैलेट मान को छोड़ दें तो उसका डिफ़ॉल्ट बना रहेगा।

seo: {
  og: {
    logo: "/logo/og.svg",
    palette: {
      accent: "#ff5410",
      background: "#1d1d1d",
      foreground: "#fff6f2",
      muted: "#a6a19f",
      border: "#323232",
    },
  },
}

डिफ़ॉल्ट रूप से, प्रत्येक कार्ड आपकी सामग्री और थीम से लिया जाता है — शीर्षपंक्ति के रूप में पेज शीर्षक, उपशीर्षक के रूप में पेज विवरण (वही टेक्स्ट जो उसका og:description है, इसलिए seo.description description पर भारी पड़ता है), आइब्रो के रूप में आपका साइट शीर्षक, और चिह्न के लिए आपका थीम accent। छवियाँ /og/<slug>.png पर परोसी जाती हैं, जो हर रूट को प्रतिबिंबित करती हैं, और सर्वर मोड में भी स्थिर फ़ाइलों के रूप में प्रीरेंडर की जाती हैं:

किसी भी पेज के लिए जनरेट किए गए कार्ड को seo.image से ओवरराइड करें — public/ में मौजूद कोई फ़ाइल या कोई बाहरी URL। यह जनरेट किए गए कार्ड पर प्राथमिकता लेता है और तब भी काम करता है जब og बंद हो, ताकि आप कस्टम छवियों को जनरेट की गई छवियों के साथ मिला सकें:

---
title: Pricing
seo:
  image: /og/pricing-custom.png
---

पेज शीर्षक या साइट शीर्षक में मौजूद इमोजी Twemoji ग्लिफ़ के रूप में रेंडर होते हैं, जो कार्ड रेंडर होते समय किसी CDN से लाए जाते हैं — इसलिए जिस बिल्ड के शीर्षकों में इमोजी हों, उसे नेटवर्क पहुँच चाहिए। प्रत्येक ग्लिफ़ प्रति बिल्ड एक ही बार लाया जाता है, चाहे उसे कितने भी पेज उपयोग करें।

कार्ड परतें दिखाएँ, छिपाएँ, या ओवरराइड करें

शीर्षपंक्ति के अलावा, कार्ड तीन वैकल्पिक परतें वहन करता है: ऊपर-बाएँ ब्रांड चिह्न (आपका लोगो, या साइट शीर्षक के पहले अक्षर वाली accent टाइल), शीर्षपंक्ति के नीचे उपशीर्षक (पेज का description, या जिन पेजों में यह न हो उनके लिए आपकी साइट का description), और आपके रेपो स्लग (github से) तथा साइट के URL सहित एक फ़ुटर — डिप्लॉयमेंट साइट का होस्ट और deployment.base, ताकि कोई GitHub Pages प्रोजेक्ट साइट user.github.io/repo के रूप में पढ़ी जाए। इनमें से किसी को भी अपनी किसी स्ट्रिंग से ओवरराइड करें, या false से किसी एक को छिपाएँ:

seo: {
  og: {
    site: "docs.acme.com", // footer URL text, or false to hide it
    description: false, // hide the subtitle on every card; a string replaces the site fallback
    logo: false, // no brand mark at all — not even the initial tile
  },
}

कार्ड फ़ॉन्ट

डिफ़ॉल्ट रूप से कार्ड Takumi के अंतर्निर्मित फ़ॉन्ट में रेंडर होता है, जो केवल लैटिन ग्लिफ़ को कवर करता है — किसी अन्य लिपि (जापानी, चीनी, कोरियाई, अरबी, …) का शीर्षक टोफू, यानी खाली डिब्बों, के रूप में रेंडर होगा।

theme.fonts सेट कीजिए और कार्ड उसी का अनुसरण करेगा। जब आपका कॉन्फ़िग अपने फ़ॉन्ट चुनता है, तो जनरेट किए गए कार्ड स्वतः ही शीर्षपंक्ति को आपके डिस्प्ले फ़ॉन्ट में तथा विवरण और फ़ुटर को आपके बॉडी फ़ॉन्ट में रेंडर करते हैं, ताकि साझा किए गए लिंक साइट से मेल खाएँ — ग़ैर-लैटिन कवरेज सहित, और यहाँ कुछ भी कॉन्फ़िगर करने की ज़रूरत नहीं। (ग़ैर-Google प्रदाताओं के फ़ैमिली छोड़ दिए जाते हैं — कार्ड रेंडरर केवल Google Fonts से ला सकता है — लेकिन स्थानीय फ़ॉन्ट फ़ाइलें काम करती हैं।)

कार्ड पर साइट से अलग फ़ॉन्ट उपयोग करने के लिए, या थीम को छुए बिना लिपि कवरेज जोड़ने के लिए, og.fonts स्पष्ट रूप से सेट करें — यह हमेशा थीम-व्युत्पन्न फ़ॉन्ट पर भारी पड़ता है:

seo: {
  og: {
    fonts: [
      "Noto Sans JP",
      { name: "Inter", weight: [400, 700] },
      { name: "Berkeley Mono", src: "./fonts/BerkeleyMono-Regular.woff2" },
    ],
  },
}

प्रत्येक प्रविष्टि या तो एक Google Fonts फ़ैमिली नाम है, या एक ऑब्जेक्ट जो उसका weight (एक संख्या, एक सूची, या "100..900" जैसी वेरिएबल रेंज) और style ("normal", "italic", या दोनों) तय करता है, या एक स्थानीय फ़ॉन्ट फ़ाइल — src प्रोजेक्ट रूट से हल होता है, और वैकल्पिक weight तथा style के साथ जब फ़ाइल का अपना मेटाडेटा निर्णय न करे।

Google फ़ैमिली बिल्ड के समय लाए जाते हैं — इसलिए जो बिल्ड इनका उपयोग करता है उसे नेटवर्क पहुँच चाहिए — और रेंडरर केवल वही ग्लिफ़ सबसेट खींचता है जिनका प्रत्येक शीर्षक वास्तव में उपयोग करता है। फ़ॉलबैक प्रति-ग्लिफ़ होता है, इसलिए कोई फ़ैमिली जोड़ने से केवल उन्हीं ग्लिफ़ पर असर पड़ता है जिन्हें अन्य फ़ॉन्ट नहीं बना सकते।

स्पष्ट og.fonts: [] पूरी तरह से बाहर निकलने का विकल्प है: theme.fonts सेट होने पर भी कार्ड अंतर्निर्मित फ़ॉन्ट ही रखते हैं।

कस्टम पेज शीर्षक

किसी कस्टम .astro पेज में पढ़ने के लिए कोई फ़्रंटमैटर नहीं होता, इसलिए उसके जनरेट किए गए कार्ड का शीर्षक उसके रूट के अंतिम URL खंड को मानवीय रूप देकर बनाया जाता है — /getting-started “Getting Started” बन जाता है, लेकिन /cli “Cli” बन जाता है। उन कार्डों को og.titles से स्पष्ट रूप से नाम दें, जो रूट के अनुसार कुंजीबद्ध है ("/" होम को संबोधित करता है, जिसका कार्ड अन्यथा साइट शीर्षक वहन करता है):

seo: {
  og: {
    titles: {
      "/cli": "CLI",
    },
  },
}

प्रविष्टियाँ केवल कस्टम पेजों पर लागू होती हैं — किसी सामग्री पेज का कार्ड अपनी शीर्षपंक्ति हमेशा पेज शीर्षक से लेता है, इसलिए उनका शीर्षक इसके बजाय फ़्रंटमैटर में बदलें।

seo.image फ़्रंटमैटर है, इसलिए यह केवल Markdown और MDX सामग्री को कवर करता है। किसी कस्टम .astro पेज को उसकी अपनी सोशल छवि देने के लिए — कोई मार्केटिंग होम या लैंडिंग पेज, और केवल होम पेज को एक विशेष शेयर छवि देने का तरीका — PageLayout को ogImage प्रॉप पास करें।