How Do I Set Up Open Graph and Twitter Card Tags in Webflow?

Why does my link look broken when someone shares it?

Your shared link looks broken because it is missing Open Graph and Twitter Card tags. These are small meta tags that tell Facebook, LinkedIn, X, WhatsApp, and Slack what title, description, and image to show in the preview. Without them, platforms guess, and the guess is usually ugly or blank.

I get pulled into this all the time. A client posts their new page to LinkedIn, and instead of a clean preview they get a gray box or a random logo scrap. It looks unprofessional, and it quietly kills clicks, because a bad preview signals a low-effort page.

The fix is quick and it lives inside Webflow. This is a step-by-step guide to setting up Open Graph and Twitter Card tags so every share of your pages looks intentional, on-brand, and clickable.

What are Open Graph and Twitter Card tags?

Open Graph and Twitter Card tags are meta tags in your page head that control how a link looks when shared on social platforms. Open Graph, created by Facebook, sets the preview title, description, and image. Twitter Card tags do the same job for X. Together they decide what a shared link shows.

The Open Graph protocol uses tags like og:title, og:description, og:image, og:type, and og:url. Facebook built it, but LinkedIn, WhatsApp, Slack, Discord, and iMessage all read it too, so one set of Open Graph tags covers almost every platform where people paste links.

Twitter Card tags are the X-specific layer. They use tags like twitter:card, twitter:title, twitter:description, and twitter:image. The twitter:card value summary_large_image is what gives you the big, full-width image preview instead of a tiny thumbnail. X will fall back to your Open Graph tags if the Twitter ones are missing.

Why do these tags matter for my business?

They matter because the preview is the first impression of your link, and it directly affects whether people click. A clean title, a clear description, and a sharp image make a share look trustworthy. A blank or broken preview makes even great content look neglected before anyone reads a word.

There is a compounding effect too. Every time someone shares your page, a good preview does free marketing for you. That preview travels through group chats, Slack channels, and feeds, carrying your brand each time. Bad tags waste all of that reach, because a weak preview simply gets scrolled past.

This is closely tied to your other metadata. Your SEO title and meta description shape how you look in search, while Open Graph shapes how you look in social feeds. They overlap but are not identical, and I dig into the search side in my note on whether AI should write your Webflow meta descriptions.

Does Webflow set Open Graph tags for me?

Webflow gives you built-in Open Graph fields, but you have to fill them in. It does not invent good previews on its own. You get a dedicated Open Graph section in each page's settings where you set the title, description, and image, so you control exactly what shows when the page is shared.

The native fields cover Open Graph well, which handles Facebook, LinkedIn, and most chat apps. What Webflow's built-in settings do not include is the Twitter Card tags. For those, you add a little custom code, which I will cover below. The good news is X falls back to Open Graph, so your previews still work even before you add the Twitter layer.

Keeping your image right also matters for performance and clarity. A properly sized Open Graph image loads fast and never gets awkwardly cropped, which is part of the broader metadata polish I describe in designing Webflow blog post metadata.

How do I set Open Graph tags on a Webflow page?

Open the Pages panel, click the cog icon on your page, and scroll to the Open Graph Settings section. Enter your Open Graph title, description, and image. You can type them manually, or tick the checkboxes to pull the title and description straight from your SEO title and meta description. Save and publish.

As of 2025, Webflow added a Select Image button in that section, so you can pick your Open Graph image directly from your asset library instead of pasting a URL. That small change makes it much faster to set a proper preview image for each page without leaving the settings panel.

I usually write a distinct Open Graph title and description rather than reusing the SEO ones. Search snippets and social previews are read in different moods, so a slightly punchier social title often earns more clicks. When time is short, though, pulling from your SEO fields is a perfectly fine default.

What size should my Open Graph image be?

Use 1200 by 630 pixels, saved as JPG or PNG. That is the recommended Open Graph image size and it gives you the 1.91 to 1 aspect ratio that platforms expect. This single size renders cleanly across Facebook, LinkedIn, Slack, Discord, WhatsApp, and X, so you rarely need more than one image per page.

Keep your key text and any faces near the center of the image. Some platforms crop the edges slightly, so anything important pressed against a border can get cut off. A safe habit is to keep the headline and logo within the middle portion of the frame where every platform will show it.

Watch the file size as well. Aim to keep the image under about one megabyte so previews generate quickly. A heavy image can time out when a platform tries to build the preview, which leaves you with the same blank box you were trying to avoid in the first place.

How do I add Twitter Card tags in Webflow?

Add Twitter Card tags through custom code in the page head. In the page settings, find the custom code field that injects inside the head tag, and paste meta tags for twitter:card set to summary_large_image, plus twitter:title, twitter:description, and twitter:image with your values. Save and publish, and X will show a full-size card.

Because X falls back to Open Graph, you do not strictly need these for a working preview. I add them when a client wants tight control over how their links look on X specifically, or when the Open Graph image and the ideal X image differ. For most pages, well-set Open Graph tags already do the heavy lifting.

If you run a blog with many posts, adding Twitter tags by hand to every page gets tedious. In that case I lean on Webflow's Collection-level Open Graph pattern, which auto-generates previews for every item. You can go further with dynamic images, which I cover in my guide to dynamic Open Graph images in Webflow CMS.

How do I test my social previews?

Test them with each platform's own preview tool before you rely on a share. Paste your published URL into a link preview checker, and confirm the title, description, and image all appear the way you expect. If something looks wrong, fix the tags, republish, and clear the platform's cache by re-scraping the URL.

Caching is the sneaky part here. Platforms store your preview the first time they see a link, so an old, wrong preview can stick around even after you fix the tags. Most preview tools have a refresh or re-scrape button that forces the platform to read your page again and pick up the new tags.

I always test on the actual published URL, not a staging version, because Open Graph tags only take effect once the page is live. Getting this confirmed before a launch or a campaign saves you from posting a big announcement with a broken preview in front of your whole audience.

Should I set up these tags now?

Yes. Set Open Graph tags on every important page today, since they take minutes and directly improve how your links look everywhere they get shared. Add Twitter Card tags where you want extra control on X. For a content-heavy site, set a Collection pattern once so every post gets a clean preview automatically.

Social previews are one of those small details that quietly separate a polished brand from a sloppy one. Your best pages deserve to look their best the moment someone shares them, and a blank preview undercuts all the work you put into the page itself. This is high return for very little effort.

If you want help setting up Open Graph and Twitter Card tags cleanly across your Webflow site, or building a preview image that fits your brand, let's connect. Reach out through pravinkumar.co and I will help you make every shared link look sharp.