بيانات صورة Opengraph في مُولّد المواقع الثابت Hugo

كيفية إضافة بيانات opengraph إلى hugo؟

Page content

بيانات Opengraph الصورة هي خاصية meta og:image. بشكل أساسي، نريد إنشاء علامة <meta property="og:image" content="https://....jpg"> بشكل صحيح لكل صفحة في موقعنا المعتمد على Hugo.

شعار Hugo وسlogan

كيف يتم تضمين بيانات 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

  1. بشكل أساسي، تحتاج إلى تحديد الصور التي ترغب في نشرها في الميتا في frontmatter الصفحة، على سبيل المثال
---
title: "عنوان صفحة اختبار Hugo الخاصة بي"
description: "وصف صفحة اختبار Hugo الخاصة بي"

date: "2025-07-15"
lastmod: "2025-07-15"

tags:
  - Hugo
  - الصور

images:
  - post-cover1.png
  - post-cover2.png
---

لكن هذا قد يكون متأخرًا لأنك ربما لديك بالفعل موقع يحتوي على آلاف الصفحات. لا تقلق، هناك خيار آخر.

  1. تخزين الصور في حزمة الصفحة مع أسماء خاصة.

هذا _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 }}
  1. الانتقال إلى المعلمات العالمية للموقع - سيأخذ الصورة الأولى فقط.

بعض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:

مكدس dell usff

ربما أقوم بإجراء بعض التغييرات في المستقبل، نوعًا ما كتابة نسخة تلقائية لتحديث جميع أقسام frontmatter للصفحات، لكن في الوقت الحالي، هذا كافٍ.

روابط مفيدة