An incredibly bare-bones template for opengraph/twitter/facebook sharing niceties. Slack has an excellent article on the relevant opengraph properties.
I’ve created a simple grid to help with laying out elements, and a corresponding layout grid (Toggle its visibility with control + L in Sketch).
There are slices places on the artboard for Facebook and Twitter share image sizes. Current as of the time of writing:
-
Facebook: 600 × 315 (1200 × 630 Retina)
-
Twitter: 560 × 300 (1120 × 600 Retina)
The export slices are set to @2x retina scale, to look nice and sharp on retina devices. You may want to toggle the format between png and jpeg, depending on whether your image contains graphical elements more suited to png compression, or photographic content better suited for jpeg.
Depending on your criteria, there’s different strategies for serving opengraph images from your views. I use middleman-ogp on my blog, allowing me to specify the images in my page frontmatter.
ogp:
og:
title: 'Page title'
description: 'Page description'
image:
'': http://example.com/path-to-image/og.png
type: image/jpg
width: 560
height: 300
locale:
'': en_us
fb:
title: 'Page title'
description: 'Page description'
image:
'': http://example.com/path-to-image/fb.png
type: image/jpg
width: 600
height: 315
For dynamic sites, pick your poison. Here’s a strategy using rails layouts.
Check to see if a custom image path for the ogp tag is present.
- if @ogp_image_path.present?
# Show the custom image.
%meta{property:"og:image", content:"http://example.com/images/og/#{ogp_image_path}/og.png"}
%meta{property:"fb:image", content:"http://example.com/images/og/#{ogp_image_path}/fb.png"}
- else
# Show the default ogp image.
%meta{property:"og:image", content:"http://example.com/images/og/og.png"}
%meta{property:"fb:image", content:"http://example.com/images/og/fb.png"}
- - @ogp_image_path == 'foobar'This allow you to specify a folder for a custom opengraph images, but falls back to a default if none is specified.