Before sharing a blog article, prepare a title, image and URL that all describe the same page. Open Graph metadata gives services that read it a set of values to use when building a link preview. A generator helps assemble those values, but the finished tags still need to be saved on the article itself.
This guide uses the Open Graph Generator to build an article example, review its output and catch mistakes before installing it. The example article, author and image below are fictional; replace their addresses and details with your own.
Choose the article’s core values
The Open Graph protocol requires four core properties: og:title, og:type, og:image and og:url. It also defines descriptions, locales and article-specific details.
- og:url: Use the article’s permanent public URL. Avoid copying a campaign link with tracking parameters when the clean article URL is the intended identity.
- og:type: Select
articlefor this example. In the generator, this reveals the author and publication-time fields. - og:title: Name the article clearly. Put the subject early so the opening still makes sense if a preview shortens it.
- og:image: Enter a complete image URL, including
https://and the domain. Use an image that represents the article.
Add a brief og:description explaining what the reader can do with the guide. For example, a herb-growing article that includes a drainage checklist can name that checklist. It should not promise advice that is absent from the page.
Include image text, locale and authorship
Use og:image:alt to describe what the image contains, rather than repeating a slogan. Choose the page’s locale in language_TERRITORY format, such as en_GB. The protocol identifies article:author as a profile, so use the author’s profile URL even though the generator’s placeholder also offers a name. article:published_time records first publication.
The generator adds image dimensions of 1200 by 630 whenever you supply an image URL. It does not measure the image. Prepare an image of those dimensions for this example, or correct the generated width and height to match your actual file before using the code.
Generate a complete example
Open the generator, choose article, and enter the following sample values. The publication time assumes the browser’s time zone is UTC+05:30; the next section explains why that matters.
og:type: article
og:locale: en_GB
og:url: https://example.com/guides/balcony-herbs/
og:title: Basil & Mint: A Balcony Herb Checklist
og:description: Choose pots with drainage, plan a sunny spot and use a watering checklist for balcony basil and mint.
og:image: https://example.com/images/balcony-herbs-share.jpg
og:site_name: Container Herb Notes
og:image:alt: Two pots of basil and mint beside a balcony watering checklist
article:author: https://example.com/authors/mara-sen/
article:published_time: 2026-10-10T09:00The output updates as you edit. Select Generate Open Graph Tags to refresh it, then Copy code when you have reviewed the values. With the stated time-zone assumption, the output is:
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/balcony-herbs/">
<meta property="og:title" content="Basil & Mint: A Balcony Herb Checklist">
<meta property="og:description" content="Choose pots with drainage, plan a sunny spot and use a watering checklist for balcony basil and mint.">
<meta property="og:image" content="https://example.com/images/balcony-herbs-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Two pots of basil and mint beside a balcony watering checklist">
<meta property="og:site_name" content="Container Herb Notes">
<meta property="og:locale" content="en_GB">
<meta property="article:author" content="https://example.com/authors/mara-sen/">
<meta property="article:published_time" content="2026-10-10T03:30:00.000Z">The title input contains a normal ampersand. The copied HTML contains & to encode that character inside the attribute. Enter ordinary text in the fields and let the generator escape it; entering & yourself would encode it again.
Check the publication time against your clock
A date-and-time control does not include a time-zone value, as MDN’s datetime-local reference explains. This generator interprets the entered value using the browser’s local time zone and converts it to UTC, shown by the final Z.
In a browser set to UTC+05:30, 09:00 becomes 03:30 UTC in the example. A browser in another zone produces a different timestamp from the same input. Check that the output represents the article’s actual first-publication instant. Leave the optional field empty if you do not know that time; do not invent it just to complete the form.
Read the preview as an editing aid
The generator’s card shows a domain, title, description and image-URL text. It does not download the image or fetch the article URL. Seeing an address in the image area therefore does not establish that a sharing service can retrieve that file.
The card clips titles at 88 characters and descriptions at 200 characters. These are this tool’s preview settings, not universal platform limits. The generated tags retain the entered text, subject to the form’s input limits. Use the shortened display to check whether your opening words explain the article, and inspect the copied code separately.
A “Tags ready” message means the generator has assembled the fields. It does not confirm that the remote page exists, that its image is accessible, or that a particular social service will display the same layout.
Save the tags and inspect the article
For a page you maintain as HTML, put the generated meta elements inside its <head>. In a CMS, use the article’s social metadata settings or the template that manages those tags. MDN’s guide to page metadata explains the document head and shows Open Graph metadata examples.
Check whether your theme or SEO plugin already supplies Open Graph tags before adding a second block. Update the existing values through the component responsible for them so you can maintain one consistent set.
- Open the public article and view its page source. Search for
og:title,og:urlandog:image, then compare the saved values with your intended ones. - Open the image URL separately. Confirm that it returns the intended image and that its dimensions agree with the tags.
- Confirm that author and publication-time tags belong to this article, rather than values left over from a copied template.
- Use the destination service’s inspection or preview facility, where available, to check its interpretation of the public URL. The generator itself does not publish tags or submit the URL for inspection.
If you also need a search description, work on that field separately with our practical meta-description examples. An Open Graph description is a social metadata field; changing it does not also save a name="description" tag.