ह्यूगो स्टैटिक साइट जनरेटर में ओपनग्राफ इमेज मेटाडेटा
ह्यूगो में ओपनग्राफ मेटाडेटा कैसे जोड़ा जाए?
Opengraph image metadata
होगा मेटा प्रॉपर्टी og:image।
बुनियादी रूप से, हम अपने ह्यूगो-आधारित वेबसाइट के हर पेज के लिए सही तरीके से उत्पन्न टैग <meta property="og:image" content="https://....jpg"> चाहते हैं।
OpenGraph metadata का समावेश कैसे होता है
अपने थीम कोड में खोजें
{{ template "_internal/opengraph.html" . }}
शायद यह पहले से ही इसे शामिल कर रहा है। अगर कहीं नहीं मिलता है - तो आप खुद शामिल कर सकते हैं
layouts/_default/baseof.htmlबनाएं या अपने थीम से कॉपी करें- हेड के अंदर कहीं भी जोड़ें:
<head>
.....
{{ template "_internal/opengraph.html" . }}
किया? अब ह्यूगो कमांड के साथ अपनी साइट जनरेट करें और किसी पेज के लिए उत्पन्न index.html की जांच करें।
hugo
head -100 public/post/test/index.html
आपको वहाँ <meta property="og:image"... दिखाई नहीं दे रहा है, ना?
ठीक है… मानक कार्यान्वयन में कुछ और शर्तें हैं।
Hugo आधिकारिक दस्तावेज़
https://gohugo.io/templates/embedded/#open-graph
- बुनियादी रूप से, आपको पेज फ्रंटमैटर में उन छवियों को निर्दिष्ट करना होगा जिन्हें आप मेटा में प्रकाशित करना चाहते हैं, उदाहरण के लिए
---
title: "My hugo test page title"
description: "Description of my hugo test page"
date: "2025-07-15"
lastmod: "2025-07-15"
tags:
- Hugo
- Images
images:
- post-cover1.png
- post-cover2.png
---
लेकिन यह बहुत देर हो सकती है क्योंकि आपके पास पहले से ही हजारों पेजों वाला वेबसाइट है। चिंता न करें, एक और विकल्प है।
- पेज बंडल में विशेष नामों के साथ छवियाँ स्टोर करें।
वह _internal/opengraph.html _funcs/get-page-images.html को कॉल करता है जो आपके पेज बंडल में उन छवि फाइलों की खोज करता है जो feature (जैसे feature.png) को शामिल करते हैं, फिर, अगर फीचर छवि नहीं मिली तो cover या thumbnail नामों वाले छवि फाइलों की खोज करता है।
get-page-images.html का एक भाग:
{{- $featured := $resources.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $resources.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured }}
{{- $imgs = $imgs | append (dict
"Image" .
"RelPermalink" .RelPermalink
"Permalink" .Permalink) }}
{{- end }}
- ग्लोबल वेबसाइट पैरामीटर्स पर फॉलबैक करें - केवल पहली छवि लेगा।
किसी जगह पर hugo.toml में
[params]
description = 'My awesome website'
images = ['default-feature-image.jpg']
या hugo.yaml में अगर आप उसको उपयोग करते हैं
params:
description: My awesome website'
images:
- default-feature-image.jpg
आप उस कोड को get-page-images.html में देख सकते हैं:
{{- if and (not $imgParams) (not $imgs) }}
{{- with site.Params.images }}
{{- $imgParams = first 1 . }}
{{- end }}
{{- end }}
इस वेबसाइट
जैसा कि आपने अनुमान लगाया और देखा है, यह वेबसाइट भी Hugo का उपयोग कर रही है। यहाँ मैं पेज फ्रंटमैटर में मानक ह्यूगो/मेनरोड तरीके से संदर्भित थंबनेल छवियाँ रखता हूँ:
thumbnail: this-page-thumbnail.jpg
लेकिन मेरे थंबनेल पहले से ही अच्छी तरह से रीसाइज किए गए हैं 235px चौड़ाई तक… ओप्स… यह पेज के कवर छवि के लिए पर्याप्त नहीं है। और अन्य छवियों के सभी अलग-अलग नाम हैं…
मैंने आसान तरीके से फिक्स किया - मैंने बस वेबसाइट कॉन्फ़िग में डिफ़ॉल्ट छवि पैरामीटर्स डाल दिए। और अब इस पोस्ट से पहले सभी पेजों के पास इस छोटे क्यूबर्नेट्स क्लस्टर की छवि उनके ओपनग्राफ मेटा के रूप में है:
मैं भविष्य में कुछ बदल सकता हूँ, जैसे सभी पेजों के फ्रंटमैटर सेक्शन को अपडेट करने के लिए कोई स्वचालित स्क्रिप्ट लिख सकता हूँ, लेकिन अभी के लिए यह पर्याप्त है।
