# Hermoso: Why your link preview looks wrong, and how to fix it with Open Graph > Machine-readable twin of https://hermoso.ai/blog/fix-link-previews-open-graph/. Generated from the shipped page. Do not edit by hand. > Full agent guide: https://hermoso.ai/llms.txt · MCP: https://app.hermoso.ai/mcp [Blog](https://hermoso.ai/blog/) # Why your link preview looks wrong, and how to fix it with Open Graph A shared link with no image, the wrong title or last month's picture usually comes down to one of six causes. What each one looks like, how to fix it, and how to make Facebook and LinkedIn fetch the page again. By the Hermoso team · Published November 2, 2026 · 6 min read You share a link to your new landing page and the preview comes up with no picture, the title of your home page, or a banner from two campaigns ago. The page itself is fine. The preview is built from something else: a few lines of code in the page’s head that most people never see. This post covers the six causes behind most broken previews, in the order worth checking them. If you want the tags written for you, the free [Open Graph generator](https://hermoso.ai/tools/open-graph-generator/) builds them, escapes them properly and checks them against the limits below. ## How a link preview is made When a link is pasted into a post or a message, the app sends a crawler to the page. The crawler reads the ` ` tags in the ` ` and draws the card from them. Those tags come from the [Open Graph protocol](https://ogp.me/), which names four as required: - `og:title`: the title of the page as it should appear in the card. - `og:type`: what the page is, usually `website` or `article`. - `og:image`: the picture. - `og:url`: the page’s canonical URL, which the protocol calls its permanent ID. Add `og:description` and you have the card. A complete, minimal set looks like this: ` ` ## Cause 1: the tags are missing With no `og:` tags, each app has to fall back on whatever else it finds on the page, such as the ` ` or the first image, and what it picks is up to that app. That is how one link can look fine in one place and broken in the next. The fix is to state the four required tags plus a description on every page you expect people to share, not only the home page. A product page shared with the home page’s tags shows the home page’s card. ## Cause 2: the image URL is relative This one is easy to miss, because the page looks fine in your own browser. `content="/images/og.jpg"` works for a browser already on your site, but the crawler is outside it. Write the full address, starting with `https://` and your domain. The same goes for `og:url`. ## Cause 3: the image is the wrong size or shape Each platform states what it wants, and they happen to agree on a wide image: - **LinkedIn** says in its [guide to making a website shareable](https://www.linkedin.com/help/linkedin/answer/a521928) that the image should be at least 1200 × 627 pixels, at a recommended 1.91:1, and no larger than 5 MB. - **Meta**’s [sharing best practices](https://developers.facebook.com/docs/sharing/best-practices/) recommend images at least 1080 pixels wide for high-resolution screens, and at least 600 wide to display image link ads. - **X**’s large image card supports a 2:1 ratio from 300 × 157 up to 4096 × 4096 pixels, under 5MB, in JPG, PNG, WEBP or GIF, and does not support SVG, according to its [developer documentation](https://web.archive.org/web/20260204074639/https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image) (the original page now redirects, so this link goes through the Internet Archive). One size fits all three: **1200 × 630**. It clears LinkedIn’s 1200 × 627 minimum, it is wider than Meta’s 1080, and its ratio is 1200 ÷ 630 = 1.905, within 5% of X’s 2:1. A square or tall image will be cropped into a wide card, so keep the important part in the middle. The [aspect ratio calculator](https://hermoso.ai/tools/aspect-ratio-calculator/) shows what a centre crop keeps. Also state the size in the tags. Meta asks for `og:image:width` and `og:image:height` so its crawler can render the image immediately instead of downloading and processing it first. Its [webmaster guide](https://developers.facebook.com/docs/sharing/webmasters/) puts it simply: specify the height and width so the image loads properly the first time the page is shared. ## Cause 4: the tags are added by JavaScript Some site builders and single-page apps add meta tags after the page loads, in the browser. A crawler reading the HTML your server sends may never run that code, so it never sees the tags. Check the page’s source (View Source, not the inspector, which shows the page after scripts ran). If the tags are not in the source, the crawler probably cannot see them either. The fix belongs in your site’s settings or its server-side template. ## Cause 5: the special characters broke the tag A title with a double quote in it, like The "only" linen you need , ends the `content="..."` attribute early and the rest of the title is lost. Characters that matter inside an attribute have to be escaped: `"` becomes `"`, `&` becomes `&`, and ` You fixed the tags, re-shared, and the old card is still there. That is the cache. Apps store what they scraped and reuse it, and both big networks give you a tool to ask for a fresh look: - **Facebook:** paste the URL into Meta’s [Sharing Debugger](https://developers.facebook.com/tools/debug/). Meta’s [webmaster guide](https://developers.facebook.com/docs/sharing/webmasters/) says it shows which tags the crawler scraped, with any errors or warnings, and triggers a new scrape. Meta’s best practices add that scraped content otherwise updates on a standard 24 hour period. - **LinkedIn:** run the URL through [Post Inspector](https://www.linkedin.com/post-inspector/). LinkedIn’s [help page](https://www.linkedin.com/help/linkedin/answer/a6233775) is clear about the limit: the refresh only changes the preview for new posts. Posts that already include the URL keep the old one. That LinkedIn note is the one to remember before a launch. Check the preview before the first post goes out, because you cannot fix an old post by fixing the page. ## The twitter:card tag: one line, not four X reads Open Graph as well. Its [cards markup reference](https://web.archive.org/web/20260201012312/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup) lists a fallback for each tag: `twitter:title` falls back to `og:title`, `twitter:description` to `og:description`, `twitter:image` to `og:image`, and `twitter:image:alt` to `og:image:alt`. So you do not need to repeat everything. The one line to add is `twitter:card`: `summary_large_image` for a full-width picture, or `summary` for a small square one. Leave it out and the same reference says X may show a small summary card instead, which is why a big picture sometimes arrives as a thumbnail. The same reference caps a title at 70 characters, a description at 200 and alt text at 420. ## A five-minute pre-launch check - View the page source and find the `og:` tags. All four required ones, plus a description. - Check that `og:image` and `og:url` start with `https://`. - Open the image URL on its own in a browser. It should load, at 1200 × 630 or close. - Paste the URL into the Sharing Debugger and Post Inspector and read the cards. - Only then share it. ## Where Hermoso fits Hermoso is an AI marketing agent: it researches the ads already working in your market, makes on-brand image and video ads, schedules the posts to your own accounts and runs paid campaigns on your own ad accounts. A good link preview is what makes those posts worth clicking. Hermoso works in the web app, or inside Claude, ChatGPT and Cursor through its [MCP server](https://hermoso.ai/mcp/). ## Questions people ask ### Why does my link show no image on Facebook or LinkedIn? Usually the og:image tag is missing, uses a relative path instead of a full https:// address, or points at an image that is too small. LinkedIn asks for at least 1200 × 627 pixels. After fixing it, run the URL through Meta's Sharing Debugger or LinkedIn's Post Inspector so they fetch it again. ### What size should an Open Graph image be? 1200 × 630 pixels works across the big networks. It meets LinkedIn's 1200 × 627 minimum at about 1.91:1, is wider than the 1080 pixels Meta recommends, and is close to the 2:1 X supports for large image cards. ### How do I update a LinkedIn link preview? Fix the tags on the page, then enter the URL in LinkedIn's Post Inspector. The refreshed preview applies to new posts only. Posts that already contain the URL keep the old preview. ### Do I need twitter: tags if I have og: tags? Only twitter:card. X falls back to og:title, og:description, og:image and og:image:alt when the twitter: versions are missing.