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

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

```ts blume.config.ts lineNumbers
seo: {
  og: { enabled: true }, // or false to opt out even with a site set
}
```

## जनरेट किए गए कार्ड पर ब्रांडिंग करें [#brand-the-generated-card]

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

```ts blume.config.ts lineNumbers
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` पर परोसी जाती हैं, जो हर रूट को प्रतिबिंबित करती हैं, और सर्वर मोड में भी स्थिर फ़ाइलों के रूप में प्रीरेंडर की जाती हैं:

| पेज रूट          | छवि URL                 |
| ---------------- | ----------------------- |
| `/`              | `/og/index.png`         |
| `/quickstart`    | `/og/quickstart.png`    |
| `/guides/deploy` | `/og/guides/deploy.png` |

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

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

:::note
प्रत्येक पैलेट रंग कोई भी CSS रंग स्वीकार करता है — hex, `oklch(…)`, `rgb(…)`, इत्यादि। accent एक नामित प्रीसेट (`blue`, `teal`, …) भी स्वीकार करता है, जो [`theme.accent`](/docs/configuration/theming#accent) से मेल खाता है। जिस रंग को रेंडरर पार्स नहीं कर पाता, वह चुपचाप डिफ़ॉल्ट-रंग वाला कार्ड भेजने के बजाय बिल्ड को विफल कर देता है।
:::

पेज शीर्षक या साइट शीर्षक में मौजूद इमोजी [Twemoji](https://github.com/jdecked/twemoji) ग्लिफ़ के रूप में रेंडर होते हैं, जो कार्ड रेंडर होते समय किसी CDN से लाए जाते हैं — इसलिए जिस बिल्ड के शीर्षकों में इमोजी हों, उसे नेटवर्क पहुँच चाहिए। प्रत्येक ग्लिफ़ प्रति बिल्ड एक ही बार लाया जाता है, चाहे उसे कितने भी पेज उपयोग करें।

## कार्ड परतें दिखाएँ, छिपाएँ, या ओवरराइड करें [#show-hide-or-override-card-layers]

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

```ts blume.config.ts lineNumbers
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
  },
}
```

## कार्ड फ़ॉन्ट [#card-fonts]

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

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

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

```ts blume.config.ts lineNumbers
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` सेट होने पर भी कार्ड अंतर्निर्मित फ़ॉन्ट ही रखते हैं।

## कस्टम पेज शीर्षक [#custom-page-titles]

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

```ts blume.config.ts lineNumbers
seo: {
  og: {
    titles: {
      "/cli": "CLI",
    },
  },
}
```

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

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