how to set up open graph tags for social sharing: guide
Learn how to set up open graph tags for social sharing, choose clear titles and images, check Facebook previews, and fix missing or outdated sharing pictures.

how to set up open graph tags for social sharing: guide
Here is how to set up open graph tags for social sharing: add the page title, content type, image address and permanent page address to the <head> section of your page. These are the four required properties in the Open Graph protocol; complete them first, then add a useful description.
Start with the page you intend to share next. Prepare its message, ask whoever manages your website to add the information, and check the result before your campaign goes out. You can own this task without learning to build a website.
What does Open Graph control?
Open Graph gives a social platform explicit information about a page. A meta tag is a small piece of information in the page code. Without Open Graph tags, Facebook tries to work out the title, description and preview image itself. Meta explains this fallback in its sharing guide.
Hypothetical example: a small training business wants to share a workshop booking page. Choose a title naming the workshop, an image showing the activity and a description explaining what visitors can book. Ask someone unfamiliar with the business to read that combination before approving it.
Give the preview one job: make the destination clear. Avoid a headline promising a free guide when the page mainly sells a consultation. Review the promise and destination together, especially when several people contribute to a campaign.
Keep your acceptance criteria specific to this work. Ask for a correct social media link preview rather than a promise of better search rankings. For the wider search question, use the separate guide to social media and SEO rankings.
Which fields should you prepare before changing the website?
Prepare a short brief with one value for each field below. The first four are required by the protocol; the description is recommended additional information. Their definitions come from the Open Graph specification.
| Field | Meaning | Your preparation task |
|---|---|---|
og:title | The title of the shared object | Name the specific page or offer |
og:type | The kind of content | Identify what the page contains |
og:image | The representative image address | Select the actual image file |
og:url | The permanent page address | Confirm the main page URL |
og:description | A short description | Explain what visitors will find |
Write the title as a useful label
Meta describes og:title as the article title without branding such as the site name. Follow that approach when preparing your copy. Its title guidance supports keeping the field focused on the content.
Hypothetical example: replace “Our latest news” with “Weekend pottery workshop for beginners.” For the description, try “See what the session covers and choose an available date.” Use that wording only if the destination actually provides those details.
For help making the description concrete, use the writing exercise in the meta description guide. Read your proposed title and description aloud together. Remove repeated information and replace vague promises with the actual subject.
Choose the permanent address
Meta says og:url should use the canonical address without session variables, identifying parameters or counters. Canonical means the main address chosen for the page. Meta's URL guidance explains this requirement; the canonical tag guide covers the related website concept.
How do you add the tags without becoming a developer?
Hand over the approved values and ask where they are managed on your site. The protocol places the tags in the page's <head>, the HTML section used for this metadata. The official implementation example shows the arrangement.
- Choose one page for the first setup.
- Approve its title, description and image together.
- Find the relevant social sharing fields in your website editor, if available.
- If there are no suitable fields, give the brief to your website maintainer.
- Ask for the public page address and a completed preview check.
Do not assume a particular menu name. Ask the person maintaining your site to show you the exact editing location. Save a short note so the next person can update the same page without tracing the setup again.
A small implementation template
This is an unfinished template for your website maintainer. Replace every bracketed value before using it. For a blog post, Meta demonstrates article as the content type in its markup example.
<meta property="og:title" content="[Approved article title]">
<meta property="og:type" content="article">
<meta property="og:url" content="[Full permanent page address]">
<meta property="og:description" content="[Approved description]">
<meta property="og:image" content="[Full image file address]">
<meta property="og:image:alt" content="[Description of the image]">
For the first page, request a review before applying the same approach across the site. Check a service page and an article separately if you plan to share both. Approve the actual wording for each rather than signing off on a generic site description.
How should you choose and update the sharing image?
Choose an image that represents the destination, then record its actual dimensions. The protocol provides og:image:width and og:image:height for pixel dimensions, plus og:image:alt for describing the image. These are defined in the structured image properties.
Do not confuse those dimension fields with a universal recommended image size. The supplied documentation does not establish one mandatory size for every platform. Ask your designer for the finished file's dimensions and have the website maintainer enter those values accurately.
- Inspect the image at a small display size.
- Check that the main subject remains easy to recognise.
- Remove unnecessary text from the design.
- Match the pictured product or service to the page.
- Describe the visible scene in the alternative text.
Hypothetical example: an independent shop shares a ceramic mug collection. “Three blue ceramic mugs on a wooden shelf” is a useful image description. “Discover our amazing collection” is advertising copy; rewrite it to describe what is visible.
When replacing an image, use a new image address. Meta says images are cached by URL, meaning a stored copy is associated with that address, and will not update unless the URL changes. Follow its image update guidance.
Add the image task to your existing content checklist. The guide to optimising website images is a useful next reading step for the broader image work. Keep the social preview approval attached to this specific page.
What should you check when the OG image is not showing?
Start with Facebook Sharing Debugger. It shows the tags Facebook reads, reports errors or warnings and triggers another read of the page. Meta describes these functions in its testing instructions.
Follow the evidence in order
- Confirm the page. Enter the exact address you intend to share.
- Compare the fields. Check the reported title and image address against your approved brief.
- Inspect the image address. Open it and see whether it contains the expected file.
- Check any replacement. If the image changed, confirm the page now names the new file address.
- Record the warning. Send the actual message to your website maintainer.
Also ask your maintainer to check how the site responds to Facebook's crawler, the software that fetches the page. Meta documents a test using Facebook's user-agent, the identification sent with a request. Its crawler test instructions explain what to compare.
Send a useful problem report: the page address, the expected image and what the debugger currently shows. Avoid changing the design and the technical setup at the same time. Make one correction, repeat the check and record whether that specific discrepancy has gone.
What counts as a finished setup?
Accept the work when you have reviewed the page's values and the observed preview together. Ask for the result, not just confirmation that someone saved the settings. Assign a person to update the information when the offer changes.
A brief you can send today
“Please add the approved social title, description and image to this page. Check it with Facebook Sharing Debugger and send the result with the page address. List any remaining warnings and show me where future edits should be made.”
Keep that request alongside the campaign brief. During your next social media audit, review the pages you still share regularly. Prioritise outdated offers and mismatched images before polishing minor wording choices.
What else should you know about Open Graph?
What is the Open Graph protocol?
It is a set of rules for describing a web page as an object in a social graph. Start by preparing its title, type, image and permanent address. Protocol introduction.
What does the og:title tag do?
It supplies the title of the shared object. Write a clear title that identifies the page's actual content. Title definition.
Why is my og:image not showing on Facebook?
Use Sharing Debugger to inspect the image address Facebook reads and any reported warnings. If you replaced the image, use a new image URL. Meta's troubleshooting guidance.
When was the Open Graph protocol created?
It was first published in 2010 as part of Facebook. Use the current technical documentation when implementing it today. Protocol history.
What is the og:type tag used for?
It identifies the content type. Consider website for an ordinary website page and article for a blog post. Meta's content type explanation.
Sources
Use these references to check field names and the testing process when preparing your website brief.
Follow me on Instagram
Short notes, practical examples and daily digital strategy ideas.
I'm Anar Rustamli - a strategist, entrepreneur, and AI adoption leader working at the edge of growth, technology, and human thinking. Since 2016, my work has focused on helping businesses evolve in a rapidly changing digital landscape. I design growth systems, AI-powered workflows, and strategic frameworks that align performance with purpose. I believe real growth happens when strategy, data, and human insight work together - and my mission is to help businesses adopt AI in a way that strengthens both their results and their identity.

