This page describes a feature that is not yet available, so that theme developers know what is coming. We’ll remove this notice when the feature is fully rolled out.
Micro.blog will auto-generate Open Graph cards to use on your blog based on a setting and optional HTML templates. These cards are commonly used in social networks when linking to your blog.
On the Design page, you will see a choice between a few card styles. Plug-ins may add their own custom style, and those will also appear as a choice on the Design page.
Open Graph cards are 600 x 315, and usually displayed at about half that size. Micro.blog adds your profile photo on the left side. The right side is available to a custom template, to include the post title, summary, images, or other information.
Templates may use simple logic similar to Hugo templates. They do not actually use Hugo, so special Hugo variables and commands are not available.
To add an Open Graph style to a plug-in, create a template layouts/opengraph.html.
You can control the two main background colors by adding data-avatar-background and data-content-background to the first <div> in your template. If these are left out, Micro.blog will use a light gray and white respectively.
Here’s an example template that changes the color to a light green:
<div style="background-color: #AFE1AF; padding: 40px;"
data-content-background="#AFE1AF">
{{ if .Title }}
<b>{{ .Title }}</b>
{{ end }}
<p style="font-size: 15px;">{{ .Summary }}</p>
</div>
The color will usually need to be set in two places as in this example. The style color is for the <div>, which may be smaller than the full area, and the data-content-background is like the page background. Micro.blog will vertically center the content if it’s shorter than the available space.