Maxxing Out your SEO in Webflow

Debugging Open Graph Images

Overview
Introduction & Concepts
Terminology
000
High Value v. Low Value Traffic
002
Launching a New Site
The Site Launch SEO Checklist
051
Weblfow's SEO Features
051
Coming Soon Page
052
Developing Your Strategy
Mike's 4 Laws of SEO
100
Know Your Keyword Targets
101
RULE 1 - Make Your Site Easy to Find
Make Your Site Easy to Find
150
RULE 2 - Make Your Site Easy to Index
Domains, Page Titles, H1s, and Slugs
201
Page Titles
202
Page Descriptions
204
Add Basic OpenGraph Tags
210
RULE 3 - Make Your Site Relevant
Make Your Site Relevant
301
RULE 4 - Fine-Tune Your SEO
Fine-Tune Your SEO
380
Open Graph ( og: )
What is Open Graph?
400
How to Specify Global & Fallback og:images on Collection Pages
6:40
401
Debugging Open Graph
410
Debugging Open Graph Images
10:24
411
Fixing SEO Problems
Global Canonical URL Problems
2:27
851
TIP - How to Find Your Canonical URL
5:00
852
How to Hide Unneeded CMS Pages
6:29
853
Google Won't Index My Site
854
Google Search Console
855
Google Won't Display my META Description
4:47
855
Google SERPs Icon
856
Published
November 8, 2022
Updated
in lightbox

My og:image Isn't Appearing

If your og:image isn't appearing on Facebook / Twitter / LinkedIn / etc, there are three likely causes-

  • You don't have an og:image specified
  • Your image is the wrong size, often too small for use
  • The "cache" on the service you're using has old data

1 - Check your og:image

Facebook's Sharing Debugger, and OpenGraph.xyz are two good tools to use here. FSD provides some diagnostic data, and OpenGraph XYZ will give you a good idea of how your link would appear on a range of services.

Visit both, paste in the full URL of your shared page, and see what it shows you. NOTE: FSD sometime requires you to click Scrape Again. to get current data. Check the "last scraped" timestamp it shows to know for certain.

If you're not seeing an image, is it because you do not have an og:image meta tag? If you have a tag, but your image is still not showing, then it might be too small for use.

If you're seeing your image fine, and it look as espected in both tools, than you can skip to STEP 3.

2 - Check your og:image size

It's actually challenging to do that in the browser, so we'll use a simple online tool for this as well.

Get your og:image file URL, and open it in a new tab to make sure you actually see the image you want.

Now lets check the size...

Use Free Online Tools to see the size.

For it to display in most services your image must be 1200px x 630px minimum, and an aspect ratio of 1:91:1.

3 - Refresh the cache on the service you're having problems with

Each service has its own cache and tools for this;

NOTE: If you're having problems specifically with LinkedIn, make sure you're using PNG or JPEG format for your open graph image.

Linked in does not appear to support WEBP yet.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.