Open Graph & Twitter Card Checker for Webflow Designers

Why Webflow Designers need this

You publish a Webflow site, drop the link into Slack or LinkedIn, and it unfurls as a bare URL with no image. The Open Graph fields in Page Settings were left empty, or the CMS template's Open Graph image was never bound to a field, so every collection item inherits nothing useful. Meanwhile the webflow.io staging domain may be carrying the same pages, and blocking it in robots.txt only stops crawling, not indexing of pages already known. Add the fact that Webflow has no built-in schema feature and you end up hand-checking a lot of custom code per template.

The Open Graph & Twitter Card Checker covers the social slice of that checklist. Give it one page URL and it reads the og: and twitter: tags in the HTML as served, lists each as present or missing, and draws an approximate share card. For a Webflow designer, the useful habit is testing a real published collection item rather than the template, so you see what the bindings actually produced. It will not open the image file, and it does not tell you anything about indexing.

Webflow Designers specific guidance

Start with a published item, not the template

Open your collection in the Designer, publish the site, and copy the URL of one live item, for example https://www.example.com/blog/spring-launch-notes. Paste it into the checker. Looking at the template page in the Designer tells you nothing here, because the tool reads only the HTML a visitor's browser would receive and runs no JavaScript. If you also keep a webflow.io staging copy, run the same item there once, so you know what that duplicate shows when somebody shares it. A clean table says the tags exist on this one item. It does not say the other items in the collection are fine, since an empty CMS field on a different item produces an empty tag.

Reading the Open Graph and Twitter tables

Go to the Open Graph Tags table first. A warning badge with missing next to og:image means the field behind it is empty or unbound. Missing og:title or og:description usually points back to Page Settings, in the Open Graph Settings area, where each value can be typed in or linked to a CMS field. Then read the Twitter Card Tags table: twitter:card decides whether X shows a summary or a large image. The Social Preview is a SeoMods card drawn from these tags, so treat it as an approximation of Facebook, LinkedIn or X, not their exact layout. Present tags prove only that values exist. They do not prove the image URL loads, so copy the og:image value into a new browser tab and look at it.

What to fix, and in which order

Fix the image first, because a missing thumbnail hurts a shared link the most. In the collection, add an Image field, bind it in the collection page's Open Graph Settings, and make sure no item leaves that field blank. Next fill the title and description bindings, republish, and rerun the same item URL. Facebook and LinkedIn keep cached copies of old previews, so refresh them with the Facebook Sharing Debugger and LinkedIn Post Inspector; this checker does not clear any platform cache. Leave schema markup and the webflow.io indexing setting in Site settings for separate checks, since neither appears in this result.

Example scenarios

Common mistakes

• Checking the template instead of an item. The template page in the Designer holds placeholders, not published values. Run a live collection item URL so you read what the bindings produced.
• Assuming a present og:image means a working image. The checker lists the tag but does not open the file or measure its size. Open the value in a browser tab before calling it done.
• Testing one item and trusting the whole collection. One item with a filled image field says nothing about the items where the field is empty. Spot-check several, especially older ones.
• Leaving the image field optional. If the Open Graph image is bound only to a CMS field, any item without that image shares with no thumbnail. Make the field required or fill it on every item.
• Forgetting the platform cache. After you fix and republish, Facebook and LinkedIn can still show the old card. Refresh the link in their own debugger tools.

Frequently asked questions

Why does my Webflow CMS item share with no image?

Most often the Open Graph Image in the Collection page settings is not bound to an Image field, or the field is empty for that particular item. Run the item's published URL through the checker and look at og:image in the Open Graph Tags table. If it says missing, fix the binding or fill the empty field and republish. If a value is present but the preview is still blank, open that URL in a browser, then clear the platform's cached copy with its own debugger.

Does this checker work on my webflow.io staging domain?

It checks any public page URL you paste, so you can paste a webflow.io address and read its tags like any other page. What it does not do is tell you whether that domain is indexed or blocked; robots.txt blocks crawling, not removal of pages Google already knows. Use the robots tester for the crawl rules and Site settings in Webflow to disable subdomain indexing, then confirm the setting separately. Social tags are all this result covers.

Do I need custom code for Open Graph tags in Webflow?

Usually not. Page Settings and Collection page settings include Open Graph fields for title, description and image, and they can be bound to CMS fields. Custom code in the head is the route for things Webflow has no field for, such as JSON-LD schema markup. After adding either, check the published page here to see whether the og and twitter tags appear, and use a schema checker for the JSON-LD, since this result does not read structured data.

Why does the preview differ from what LinkedIn shows?

The Social Preview is a SeoMods card drawn from your tags: image, host, title and the first 120 characters of the description. LinkedIn, Facebook and X each apply their own layout and cache old versions of a link. So a match here means the tags are present, not that a given feed will render identically. Expect small differences in crop and truncation, which is normal. After fixing, run the URL through each platform's own inspector to refresh what it stored.

Is this a good step on a webflow seo checklist before client handoff?

Yes, as the social-tags line on a pre-launch list. Check the home page, one blog item, and one item from each other collection, since each template has its own bindings. Record which tags came back missing and which you fixed. The result has no score and says nothing about titles versus H1, speed or indexing, so pair it with a full-page audit for the rest of the handoff. Screenshot the table for the client so the before and after is visible.

Reference: Branded Agency's Webflow SEO guide notes that the default webflow.io staging domain can cause duplicate content if indexed, and that robots.txt controls crawling, not indexing.