Opengraph and metatags - Default information vs post information - Thought I would share

LucasFreeman · February 3, 2024, 8:46pm

I ripped 95% of this code from @thatguygriff here: GitHub - thatguygriff/plugin-open-graph: This plugin adds Open Graph meta tags to create social media and iMessage previews for posts

Problem:
This plugin worked great for posts, but did nothing for non post pages. If I tried adding metatags for the main page, it will override the tags from the plugin.

Goal:
Non post pages, for example my main page or a category link, should show a default site description and site photo.

Post pages should show the first image and the post text.

Solution:

Keep in mind you will need to adjust the default text and urls for your own site. This is directly from my custom themes head.html

<head>

<!-- Primary Meta Tags -->
<title>{{ if .Title }}{{ .Title }}{{ else }}BourbonByte - Lucas Freeman{{ end }}</title>
<meta name="title" content="{{ if .Title }}{{ .Title }}{{ else }}BourbonByte - Lucas Freeman{{ end }}" />
<meta name="description" content="{{ if .IsPage }}{{ with .Description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}{{ else }}Master Tinkerer ⚙️
Bourbon Taster 🥃
Car Nut 🔧
Film Stan 📸
Dad 👨‍👩‍👧‍👦
Small Town, KY📍{{ end }}" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="{{ with .Title }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ if .Permalink }}{{ .Permalink }}{{ else }}https://bourbonbyte.com/{{ end }}" />
<meta property="og:title" content="{{ if .Title }}{{ .Title }}{{ else }}BourbonByte - Lucas Freeman{{ end }}" />
<meta property="og:description" content="{{ if .IsPage }}{{ with .Description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}{{ else }}Master Tinkerer ⚙️
Bourbon Taster 🥃
Car Nut 🔧
Film Stan 📸
Dad 👨‍👩‍👧‍👦
Small Town, KY📍{{ end }}" />
<meta property="og:image" content="{{ if .Params.images }}{{ range first 1 .Params.images }}{{ . | absURL }}{{ end }}{{ else }}https://bourbonbyte.com/uploads/2024/b3ff70b49289e799.jpg{{ end }}" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="{{ if .Permalink }}{{ .Permalink }}{{ else }}https://bourbonbyte.com/{{ end }}" />
<meta property="twitter:title" content="{{ if .Title }}{{ .Title }}{{ else }}BourbonByte - Lucas Freeman{{ end }}" />
<meta property="twitter:description" content="{{ if .IsPage }}{{ with .Description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}{{ else }}Master Tinkerer ⚙️
Bourbon Taster 🥃
Car Nut 🔧
Film Stan 📸
Dad 👨‍👩‍👧‍👦
Small Town, KY📍{{ end }}" />
<meta property="twitter:image" content="{{ if .Params.images }}{{ range first 1 .Params.images }}{{ . | absURL }}{{ end }}{{ else }}https://bourbonbyte.com/uploads/2024/b3ff70b49289e799.jpg{{ end }}" />

<!-- Dynamic Sections for Posts with titles, images, audio, videos, publishing dates, modifications, and social links -->
{{ if .Title }}
	<meta property="og:title" content="{{ .Title }}" />
{{ else }}
    <meta property="og:title" content="{{ .Site.Title }}" />
{{ end }}

<!-- Adjusted to use post description if available -->
<meta property="og:description" content="{{ if .IsPage }}{{ with .Description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}" />
<meta property="og:type" content="{{ with .Title }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />

{{ with .Params.images }}
    {{ range first 6 . }}
        <meta property="og:image" content="{{ . | absURL }}" />
    {{ end }}
{{ end }}

{{ with .Params.audio }}
    <meta property="og:audio" content="{{ . }}" />
{{ end }}

{{ with .Params.videos }}
    {{ range first 1 . }}
        <meta property="og:video" content="{{ . | absURL }}" />
    {{ end }}
{{ end }}

{{ if .IsPage }}
  {{ if not .PublishDate.IsZero }}
    <meta property="article:published_time" content="{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" | safeHTML }}"/>
  {{ else if not .Date.IsZero }}
    <meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}"/>
  {{ end }}

  {{ if not .Lastmod.IsZero }}
    <meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}"/>
  {{ end }}
{{ else }}
  {{ if not .Date.IsZero }}
    <meta property="og:updated_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}"/>
  {{ end }}
{{ end }}

{{ with .Site.Params.title }}
<meta property="og:site_name" content="{{ . }}" />
{{ end }}

{{ if .IsPage }}
  {{ range .Site.Authors }}
    {{ with .Social.facebook }}
      <meta property="article:author" content="https://www.facebook.com/{{ . }}" />
    {{ end }}

    {{ with .Site.Social.facebook }}
      <meta property="article:publisher" content="https://www.facebook.com/{{ . }}" />
    {{ end }}
  {{ end }}

    <meta property="article:section" content="{{ .Section }}" />

  {{ with .Params.tags }}
    {{ range first 6 . }}
      <meta property="article:tag" content="{{ . }}" />
    {{ end }}
  {{ end }}
{{ end }}


<meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>{{ block "title" . }}{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ if .Title }}{{.Title }} - {{ .Site.Title }}{{else}}{{.Summary | truncate 50 }}{{end}}{{ end }}{{ end }}</title>

  <meta name="description" content="{{ .Summary | truncate 160 }}" />
   
 <link rel="shortcut icon" href="https://micro.blog/{{ .Site.Author.username }}/favicon.png" type="image/x-icon" />

  <link rel="stylesheet" href="{{ "css/main.css" | relURL }}"> 
  {{ partial "cards.html" . }}
  <link rel="canonical" href="{{ .Permalink }}" />

  {{ partial "microblog_head.html" . }}

</head>

Screenshots showing the results: