Open Graph (share preview)

What goes into Open Graph tags?

Open Graph tags are a short description card written in the head of a page, and the basic four are title, type, main image and URL. The official Open Graph protocol documentation (ogp.me) lists these four as required properties for every page.

Adding a description, site name, language and image description makes the preview tidier. Customers mostly see the title, description and image, but the other values help services understand the link accurately.

These tags are written where customers can't see them. So it's hard to tell if one is missing until you actually send the link, which is why they belong on your pre-launch checklist.

What size and layout should a share preview image have?

Most often it's a wide rectangle with a ratio of roughly 1.91:1 (e.g., 1200×630). Meta (Facebook) developer docs recommend images at least 1080 pixels wide so they look good on high-resolution screens, and say to specify the image's width and height in tags as well.

Each service crops the image to a slightly different ratio. So it's safest to keep your business name and key text in the center, away from the edges.

If you put text in the image, one short phrase of around ten characters is enough. In group chats the preview appears smaller than your palm, so check it yourself on a phone screen.

Keep the image file size from getting too big, too. If it takes a sharing service too long to fetch the image, the preview may show up without it.

Should each page have its own share preview?

Yes, for pages you often send to customers, it's best to set a different preview for each one. If every link shows the same logo image, people receiving it can't tell what it's about until they tap.

At least set separate ones for your front page, menu and price page, booking page and event pages. For the title, describe what customers get from that page; for the image, pick the scene that shows it best.

If you post new articles or products often, setting each one by hand is hard. It's convenient to set things up so the first image of a post or the main product photo automatically becomes the preview image.

• Cafe: a link announcing a new menu item gets a photo of it and the title "Fall-only chestnut latte is here."
• Hair salon: an event link gets the title "Hair treatment offer for first-time customers" and a photo of the salon.
• Craft studio: a class sign-up link gets a photo of finished pieces and the title "Now enrolling: weekend classes for November."
• Online store: a product link shows that product's photo and its name exactly as listed.

How do I write the title and description for a share preview?

Write the share preview title so the recipient knows what they'll get before opening the link. It can be the same as the page title shown in search results, but since it's read in a chat, feel free to polish it into something a bit more conversational.

For the description, one or two sentences is enough, as the official Open Graph documentation says. Put the information recipients will wonder about first, like opening hours, location and how to book. Long sentences tend to get cut off in previews.

Once you've chosen the main image, also write an image description (og:image:alt). The Open Graph documentation recommends including it too, and it lets people using screen readers know what the image shows.

A title that shows what the recipient can do gives them a clearer reason to tap than one that just repeats your business name. For example, "[Name] Craft Studio · Class schedule for November" rather than just "[Name] Craft Studio."

• Title example: "Cafe [Name] · Hand-drip in Yeonnam-dong, open daily 10:00–22:00"
• Description example: "A hand-drip cafe with plenty of window seats. You can also buy our beans in store."
• Weak example: text that says nothing about your business, like the title "Home" and the description "Welcome"

My share preview won't update or looks wrong. What should I check, and in what order?

Usually a tag is missing, the image URL has a problem, or the service is remembering an old preview. Checking in the order below makes it easy to find the cause.

Meta (Facebook) says that if you have its Sharing Debugger re-fetch the page, you don't have to wait for the default refresh cycle (about 24 hours). For KakaoTalk, you can do the same with the sharing debugger on the Kakao Developers site.

If you plan to send the same link through several services, check it once on each. Even reading the same tags, each service crops images and counts characters differently, so the preview may look different.

1. 01Check that the page actually contains the og:title and og:image tags.
2. 02Check that the image URL is a full address starting with "https://".
3. 03Paste the image URL directly into a browser and check that it opens without logging in.
4. 04Check that the image file isn't excessively large.
5. 05Enter the URL in the Meta Sharing Debugger or the Kakao sharing debugger to re-fetch the preview.
6. 06Send it again to yourself with KakaoTalk's "Send to Me" (chat with yourself) and check the result.

What are common Open Graph mistakes?

The most common mistake is using the same title and logo image on every page. It's technically set up, but with no difference between links, sharing them gives people no reason to tap.

If you change the image but keep the same file name, services may keep showing the old one. When you make a new image, changing the file name too is the sure way.

Share previews are used not only for links you send, but also for links customers send to friends. That's a moment when customers are promoting you for free, so make sure at least your front page and booking page are taken care of.

What should I ask my web agency about Open Graph?

Share previews are a hassle to fix after launch, so ask the four questions below at the design draft stage.

• Can each page have its own title, description and image?
• When I post a new article or product, is the preview image set automatically?
• Will you check the share preview in KakaoTalk yourselves?
• Can I change the previews myself later in the admin panel?