Missing Open Graph Tags? How to Fix Them — Beginner's Guide
Open Graph tags are small pieces of code in your HTML that control exactly how your page appears when someone shares it on Facebook, LinkedIn, WhatsApp, Slack or Discord. Without them, social platforms guess what to show — and usually get it wrong. This guide walks you through exactly what Open Graph tags are, which ones you need, and how to add them to your page — step by step, with no coding experience needed.
What you will learn in this guide
- What Open Graph tags are and why every page needs them
- Which OG tags are required and what each one does
- How to check which OG tags your page is missing using AIPageSEO
- How to create and size your OG image correctly
- How to add OG tags to your HTML file using Notepad++
- How to upload your updated file back to your website using FileZilla
- How to test your OG tags using the Facebook Sharing Debugger
1 What are Open Graph tags — and why does every page need them?
Before you add anything to your code, you need to understand what Open Graph tags are, where they appear, and what happens when they are missing.
What Open Graph tags actually are
Open Graph tags are a set of meta tags — small pieces of code — that you add to the <head> section of your HTML file. They were created by Facebook but are now used by almost every social platform. They tell social networks exactly what title, description, and image to show when someone shares your page link.
Without Open Graph tags, platforms like Facebook, LinkedIn, WhatsApp, Slack, and Discord have to guess what to show — and they often get it wrong. They might pull a random image from your page, show no image at all, or display a description that makes no sense out of context.
Where Open Graph tags make a difference
| Platform | What OG tags control |
|---|---|
| The title, description and image shown in a shared post or link preview | |
| The headline and image shown when a link is shared in a post or message | |
| The preview card shown when you paste a link into a conversation | |
| Slack | The unfurl preview shown when a link is posted in a channel |
| Discord | The embed shown when a link is posted in a server |
| Twitter / X | Twitter has its own card tags but falls back to OG tags if Twitter tags are missing |
What happens without Open Graph tags
If your page has no OG tags, when someone shares it the result looks unprofessional and unappealing. The platform might show no image, a random image it found on the page, or a title that does not match your page at all. People are far less likely to click a shared link that looks broken or unfinished.
yourdomain.com
No image — just a plain grey box
yourdomain.com/page-url
[Large eye-catching image]
Emergency Plumber Manchester | 24/7 Service
Available now — no call-out fee. Fast response
guaranteed across Greater Manchester.
2 Which Open Graph tags do you need?
There are many Open Graph tags but most pages only need a small core set. Here is exactly what each one does and whether you need it.
The four required tags — every page needs all of these
| Tag | What it does | Example value |
|---|---|---|
og:title | The headline shown on the share card. Should match your page title closely but can be slightly different — maximum 60 characters. | Emergency Plumber Manchester | Joe's Plumbing |
og:description | The short description shown below the title on the share card. Keep it under 160 characters and make it compelling. | Available 24/7 — no call-out fee. Fast response guaranteed across Greater Manchester. |
og:image | The image shown on the share card. Must be at least 1200×630 pixels for best results across all platforms. | https://yourdomain.com/images/og-image.jpg |
og:url | The canonical URL of the page. Should exactly match your canonical link tag. | https://yourdomain.com/page |
Additional recommended tags
| Tag | What it does | When to use it |
|---|---|---|
og:type | Tells platforms what kind of content this is | Use article for blog posts, website for homepages, product for shop pages |
og:site_name | Your brand or website name, shown alongside the share card | Always include this — it builds brand recognition |
og:locale | The language and region of your page | Use en_GB for British English, en_US for American English |
og:image:width | The pixel width of your OG image | 1200 — helps platforms display the image without delay |
og:image:height | The pixel height of your OG image | 630 — the standard ratio for share cards |
og:image:alt | Alt text for your OG image — important for accessibility | Always include a brief description of the image |
Additional tags for articles and blog posts
| Tag | What it does |
|---|---|
article:published_time | When the article was first published — used by Facebook and LinkedIn to show publication date |
article:modified_time | When the article was last updated |
article:author | The name of the author |
article:section | The category or section the article belongs to |
3 Check which Open Graph tags your page is missing
Before you write any code, find out exactly which OG tags your page currently has and which are missing.
- 1 Go to the AIPageSEO audit tool Open a new browser tab and go to https://aipageseo.com/seo-audit-platform.html. You do not need an account.
-
2
Enter your page address and run the audit
Type the full address of your page, for example
https://yourdomain.com, and click Run Audit. Wait 10–30 seconds for it to complete. - 3 Find the Open Graph section Scroll down to the Social Preview or Open Graph section. You will see which tags are present and which are flagged as missing. Make a note of every tag showing a red or yellow status — you need to add or fix each of these.
- 4 Also test with the Facebook Sharing Debugger Go to https://developers.facebook.com/tools/debug/ and enter your page URL. This shows you exactly how Facebook currently displays your page when shared — including any warnings about missing or incorrect tags.
4 Prepare your Open Graph image
The OG image is the single most important part of a share card — it is what catches the eye when someone scrolls past a shared link. Getting the size right is critical. An image that is too small or the wrong ratio will appear cropped, blurry, or missing entirely on some platforms.
What size does your OG image need to be?
| Requirement | Value | Why |
|---|---|---|
| Minimum width | 1200 pixels | Anything smaller appears blurry on high-resolution screens |
| Minimum height | 630 pixels | The standard 1.91:1 ratio used by Facebook, LinkedIn and most platforms |
| Maximum file size | 8MB | Facebook's limit — keep it under 1MB for fast loading |
| File format | JPG or PNG | Both work well — JPG is smaller, PNG supports transparency |
What should the image show?
Your OG image should be relevant to the page content and look good as a standalone image with no other context. Good options include your product, your team photo, a relevant illustration, or a branded image with your page title as text overlaid on it. Avoid images with lots of small text — it will not be readable at the size share cards display.
How to check your existing image size
- 1 Find your image file on your computer If you already have a candidate image, find it on your computer. On Windows, right-click it and choose Properties then click the Details tab — you will see the dimensions listed as width × height in pixels. On Mac, right-click the image and choose Get Info — the dimensions are shown under More Info.
- 2 If your image is too small, resize it If your image is under 1200×630 pixels, you need a larger version. You can create a properly sized OG image for free using Canva — search for "Open Graph image" in Canva templates and it will give you a 1200×630 canvas ready to design.
-
3
Upload your image to your server using FileZilla
Connect to your server in FileZilla. Navigate to a folder where images are stored — usually a folder called
imagesorimginside your main website folder. If there is no images folder, right-click in the right panel and choose Create directory and name itimages. Then drag your OG image from the left panel into the right panel to upload it. -
4
Note the full URL of your image
Your image URL will be your domain name followed by the folder path and filename. For example if your domain is
yourdomain.comand you uploaded the image to the images folder asog-image.jpg, the full URL is:https://yourdomain.com/images/og-image.jpg
Write this down — you will need it in the next section.
5 Plan your Open Graph tag values before opening any files
Before you open Notepad++ or FileZilla, write out all your OG tag values here. It is much faster to plan them now than to do it while looking at code.
Your og:title
This should closely match your page title tag but can be slightly different if needed. Maximum 60 characters. Do not include your brand name if it makes the title too long — the platform will show your domain anyway.
Your og:description
This is your chance to sell the click. Write a compelling sentence or two — maximum 160 characters — that tells someone exactly what they will get if they click the link. End with a call to action if possible.
Your og:image URL
This is the full URL you noted in Section 4, for example https://yourdomain.com/images/og-image.jpg. It must be an absolute URL — starting with https://. A relative path like /images/og-image.jpg will not work.
Your og:url
This is the full canonical URL of the page you are editing, for example https://yourdomain.com/about. It must exactly match your canonical link tag.
If your page is an article or blog post, also add these:
6 Add Open Graph tags to your HTML file using Notepad++
You now have all your OG tag values planned. In this section you will open your HTML file and add the tags in the correct place.
Where do Open Graph tags go?
Open Graph tags must go inside the <head> section of your HTML file — the same section that contains your title tag, meta description and canonical link. They must go before the closing </head> tag. The best place is directly after your canonical link tag so all your head meta information is grouped together.
- 1 Open FileZilla and connect to your server Fill in the four boxes at the top of FileZilla — Host, Username, Password, leave Port blank — and click Quickconnect. If you need help with this step, see the Before You Start guide linked above.
-
2
Navigate to your website folder and download a backup
Double-click
httpdocs(Plesk) orpublic_html(cPanel) in the right panel. Right-click the file you want to edit and choose Download. In the left panel rename it tofilename-backup.html. Then download it again to your Desktop as your working copy. - 3 Open the file in Notepad++ Open Notepad++ → File → Open → navigate to your Desktop → click the file → click Open.
-
4
Find the canonical link tag
Press
Ctrl + F. In the search box typecanonicaland press Enter. You will jump to a line that looks like:<link rel="canonical" href="https://yourdomain.com/page" />
This is where you will add your OG tags — on new lines directly after this line. -
5
What if there is no canonical tag?
If your page has no canonical tag, search instead for
</title>and add the OG tags on new lines directly after the closing title tag. -
6
Click at the end of the canonical line and press Enter
Click at the very end of the canonical link line — after the
/>— and press Enter to create a new blank line. This is where you will start typing your OG tags. -
7
Type in each OG tag on its own line
Type each tag from your plan in Section 5, pressing Enter after each one to start the next line. Your code should look like this when done:
<link rel="canonical" href="https://yourdomain.com/page" /> <!-- Open Graph --> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Your Brand Name" /> <meta property="og:locale" content="en_GB" /> <meta property="og:url" content="https://yourdomain.com/page" /> <meta property="og:title" content="Your Page Title Here" /> <meta property="og:description" content="Your compelling description here." /> <meta property="og:image" content="https://yourdomain.com/images/og-image.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="Description of your image" />
-
8
Check for existing OG tags before adding new ones
Before saving, press
Ctrl + Fand search forog:title. If a result is found, your page already has some OG tags. Do not add duplicate tags — instead update the existing ones with your new values. -
9
Save the file
Press
Ctrl + S. The red dot on the file tab disappears when the file is saved and ready to upload.
7 Upload your file and test your Open Graph tags
- 1 Switch back to FileZilla Click on the FileZilla window in your taskbar. If it has disconnected, fill in the boxes again and click Quickconnect.
- 2 Upload the edited file Find the edited file on your Desktop in the left panel. Right-click it and choose Upload. Click Overwrite when prompted. When the progress bar disappears the upload is complete.
- 3 Test with the Facebook Sharing Debugger Go to https://developers.facebook.com/tools/debug/. Enter your full page URL and click Debug. You will see exactly how Facebook reads your OG tags and a preview of how your page will look when shared. If it shows old information click Scrape Again to force Facebook to re-read your page.
- 4 Test with the LinkedIn Post Inspector Go to https://www.linkedin.com/post-inspector/. Enter your page URL and click Inspect. LinkedIn will show you how your page appears when shared on its platform.
-
5
Verify in View Page Source
Open a browser tab and go to your page. Right-click and choose View Page Source. Press
Ctrl + Fand search forog:title. You should see all your OG tags listed correctly in the head section.
8 Common mistakes to avoid
-
⚠
Using a relative image URL instead of an absolute one
The
og:imagevalue must start withhttps://and include your full domain name. Writing/images/og-image.jpgwithout the domain will not work — Facebook and other platforms cannot resolve relative URLs. Always write the full URL:https://yourdomain.com/images/og-image.jpg. - ⚠ Using an image that is too small Images under 600×315 pixels may not display at all on some platforms. Images under 1200×630 will appear blurry or cropped on high-resolution screens. Always use at least 1200×630 pixels.
- ⚠ Platforms showing old cached information Social platforms cache your page's OG data. Even after you have uploaded the correct tags, Facebook, LinkedIn and others may continue to show the old version for a while. Use the Facebook Sharing Debugger and click Scrape Again to force a cache refresh. For LinkedIn use the Post Inspector.
-
⚠
og:url not matching your canonical tag
Your
og:urlvalue should exactly match your<link rel="canonical">tag. If they differ, some platforms may index the wrong URL or show inconsistent previews. - ⚠ Adding duplicate OG tags If your page already has some OG tags and you add new ones without removing the old ones, you will end up with duplicate tags. Platforms will use whichever one they find first — which may not be the one you want. Always search for existing OG tags before adding new ones.
-
⚠
Forgetting to save before uploading
If you forget to press
Ctrl + Sin Notepad++ before going back to FileZilla, you will upload the unchanged file. Always check the red dot on the tab is gone before uploading.