What is OpenGraph — control how your pages look on social media
OpenGraph is a protocol that lets you define exactly how your pages appear when shared on Facebook, LinkedIn, X, and other social platforms — title, description, and image.
The preview problem
When someone shares a link on Facebook, LinkedIn, or X (formerly Twitter), the platform automatically generates a preview card — a thumbnail, title, and short description. If you have not configured anything, the platform guesses: it picks whatever image it finds first on the page, takes the first paragraph of text it can scrape, and produces a result that may look completely wrong.
A hotel shares a link to their seasonal offer page. The preview shows their cookie consent banner image and the text from their navigation menu. Not ideal.
OpenGraph is the solution.
What OpenGraph is
OpenGraph (OG) is a protocol created by Facebook in 2010 and now universally supported by every major social platform and messaging app. It uses <meta> tags in your page's <head> to explicitly declare:
- og:title — the title that should appear in the preview card
- og:description — the description text
- og:image — the image to use for the preview thumbnail
- og:url — the canonical URL of the page
- og:type — the type of content (website, article, product, etc.)
When a platform crawls a URL to generate a preview, it reads these tags first and uses them rather than guessing from the page content.
Why it matters
Click-through rates. A well-configured OG image and title dramatically outperforms a randomly scraped image and truncated paragraph. Social sharing is often the primary traffic driver for articles, events, and promotions. A bad preview kills that potential.
Brand consistency. Every link shared to your site is an impression. With proper OG tags, every share shows your chosen image — your hero shot, your event poster, your product photo — framed by your headline and description.
Messaging control. Different pages serve different purposes. Your homepage, your about page, your latest article, and your pricing page should each have different titles and descriptions when shared. OG tags let you customise each one independently.
Twitter Cards
Twitter/X uses its own equivalent system called Twitter Cards. The tags are slightly different (twitter:title, twitter:description, twitter:image, twitter:card), but the purpose is identical. The card type summary_large_image produces the large preview card that performs best for content-driven pages.
In practice, most sites implement both OpenGraph and Twitter Cards. Many platforms fall back to OG tags when Twitter Card tags are absent, but publishing both leaves the least to chance.
Per-article overrides
Site-wide OG configuration — a global default image and description — is the minimum. But the most effective implementation allows each article or page to override the defaults with its own title, description, and image.
For a Joomla blog or news site, this means every article gets its own OG image (ideally the article's featured image) and its own OG description (ideally the article's custom meta description). Each shared link looks distinct and relevant.
How AI Boost for Joomla handles OpenGraph
AI Boost for Joomla injects OpenGraph and Twitter Card meta tags automatically on every page. You configure a global default image (1200×630 pixels is the recommended size) and the plugin handles the rest.
For per-article customisation, the plugin integrates with Joomla's Custom Fields system. Add a custom field for OG image override, OG title override, and OG description override to your article type, and the plugin reads them automatically — no template modifications required.
The Open Graph screen in the plugin controls all of this: toggle OpenGraph on, upload your default image, and it applies across your entire Joomla installation immediately.