Search to Table

Fix guide

Make your restaurant’s links show a photo when shared

When someone texts your link or shares it on Facebook, it shows up as a bare web address with no photo.

Why it matters

Open Graph tags tell Facebook, iMessage, Slack and everything else which photo, title and description to show. A good food photo in that preview gets tapped; a grey box does not.

How to fix it

  1. Pick your best horizontal food or dining-room photo, 1200×630 pixels, and upload it to your site.
  2. Copy the code below and put that photo’s full address where it says REPLACE_ME.
  3. Paste into the <head> of your homepage, then check it in Facebook’s Sharing Debugger.

The code

This is the fix our audit generated for a sample restaurant. Run the audit on your own site and the fix pack fills in your name, address, phone and hours for you. Anything in CAPITALS is a value we couldn’t find — fill it in, never guess.

html
<meta property="og:title" content="Tacos El Puente — tacos in Evansville">
<meta property="og:description" content="Fresh tacos in Evansville. See our menu, hours, and how to order.">
<meta property="og:image" content="https://www.tacoselpuente.example/REPLACE_ME_PHOTO.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://www.tacoselpuente.example/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

Where it goes: Inside the <head> of your homepage.

Where to paste it on your website builder

Toast Websites
Toast Websites does not allow custom <head> code. Ask Toast support to add it, or move the site to a platform you control.
Popmenu
In Popmenu, most of this is set under Website → SEO. Ask your Popmenu rep for custom head code if the field is missing.
BentoBox
In BentoBox, go to Settings → SEO, or Settings → Custom Code for anything that needs raw HTML.
Square Online
In Square Online, go to Website → Settings → Advanced → Custom code → Head.
Squarespace
In Squarespace, go to Settings → Advanced → Code Injection → Header.
Wix
In Wix, go to Settings → Custom Code → Add Custom Code, and set it to load in the Head.
Shopify
In Shopify, go to Online Store → Themes → Edit code → theme.liquid, and paste just before </head>.
Webflow
In Webflow, go to Project Settings → Custom Code → Head Code, then publish.
GoDaddy Website Builder
GoDaddy Website Builder has limited custom code. Use the built-in SEO fields under Settings → SEO first.
Duda
In Duda, go to Settings → Head HTML.
WordPress
In WordPress, use an SEO plugin (Yoast or Rank Math) or add it to your theme’s header.php via Appearance → Theme File Editor.

More fixes

Not sure which of these you need? Work through the checklist or run the free audit below.

Check your own site

Free score, plain-English report, and the code to fix it. About a minute.

No account. Nothing changes on your site.