Open Graph meta tags help social networks and messaging platforms understand how a webpage should appear when someone shares its URL. They provide information such as the page title, description, image and URL. The four basic properties are og:title, og:type, og:image and og:url.
A webpage can have useful content and still display the wrong image, an outdated title or no description when shared. This usually happens when Open Graph metadata is missing, incorrect, duplicated or unavailable in the HTML received by a social crawler. Sometimes the image URL is also inaccessible or an old preview is being shown from a platform cache.
In this guide, I will explain what Open Graph is, how to add its tags correctly, how to choose an image and how to troubleshoot common errors. You can also use OpenGraph Preview at https://ogpreview.epsingh.in/ to inspect a public URL, test pasted HTML, validate an OG image and compare simulated social previews.
Key takeaways
- Add og:title, og:type, og:image and og:url to the page head.
- Write a useful og:description and use a relevant og:site_name.
- Use a unique title, description and image for each important page.
What is Open Graph?
Open Graph is a protocol that allows a webpage to describe itself using structured metadata. It was introduced to make webpages appear as rich objects when shared across social networks. Instead of relying only on a platform to find a suitable title, description or image, a website can provide these details in its HTML head section. For example, when someone shares a blog URL, a social platform may use og:title for the headline, og:description for the summary and og:image for the preview image. The result is commonly called an Open Graph preview, OG preview or social sharing card. Open Graph is not limited to blogs. It can also describe product pages, videos, business websites, portfolios, landing pages and other public webpages.
Why do Open Graph tags matter?
A shared link is often the first place where someone sees your content outside your website. A useful title explains what the page is about, a relevant image gives visual context and a clear description helps the reader decide whether to open it. This is useful for blog articles, product pages, business websites, landing pages, portfolios and web applications. Without suitable metadata, a platform may select an unwanted image, use an incomplete description or display only a plain URL. Open Graph tags give website owners better control over the information they provide. However, each platform has its own crawler, cache and preview rules, so the final result may not look exactly the same everywhere. Correct metadata improves the information available to those platforms, but it does not guarantee clicks or better search rankings.
What are the main Open Graph meta tags?
The Open Graph protocol defines four basic properties for a webpage: og:title, og:type, og:image and og:url. These identify the title, object type, representative image and permanent URL of the page. You will also commonly see og:description, which provides a short explanation of the content, and og:site_name, which identifies the website. For a normal homepage, og:type is generally website. For a blog article, article is a suitable type. Choose values that describe the actual page rather than using the same metadata across your entire website. A useful set of tags should be unique, accurate and consistent with the visible page content.
Understanding each important Open Graph property
og:title: The title that should represent the page in a social preview. Keep it clear and relevant rather than inserting a long list of keywords. og:type: The type of content being described, such as website or article. og:url: The permanent URL that identifies the Open Graph object. Keep it consistent with the page's canonical URL. og:image: The image that represents the page when a platform creates its preview. Use a public, absolute image URL. og:description: A short summary of the page. Write it for a person deciding whether to open the link. og:site_name: The name of the overall website, such as a brand or publication. og:locale: The language and region of the content, commonly represented as en_IN for English in India. og:image:alt: A meaningful description of the image for accessibility and image context. These properties have different purposes. They should not all contain the same text.
A practical Open Graph HTML example
Place Open Graph properties inside the head element of your HTML document. Here is a basic example for a blog article. Replace the example title, description, canonical URL and image URL with the actual values for your page. Example HTML: <meta property='og:title' content='Open Graph Meta Tags: Complete Guide' /> <meta property='og:type' content='article' /> <meta property='og:url' content='https://example.com/blog/open-graph-meta-tags/' /> <meta property='og:image' content='https://example.com/images/open-graph-guide.jpg' /> <meta property='og:description' content='Learn how Open Graph tags control link previews and how to test them.' /> <meta property='og:site_name' content='Example Website' /> <meta property='og:image:alt' content='An example of Open Graph metadata and social preview cards' /> The example uses absolute HTTPS URLs because external crawlers need to retrieve the page and image independently. The title, description and image should match the content a visitor sees after opening the link. These tags belong inside the head element, not in the visible body of the page.
Which Open Graph image size should you use?
A good preview image should have enough resolution to remain clear on desktop and mobile screens. A practical starting point for a large social preview is 1200 by 630 pixels, which is close to a 1.91:1 aspect ratio. This is a common working size, not a universal requirement defined by the Open Graph protocol. Different platforms may crop or display images differently. Use a clean image, keep important text and subjects away from the edges, and check the final crop on the platforms you care about. The image URL should be public, return a valid image response and avoid login requirements. Check its actual dimensions, file size and content type rather than trusting its filename. WebP is useful for website images, but do not assume every social crawler handles all image formats in exactly the same way. JPEG or PNG is a sensible compatibility choice for a dedicated social-sharing image unless you have tested the required format on your target platforms.
Open Graph tags versus normal SEO meta tags
Open Graph metadata and search engine metadata solve related but different problems. The HTML title element describes the page title. The meta description provides a short summary that search engines may use when generating a search snippet. Open Graph properties describe the content for social sharing and link previews. For example, a page may have a search-focused title and description while using a slightly shorter social title and a different sharing image. Keep the information consistent, but write each field for its purpose. Do not remove your normal SEO title or meta description after adding Open Graph tags. They serve different roles. A complete page should have appropriate search metadata, social sharing metadata and useful visible content.
Use different metadata for different pages
One common mistake is copying the same Open Graph tags to every page. A homepage, service page, case study and blog article have different purposes and should usually have different titles, descriptions and images. For example, a blog article should use its own headline and featured image. A product page should describe the product shown on that page. A portfolio project should use a representative project image rather than the general homepage banner. If your website uses a content management system or a framework, generate metadata from the current page data. Check that dynamic routes produce the right values for every published URL. Avoid empty values, generic fallback images where a relevant image exists, and duplicate tags that compete with one another.
How canonical URLs and og:url should work together
A canonical URL tells search engines which URL should represent a page when similar or duplicate versions exist. The og:url property identifies the permanent URL of the Open Graph object. For a normal indexable page, these URLs should generally agree. For example, decide whether the preferred address uses a trailing slash and HTTPS, then use that same canonical form in your internal links, sitemap and og:url. Avoid mixing a URL with tracking parameters, a redirected URL and a different canonical URL without a clear reason. Consistent URLs make it easier for search systems, social crawlers and visitors to understand which page is being shared. After changing a canonical URL or metadata, inspect the final URL and the HTML response rather than checking only the original address.
Why is Open Graph markup not found?
An error such as 'opengraph markup is not found' usually means that the inspector could not find the expected Open Graph properties in the HTML it received. It does not always mean that the page has no metadata anywhere. Some common causes are missing OG properties, tags placed outside the head element, metadata added only after client-side JavaScript runs, incorrect property names, empty content values or a crawler receiving a different HTML response. Redirects, access restrictions, server errors and CDN caching can also affect inspection. Check the actual page source or initial HTML response. Confirm that the properties use property rather than name, that the values are populated and that the intended page is being inspected. If the tags exist in your development source but are missing from the public response, fix the rendering or deployment process before testing again.
How to check Open Graph tags on a website
You can check Open Graph metadata manually by opening a page's source and searching for og:title, og:description, og:image and og:url. However, manual checking becomes repetitive when you have multiple pages or need to review the resulting image and social card layout. A dedicated Open Graph checker can make the process easier. OpenGraph Preview at https://ogpreview.epsingh.in/ provides a practical workflow. First, enter a public webpage URL to inspect its HTML response and extract its Open Graph, standard SEO and Twitter metadata. Next, review the detected values and check whether the image URL is reachable and has usable dimensions, aspect ratio and file size. Then compare the simulated Facebook, X, LinkedIn, WhatsApp, Discord and Slack layouts. You can also paste HTML when you need to test localhost, protected staging pages or an unpublished draft. Finally, edit the metadata in the preview and copy the generated HTML into your page head. The tool provides simulated previews and diagnostics; actual platform cards can differ because each platform controls its own rendering and cache.
How to fix an Open Graph image that is not showing
Start by checking whether og:image exists in the HTML and whether its content value points to the intended image. Open the image URL separately in a browser. It should load without authentication and return an image rather than an HTML error page. Check that the image is not blocked by your server, CDN or crawler rules. Confirm that the file is not broken, that the dimensions are suitable and that its format is compatible with the platform being tested. If the image was recently changed, the platform may still be showing an earlier cached preview. Use the platform's available debugging or re-scraping option when provided, then test the URL again. Also check for duplicate og:image properties, incorrect relative URLs, redirects to unexpected files and old image URLs remaining in your deployed HTML. A preview tool can help isolate page metadata and image-delivery problems, but the final result should still be checked on the destination platform.
Open Graph, SEO, AEO and GEO: how they fit together
Open Graph is one small part of a website's wider information architecture. Technical SEO makes sure a page can be crawled, rendered, indexed and connected to the correct canonical URL. Useful titles, descriptions, headings, internal links and original content help search systems understand the page and help visitors decide whether it answers their question. Answer Engine Optimisation, or AEO, focuses on making useful answers easy to find and understand. Put a direct answer near the beginning of the relevant section, define technical terms and follow short answers with enough context to make them accurate. FAQs can help organise common questions, but they should contain real answers rather than repeated keywords. Generative Engine Optimisation, or GEO, is commonly used to describe work that makes content easier for AI-powered search and answer systems to understand and reference. It is not a separate official Google markup standard. A practical approach is to use clear headings, accurate explanations, credible references, an identifiable author, relevant examples and consistent information across your website. Google's published guidance says its AI Search features rely on the same foundational SEO practices and do not require special AI markup or separate technical optimisations. Open Graph helps with social sharing; it does not replace these other parts of the website.
A practical publishing workflow for developers
Before publishing a page, prepare its search title, meta description, canonical URL, Open Graph title, Open Graph description and sharing image. Add the metadata in the page head using the method supported by your framework or CMS. Use page-specific values rather than copying the homepage metadata. Check that the initial HTML response contains the expected properties, especially when working with client-side rendering or dynamic routes. Inspect the public page and validate the image. Compare the simulated social cards, then use the destination platform's own debugging tools when necessary. After deployment, inspect important URLs again and retain a simple record of what changed. This workflow catches many metadata issues before a link reaches a customer, reader or social audience.
Practical checklist
- Add og:title, og:type, og:image and og:url to the page head.
- Write a useful og:description and use a relevant og:site_name.
- Use a unique title, description and image for each important page.
- Keep og:url consistent with the preferred canonical URL.
- Use a public absolute HTTPS image URL and check its response.
- Check image dimensions, aspect ratio, file size and format.
- Add meaningful og:image:alt text where appropriate.
- Make sure metadata is present in the HTML returned to crawlers.
- Check for duplicate properties, empty values and incorrect redirects.
- Test the live URL and pasted HTML with an Open Graph checker.
- Review the final preview on the social platforms that matter.
- Keep article content, author information and structured data accurate.
Frequently asked questions
What is Open Graph?
Open Graph is a protocol that uses metadata in a webpage's HTML to describe the page when its URL is shared. Social platforms can use these properties to create a link preview with a title, description and image.
What are Open Graph tags?
Open Graph tags are meta properties placed inside the head element of a webpage. The four basic properties are og:title, og:type, og:image and og:url. og:description and og:site_name are also commonly used.
What are Open Graph meta tags used for?
Open Graph meta tags provide information about a webpage when someone shares its URL. They help describe the page title, content type, image and description used in social sharing previews.
What is an Open Graph image?
An Open Graph image, also called an OG image, is the image a webpage provides for social sharing previews. It gives a visual representation of the page when someone shares its link.
What is Open Graph image used for?
An Open Graph image is used to represent a webpage visually in link previews. It may appear alongside the page title and description when a person shares a URL on a supported platform.
What is the recommended Open Graph image size?
A practical starting size is 1200 by 630 pixels, close to a 1.91:1 aspect ratio. Platform requirements can differ, so check the final crop and image format on the social networks you use.
Sources & references
Documentation and references used to check the technical and practical guidance in this article.
Open Graph metadata helps a webpage provide the right information when its link is shared. Start with the four basic properties, use a relevant image, keep URLs consistent and make sure your metadata is present in the HTML returned to crawlers. Test the result rather than assuming that the tags work because they exist in your source code. Open Graph is not a replacement for technical SEO, useful content or a clear website structure. It is one practical part of publishing a complete, share-ready webpage. Before sharing your next page, inspect its metadata with OpenGraph Preview at https://ogpreview.epsingh.in/ and fix any issues you find.
Have a related project or need a second opinion? Share the context and start a conversation .