I’m attempting to set up social media sharing for multiple video pages that are set up similarly to blogposts. Everything largely is working as expected, where buttons appear and correctly redirect the user to the destined social media channel… except:
When the post is “previewed” on the destination social media channel in either draft mode or after the post has been published - either Twitter, Facebook, or LinkedIn - the preview shows the metadata for the overall website (the title, meta description, and image) and not the individual page that is being shared, despite the metadata being correctly rendered in the page source.
The buttons themselves and URL customization is set up like follows:
<!-- 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>
The rendered output of the site <head> for one of the specific video pages:
// 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.mysite.com" />
<meta property="og:site_name" content="My Site" />
// Defined in layouts/_default/baseof.html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mysite" />
<meta name="twitter:creator" content="@mysite" />
// Defined in the template used per video page using `.Params.*`
<meta property="og:title" content="This Video is For My 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 My Site" />
<meta name="twitter:description" content="The meta description for the video" />
There is no other meta information rendered when viewing the page source.
Is there:
- A setting in the Hugo config file that could interfere?
canonifyURLs? - Any other location the destination social media website might be attempting to pull the meta data from?
- Some error with the URL customization or
<meta ... />tags that would be causing the issue? - Something else I’m missing?
Thanks in advance for any assistance!