具有 URL 自定义的帖子的社交媒体共享 - Hugo / HTML

如何解决具有 URL 自定义的帖子的社交媒体共享 - Hugo / HTML

我正在尝试为与博客文章类似的多个视频页面设置社交媒体共享。一切都按预期工作，按钮出现并正确地将用户重定向到指定的社交媒体渠道......除了：

当帖子以草稿模式在目标社交媒体渠道上“预览”时或帖子发布后 - Twitter、Facebook 或 LinkedIn - 预览显示整个网站的元数据（标题、元数据）描述和图像）而不是特定页面本身。

按钮本身和 URL 自定义设置如下：

<!-- SOCIAL MEDIA SHARING -->
{{ $title := .Title }}
{{ $url := printf "%s" .Permalink | absLangURL }}
{{ $body := print $title ",by " .Site.Title "\n" .Params.description "\n\n" $url "\n" }}
<div class="social-media">
  <!-- Twitter -->
  <a href="http://twitter.com/share?url={{ $url }}&text={{ $title }}&via={{with .Site.social.twitter }}{{ . }}{{ end }}" class="btn social-media__icon twitter" target="_blank" rel="noopener" aria-label="share on Twitter">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg><div class="social-media__link">Tweet</div>
  </a>

  <!-- Facebook -->
  <a href="https://www.facebook.com/sharer.PHP?u={{ $url }}" class="btn social-media__icon facebook" target="_blank" rel="noopener" aria-label="share on Facebook">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg><div class="social-media__link">Share</div>
  </a>

  <!-- LinkedIn -->
  <a href="https://www.linkedin.com/shareArticle?url={{ $url }}&title={{ $title }}" class="btn social-media__icon linkedin" target="_blank" rel="noopener" aria-label="share on LinkedIn">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg><div class="social-media__link">Share</div>
  </a>
</div>

网站 <head> 为特定视频页面之一呈现的输出：

// Defined in layouts/_default/baSEOf.html
<Meta property="og:image:width" content="1200" />
<Meta property="og:image:height" content="800" />
<Meta property="og:url" content="https://www.examplesite.com" />
<Meta property="og:site_name" content="Example Site" />
 
// Defined in layouts/_default/baSEOf.html
<Meta name="twitter:card" content="summary_large_image" />
<Meta name="twitter:site" content="@examplesite" />
<Meta name="twitter:creator" content="@examplesite" />
 
// Defined in the template used per video page using `.Params.*`
<Meta property="og:title" content="This Video is For Example Site" />
<Meta property="og:image" content="https://img.youtube.com/vi/MyVideoCode/maxresdefault.jpg" />
 
// Defined in the template used per video page using `.Params.*`
<Meta name="twitter:title" content="This Video is For Example Site" />
<Meta name="twitter:description" content="The Meta description for the video" />

查看页面源代码时没有呈现其他元信息。

有吗：

Hugo 配置文件中可能会干扰的设置？ canonifyURLs？
目标社交媒体网站可能试图从中提取元数据的任何其他位置？
URL 自定义或 <Meta ... /> 标记中的某些错误会导致问题吗？
还有什么我想念的吗？

在此先感谢您的帮助！