Open Graph Metadata for a Personal Website — Make Shared Links Look Intentional
Have you ever shared a carefully written article in a chat, only to see it arrive as a lonely blue URL or with an unrelated image? The page itself may be excellent, but the preview makes it look unfinished. Open Graph metadata is the small layer of presentation that helps a personal website introduce itself before someone opens the door.
This is not about decorating links for vanity. A clear title, useful description, and recognizable image give readers enough context to decide whether a link deserves their attention. In this guide, we will build a dependable social preview, understand how platforms interpret it, and avoid the common traps that make metadata quietly fail.
What Open Graph metadata actually does
Open Graph is a metadata vocabulary originally introduced by Facebook. It lets a page describe its title, content type, canonical URL, image, and other details through <meta> elements inside the document's <head>. Messaging apps and social networks can read those elements and turn an ordinary URL into a compact card.
Think of the card as the label on a homemade jar. The contents remain the important part, but a label tells someone whether the jar contains coffee, chili sauce, or screws. Without a label, every recipient must open it to find out. Open Graph gives a crawler that concise label without changing the article readers see.
It is also important to set expectations: Open Graph is a hint, not a command. Platforms may crop an image, shorten a description, cache an old response, or decline to show a card. Good metadata gives them clean source material, but each platform still controls its final interface.
The essential tags for an article
A useful implementation does not need dozens of properties. Start with og:title, og:description, og:type, og:url, and og:image. Add the image dimensions and alt text so consumers do less guessing. An article page can use the following baseline:
<meta property="og:title" content="Open Graph Metadata for a Personal Website">
<meta property="og:description" content="Build clear, dependable link previews without handing your identity to a social platform.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/open-graph-metadata/">
<meta property="og:image" content="https://example.com/static/img/open-graph-card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A browser window connected to a link preview card">Use absolute HTTPS URLs for og:url and og:image. A browser can resolve /static/img/card.png, but not every external crawler handles relative paths consistently. The URL should also be the public canonical address, not a development hostname, tracking link, or internal IP.
The description should explain the specific page rather than repeat the site tagline. Aim for one natural sentence. Keyword stuffing reads badly and does not guarantee more visibility. The title can be slightly shorter than the on-page heading if the original is too long for a compact card, but it should still identify the same work.
Choose an image that survives the crop
The image is often the largest part of a preview and the easiest part to get wrong. A 1200 by 630 pixel image is a widely supported starting point, although a 1200 by 675 image can also work well for 16:9 layouts. Keep the subject near the center and leave breathing room around important details because different clients crop differently.
Avoid placing essential information in tiny text inside the image. On a phone, a beautiful desktop composition may shrink to the size of a postage stamp. If the card only makes sense after someone reads six words embedded in it, the illustration is doing the description's job. Strong shapes, clear contrast, and a recognizable visual theme usually age better.
Give each important article its own image when practical, but define a sensible site-wide fallback. The fallback prevents an empty card when an older page has no thumbnail. It should represent the site honestly, not pretend every page has a custom illustration.
Generate metadata from one source of truth
Hand-writing tags on a five-page website is manageable. Hand-writing them across years of posts eventually produces mismatched URLs, stale titles, and copied descriptions. A CMS or static-site template should generate metadata from the same title, summary, canonical URL, and thumbnail used by the page itself.
The key is escaping. Titles and descriptions are content placed inside an HTML attribute, so quotes, ampersands, and angle brackets must be encoded safely. Most template systems provide an attribute-escaping function. Use that function rather than trying to replace a few characters manually.
<meta property="og:title" content="<?= htmlspecialchars($post['title'], ENT_QUOTES, 'UTF-8') ?>">
<meta property="og:description" content="<?= htmlspecialchars($post['excerpt'], ENT_QUOTES, 'UTF-8') ?>">
<meta property="og:url" content="<?= htmlspecialchars($canonicalUrl, ENT_QUOTES, 'UTF-8') ?>">
<meta property="og:image" content="<?= htmlspecialchars($imageUrl, ENT_QUOTES, 'UTF-8') ?>">Do not derive a description by blindly cutting raw HTML at an arbitrary byte count. That can expose shortcodes, collapse words, or split a multibyte character. Prefer a deliberate excerpt field; otherwise, strip markup, normalize whitespace, and truncate at a word boundary.
Add Twitter Card tags without duplicating your thinking
Many services understand Open Graph, while X and some compatible clients also recognize Twitter Card metadata. You can support both without maintaining two separate editorial systems. Reuse the same title, description, and image values, then specify the card format.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph Metadata for a Personal Website">
<meta name="twitter:description" content="Build clear, dependable link previews without handing your identity to a social platform.">
<meta name="twitter:image" content="https://example.com/static/img/open-graph-card.png">
<meta name="twitter:image:alt" content="A browser window connected to a link preview card">Duplicating output tags is fine; duplicating the underlying content decisions is not. One metadata model should feed every format. That way, changing an article title does not leave one network showing last month's wording.
Multilingual pages need locale-aware cards
A translated page should describe itself in its own language. Its og:title, og:description, and og:url should match that locale's visible page and canonical URL. Set og:locale with values such as en_US, id_ID, or de_DE, and optionally declare other available versions with og:locale:alternate.
This works alongside, not instead of, hreflang. Open Graph helps preview consumers; hreflang helps search engines understand equivalent localized pages. Keeping both generated from the same translation records reduces a subtle failure where an Indonesian URL displays an English card.
Test the response a crawler receives
Viewing page source is a good first check, but test the public response too. Metadata rendered only after client-side JavaScript may be invisible to crawlers that do not execute scripts. Server-rendering the tags is the safest default. A quick command-line inspection can reveal redirects, blocked requests, and missing elements:
curl -L -s https://example.com/open-graph-metadata/ | grep -E 'og:|twitter:'Then use the sharing debugger offered by the platform you care about. Debuggers often show the fetched values and request a fresh crawl. If a card still shows an old image, check CDN caching, platform caching, image accessibility, response content type, and robots rules before changing random tags.
Also test with a private browser window or a simple HTTP client. A crawler cannot use your admin session, accept a local TLS exception, or reach a private hostname. The HTML and image must both be publicly available without cookies. Return a real image MIME type and avoid an image URL that redirects through an authentication page.
Common failures worth checking
Most broken cards come from ordinary plumbing: a relative image URL, an image below the minimum size, a canonical URL pointing elsewhere, metadata accidentally emitted in the body, or a firewall blocking unfamiliar user agents. Duplicate tags can be equally confusing when a theme and an SEO plugin both generate different values.
Create a small publishing checklist: exactly one primary value per property, absolute public URLs, a successful image response, useful alt text, correct locale, and a card tested after publication. Include metadata in automated page tests if your site has them. A simple assertion is cheaper than discovering six months later that every article has shared the same placeholder.
Conclusion: let the link make an honest introduction
Open Graph metadata is a small feature with an unusually visible result. It does not improve the substance of an article, but it helps that substance travel with context. A focused set of tags, a resilient image, template-based generation, locale awareness, and public-response testing are enough for a dependable implementation.
A personal website should remain the home of the work; social platforms are only places where its links pass through. Giving those links a clear, honest introduction preserves that relationship. If you maintain a personal site, inspect one of your recent URLs in a sharing debugger today. Share what failed, or what unexpectedly worked, in the comments so other site owners can improve their own cards.