Open Graph Information

Hosting on Micro.blog
1

I’ve been struggling with the Opengraph information shared with the mb plugin.

I’m either going mad or the only way it works if for the image to be in an <img> tag but doesnt work if the post is in markdown using ![](url)

My head meta data is as follows:

<!-- Open Graph -->
		<meta name="twitter:card" content="summary" />
 
    <!-- Titles -->
        {{ with .Site.Params.title }}
			<meta property="og:site_name" content="{{ . }}" />
		{{ end }}
		{{ with .Title }}
			<meta name="twitter:title" content="{{ . }}" />
        	<meta property="og:title" content="{{ . }}" />
		{{ else }}
 			<meta name="twitter:title" content="{{ .Site.Title }}" />
        	<meta property="og:title" content="{{ .Site.Title }}" />
		{{ end }}
			<meta name="twitter:description" content="{{ .Summary }}" />
			<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
			<meta property="og:type" content="{{ with .Title }}article{{ else }}website{{ end }}" />
			<meta property="og:url" content="{{ .Permalink }}" />
	<!-- Images -->
			{{ with .Params.images }}
   				{{ range first 6 . }}
       				<meta property="og:image" content="{{ . | absURL }}" />
        			<meta name="twitter:image" content="{{ . }}" />
    			{{ end }}
			{{ else }}
				<meta property="og:image" content="https://www.gr36.com/uploads/2021/a2b5ba7293.png" />
        		<meta name="twitter:image" content="https://www.gr36.com/uploads/2021/a2b5ba7293.png" />
			{{ end }}

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

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

Is there a way to make this work, or am I missing something?

2

I found the same thing

3

At least I’m not going crazy!

1 Like
4

Just to flesh this out, a parameter dump from a post with an image wrapped in a light box shortcode:

<!-- 
$.Params = {
  categories: [Stream of Consciousness Personal Favorites Artsy Fartsy]
  date: 2021-03-27 19:33:00 -0700 -0700
  draft: false
  guid: http://Moondeer.micro.blog/2021/03/27/hashtag-still-the.html
  iscjklanguage: false
  lastmod: 2021-03-27 19:33:00 -0700 -0700
  layout: post
  microblog: true
  publishdate: 2021-03-27 19:33:00 -0700 -0700
  type: post
  url: /2021/03/27/hashtag-still-the.html
}
 -->

versus a parameter dump from a post with an img tag:

<!-- 
$.Params = {
  categories: [Programming]
  date: 2021-03-28 18:46:47 -0700 -0700
  draft: false
  guid: http://Moondeer.micro.blog/2021/03/28/i-see-what.html
  images: [https://moondeer.blog/uploads/2021/fde86aaee6.jpg]
  iscjklanguage: false
  lastmod: 2021-03-28 18:46:47 -0700 -0700
  layout: post
  microblog: true
  photos: [https://moondeer.blog/uploads/2021/fde86aaee6.jpg]
  publishdate: 2021-03-28 18:46:47 -0700 -0700
  type: post
  url: /2021/03/28/i-see-what.html
}
 -->

versus a parameter dump from a post with a markdown image:

<!-- 
$.Params = {
  date: 2021-03-29 08:34:57 -0700 -0700
  draft: false
  guid: http://Moondeer.micro.blog/2021/03/29/this-post-will.html
  iscjklanguage: false
  lastmod: 2021-03-29 08:34:57 -0700 -0700
  layout: post
  microblog: true
  publishdate: 2021-03-29 08:34:57 -0700 -0700
  type: post
  url: /2021/03/29/this-post-will.html
}
 -->

So as it stands an img tag is required for front matter pickup (I remember back when I was still using Twitter I was dropping an img tag near the top of the post that I wanted the cards to pick up and hiding it on my page via CSS).

5

I wouldn’t mind so much but publishing from Ulysses does so in markdown with no way to change it.

I thought the tag would be pulled from the HTML published page?

6

The tag, when pulling from Params, is happening at the same time the HTML is being generated. So the <img> does not exist when the template is being processed.

This is all just another vote for some kind of frontmatter access on custom themes, at least.

1 Like
7

That is what I assumed to be happening.

8

This kinda thing (as well as shortcodes and HTML) is why the Ulysses support is cool … but doesn’t effect my workflow.

9

Has this problem been fixed of the og plugin with the Markdown og code?

And can we use tag also while writing in Markdown to make sure the image goes in the og tag via this plugin without such errors?