Open Graph tags for beginners come down to a few lines in the head of your page that tell Facebook, LinkedIn, X and chat apps what to show when someone shares your link. With them, a share becomes a neat card with a picture, a title and a short line of text. Without them, apps guess, and the card often looks broken or empty.
Open Graph tags for beginners: what are they?
Open Graph is a set of rules that Facebook created so any web page can describe itself to social apps. Each rule is a <meta> tag. A meta tag is a short line in the <head> of your page that visitors do not see but apps and search engines read. The official site, ogp.me, lists four basic tags that every page should have:
og:title: the title of the card.og:type: what the page is, such aswebsitefor a home page orarticlefor a post.og:image: the full web address of the picture on the card.og:url: the main address of the page. Use the same address as your canonical tag.
Two more are worth adding: og:description, one or two sentences about the page, and og:site_name, the name of your site.
Why do Open Graph tags matter for a small site?
Open Graph tags do not move you up in Google. They work after the search, when people pass your page around. A clean card with a clear picture gets noticed in a busy feed or a family chat group. A card with no picture, or with your logo cut in half, is easy to scroll past.
Google can also use your Open Graph title as one of the sources when it writes the title link for your page. So a good og:title helps a little there too.
When I ran blogs years ago, I shared every post by hand on many social bookmarking sites. Each share was one more chance for someone to notice the post. If you share your posts anywhere, set these tags up once, and every share after that looks right.
Which Open Graph tags should I copy?
Here is a full set for a blog post. Change the text and addresses to your own, and paste the lines inside <head>:
<meta property="og:type" content="article"><meta property="og:title" content="How to Plant Tomatoes in Pots"><meta property="og:description" content="Pick the pot, soil and spot, then water the right way."><meta property="og:url" content="https://example.com/plant-tomatoes-in-pots/"><meta property="og:image" content="https://example.com/images/tomato-pots.jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt" content="Tomato plants growing in three clay pots"><meta property="og:site_name" content="Example Garden Blog"><meta name="twitter:card" content="summary_large_image">
Note the word property, not name, on the Open Graph lines. The last line is for X (Twitter), which reads its own card tag and asks for a large picture with that value. The free Meta Tag Generator writes all of these for you from a title, description and image address.
What size should the share image be?
Facebook's guide asks for 1200 × 630 pixels. That shape is about 1.91 to 1, a wide rectangle. Facebook needs at least 600 × 315 pixels for the large card style, and it will not use pictures under 200 × 200 pixels. The file must also stay under 8 MB, though a good share image is far smaller.
| Item | Value |
|---|---|
| Best size | 1200 × 630 px |
| Shape | About 1.91 : 1 |
| Smallest for a large card | 600 × 315 px |
| Largest file | 8 MB |
Tips for the picture itself:
- Keep the main subject near the middle. Some apps crop the edges or show a square.
- Use little or no text in the image. Small text is hard to read on a phone.
- Use a full address that starts with
https://. A short path like/images/a.jpgmay not work. - JPG or PNG are the safest file types for share images.
To crop a photo to 1200 × 630, open it in the free Photo Editor, set the size, and save. Our guide to image SEO for beginners covers file names and file size.
How do I add the tags on my site?
Bloghints CMS
The CMS adds Open Graph and X tags on every page by itself. It uses your title, meta description and cover image. Pages without a cover get an automatic 1200 × 630 share card. Just make sure each post has a good cover image.
WordPress
SEO plugins such as Yoast SEO or Rank Math add Open Graph tags for you. Look for the "Social" tab under the post editor to set a custom image and text. Use one plugin only, so you do not get two sets of tags.
Plain HTML or PHP
Paste the lines from above into each page's <head>. If your site uses a shared header file, fill the title, description, address and image from variables you set on each page. If you hard-code them, every page will share the same card.
How do I test the card?
- Open the Facebook Sharing Debugger (search for it while logged in to Facebook). Paste your page address and press Debug. It shows the card and lists missing tags.
- Press Scrape Again after each change. Facebook stores the old card for a while, so this step forces a fresh copy.
- In LinkedIn, use the Post Inspector the same way.
- Paste the link into a private chat with yourself to see the card in a messaging app.
If the picture still does not show, open the image address on its own in the browser. It must load without a login, without a redirect loop and over HTTPS.
That is all Open Graph tags for beginners need: four basic tags, a description, and a 1200 × 630 image with a full address. Once they are in place, re-run the free Website SEO Checkup to confirm the social tags warning is gone. If your page title also needs work, read how long a meta title should be.
Frequently asked questions
Do Open Graph tags help Google rankings?
Not directly. They control how your link looks on social apps and in chats. Google may read your og:title as one source for the title link, but your page content and title tag matter far more.
Why does Facebook still show my old image?
Facebook keeps a saved copy of each card. Paste your address into the Sharing Debugger and press Scrape Again to load the new image and text.
Can I use a different title on social media than in Google?
Yes. The og:title can be shorter or more friendly than your title tag. Keep the same topic, so people who click get what the card promised.
