بيانات صورة Opengraph في مُولّد المواقع الثابت Hugo
كيفية إضافة بيانات opengraph إلى hugo؟
بيانات Opengraph الصورة
هي خاصية meta og:image
.
بشكل أساسي، نريد إنشاء علامة <meta property="og:image" content="https://....jpg">
بشكل صحيح لكل صفحة في موقعنا المعتمد على Hugo.
كيف يتم تضمين بيانات OpenGraph
ابحث في كود موضوعك عن
{{ template "_internal/opengraph.html" . }}
ربما يتم تضمينه بالفعل. إذا لم تجد أي شيء - يمكنك المحاولة لضمه بنفسك
- أنشئ أو نسخ من موضوعك
layouts/_default/baseof.html
- أضفه في مكان ما داخل الرأس:
<head>
.....
{{ template "_internal/opengraph.html" . }}
هل انتهيت؟ الآن قم بإنشاء موقعك باستخدام أمر hugo وتحقق من ملف index.html الناتج لبعض الصفحة.
hugo
head -100 public/post/test/index.html
لا ترى <meta property="og:image"...
هناك، صحيح؟
حسنًا… هناك بعض الشروط الإضافية في التنفيذ القياسي.
الوثائق الرسمية لـ Hugo
https://gohugo.io/templates/embedded/#open-graph
- بشكل أساسي، تحتاج إلى تحديد الصور التي ترغب في نشرها في الميتا في frontmatter الصفحة، على سبيل المثال
---
title: "عنوان صفحة اختبار Hugo الخاصة بي"
description: "وصف صفحة اختبار Hugo الخاصة بي"
date: "2025-07-15"
lastmod: "2025-07-15"
tags:
- Hugo
- الصور
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 }}
- الانتقال إلى المعلمات العالمية للموقع - سيأخذ الصورة الأولى فقط.
بعضewhere في hugo.toml
[params]
description = 'موقعي الرائع'
images = ['default-feature-image.jpg']
أو في hugo.yaml إذا كنت تستخدم ذلك
params:
description: موقعي الرائع'
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. هنا لدي صور مصغرة مشار إليها في frontmatter الصفحة بطريقة Hugo/MainRoad القياسية:
thumbnail: this-page-thumbnail.jpg
لكن صور مصغريتي تم تغييرها بالفعل إلى حجم مناسب إلى عرض 235px… أوبس… هذا ليس كافيًا لصورة الغلاف للصفحة. وجميع الصور الأخرى لها أسماء مختلفة…
قمت بحل المشكلة بطريقة سهلة - لقد وضعت فقط صورة مبدئية في إعدادات الموقع. الآن جميع الصفحات قبل هذه المنشور لها صورة هذا النمط الصغير من تجميع kubernetes كصورة opengraph meta:
ربما أقوم بإجراء بعض التغييرات في المستقبل، نوعًا ما كتابة نسخة تلقائية لتحديث جميع أقسام frontmatter للصفحات، لكن في الوقت الحالي، هذا كافٍ.