When someone pastes a link to your post into LinkedIn or a group chat, the platform fetches the page and builds a card from its Open Graph tags: title, description, image. You usually find out what that card looks like after you’ve shared it, which is the wrong way round. The Social Preview section of the SEO panel shows you the card before you publish.
What you see#
Expand Social Preview in the SEO tab and you get a tab strip for LinkedIn, X/Twitter and Facebook, a mock-up of the card, and character counters underneath. The mock-ups follow each platform’s current layout:
- Facebook shows the image at 1.91:1, the domain in capitals, the title (cut at 90 characters) and one line of description (cut at 200).
- X/Twitter is image-first: the title sits on the image as a dark pill (cut at 70 characters) with “From yourdomain.com” below. The description isn’t shown, because X doesn’t show it either.
- LinkedIn is a horizontal card with a square 108px thumbnail on the left and the title (cut at 70) and domain on the right. Again, no description.
The counters show Title: 42/70 chars and Description: 130/200 chars for the active platform. The description counter appears for every platform, including the two that don’t display it, which is a little odd but does tell you how it’d fare on a platform that does.
The cards update as you type in the frontmatter form.
Where the data comes from#
| Card element | Source |
|---|---|
| Title | title in the frontmatter |
| Description | description in the frontmatter |
| Image | image, falling back to thumbnail, then featured_image |
| Domain | site.url in admin/site.yaml, with any www. stripped |
On GitHub-hosted sites the image is fetched from the repository through the API, so it works for images that aren’t deployed yet. In local mode it’s served from your site’s static/ folder. If the field is empty you get a “No image” placeholder; with no site.url the domain reads example.com.
Note that this is a preview of your frontmatter, not of your site. Emet assumes your templates put title, description and the image field into the Open Graph tags. If your theme uses different fields (summary for the description, say) the preview will be wrong in a way Emet can’t detect. Check your theme’s <head> partial once and you’ll know whether to trust it.
Configuration#
Social previews are on by default. The socialPreview block in admin/site.yaml lets you turn them off or trim the platforms:
socialPreview:
enabled: true
platforms: [linkedin, facebook]platforms takes any of linkedin, twitter and facebook. The first one listed is the tab that opens by default, and with a single platform the tab strip disappears. enabled: false removes the section from the SEO panel.
A few numbers worth remembering#
Titles under 70 characters survive on all three platforms. Descriptions between 120 and 160 characters keep both Facebook and the SERP preview happy. For images, 1200 by 630 pixels is the 1.91:1 size everyone agrees on, and since LinkedIn crops it square, keep the interesting part in the middle.