What is Open Graph?
Open Graph is a protocol developed by Facebook that lets web pages use meta tags to define which title, description, and image a shared link shows as a preview in social networks and messengers such as WhatsApp.
Open Graph: definition and meaning
When you paste a link into WhatsApp, LinkedIn, Facebook, or Slack, a preview card with an image, title, and description usually appears. The services take this data from the Open Graph tags in the head of the page. Facebook introduced the protocol in 2010, and today nearly all platforms and messengers read it.
Without Open Graph, the services guess: they pick some image from the page, truncate the title awkwardly, or show no preview at all. For companies, that is an image problem, because links are often forwarded by third parties—customers, partners, and employees—and the first impression is formed in the chat preview.
The most important Open Graph tags
Open Graph declarations are placed as meta elements with the prefix og: in the head of the page. Four tags count as the standard, supplemented by others such as og:site_name or og:locale. X (formerly Twitter) also uses its own Twitter Card tags but falls back to Open Graph.
- og:title – title of the preview
- og:description – short description in one or two sentences
- og:image – preview image, typically 1200 × 630 pixels (about 1.91:1)
- og:url – preferred address of the page
- og:type – type of content, for example website or article
Real-world example: a roofing company
A roofing company sends quotes and reference pages via WhatsApp. So far, the preview shows a random photo and the text “Home.” After the Open Graph tags are added, a reference photo with the company logo appears, plus a clear title and one sentence about the scope of services. The links look more trustworthy.
WhatsApp, Facebook, and LinkedIn cache previews. On Facebook and LinkedIn you can refresh the cached version with the Sharing Debugger or the Post Inspector; on WhatsApp it can take a while until the new preview appears. Plan for this waiting time when you make changes.
Benefits, limits, and common mistakes
Open Graph does not influence Google rankings, but it makes sure shared links look professional. That increases the chance that they are clicked and that recipients immediately see who sent the link. This pays off especially for quotes, job ads, or references sent by chat. Typical stumbling blocks:
- Image missing, too small, or in the wrong format
- Relative instead of absolute image URL
- Identical declarations on all subpages
- Preview image without a logo or with text that is unreadable in small tiles
- Image not retrievable, for example behind a login
Implementation
Nano Concepts builds complete meta and social sharing tags into every web project, including a featured image with the company logo, so that links sent via WhatsApp, LinkedIn, and others look clean. For stores and magazines, title and image can be generated automatically from the content of each page.
Frequently asked questions about Open Graph (social sharing preview)
The usual size, also recommended by Facebook, is 1200 × 630 pixels, or about 1.91:1. The image should be retrievable at a full URL and have a moderate file size. Keep the logo in the center, because previews are cropped differently.
Common causes are missing or faulty og tags, an image that is too large or not retrievable, and an outdated cached version. Check the source code and the availability of the image URL, and allow some time after changes until the preview updates.
Not necessarily. X falls back to Open Graph tags if no Twitter Card tags are present. For a large image card, though, you should set twitter:card to summary_large_image, otherwise only a small preview appears.
Matching services
Web Design
Websites that show your brand clearly and guide visitors straight to an inquiry – designed with LOMA DESIGN.
Learn more
Web Development
Websites with real functionality: calculators, forms, customer portals and integrations – cleanly programmed and fast.
Learn more
Technical SEO & Relaunch
Relaunch and technical SEO with a redirect plan, load-time optimization and monitoring – together with LOMA DESIGN.
Learn moreRelated terms
Relevant for these industries
Related magazine articles
SEO and Search Visibility: Technology, Content and AI Search
Good rankings come from technology, content and consistent measurement – and increasingly from whether AI search tools use your pages as a source. Here is how your website becomes visible and generates qualified inquiries.
Read more
Website Relaunch Without Losing Rankings: Guide and Checklist
New design, new system – and suddenly visitors stay away? Here is how to protect rankings and inquiries during a website relaunch: with a redirect plan, technical check, go-live checklist and monitoring.
Read more
Conversion Optimization for Landing Pages: Test, Don’t Guess
The campaign is running, but hardly anyone gets in touch? With a clear structure, short forms, fast technology and hypothesis-based tests you turn existing traffic into more inquiries.
Read more
