To get a link preview business card that looks professional, set Open Graph tags (og:title, og:description, og:image, og:url) plus twitter:card=summary_large_image in your page source. Serve a 1200×630px image from an absolute https:// URL, declare its width and height, then force a fresh scrape in the Facebook Sharing Debugger. We build EcoCard links for sharing.
TL;DR:
- Social crawlers often ignore JavaScript, so place Open Graph and Twitter Card tags in the HTML returned by the server and verify them in source.
- Use a publicly accessible HTTPS image at 1200×630 pixels, below 1 MB, with declared dimensions; keep text and logos central because X crops image edges.
- If a preview fails, confirm the shared URL returns HTTP 200, matches the canonical URL, and serves a public image without login or expiring tokens.
- After fixing tags, force a fresh scrape with each platform’s debugger where available, but plan for caches to retain old previews for days or weeks.
- When you cannot edit the destination page, a branded link can serve custom tags before redirecting, but adds a hop and depends on its service.
Table of Contents
- What builds a link preview from Open Graph and Twitter Card tags?
- What are the exact steps to set a working preview?
- How should you design the preview image and headline?
- How do you diagnose and fix a broken preview?
- How do you test and refresh a preview on each platform?
- What if you can’t edit the destination page?
- How do you update link previews when your card details change?
- How does preview quality shape your professional reputation?
- What privacy controls should a card preview respect?
- How do you use EcoCard previews in email signatures and messaging apps?
- Why should publishers of digital business cards care?
- How does EcoCard keep previews reliable, and what should you try next?
- FAQ
- Sources
What builds a link preview from Open Graph and Twitter Card tags?
Platforms assemble a preview from a small set of tags in your page’s head. When they are missing, the platform guesses, and random page content often produces blurry thumbnails or irrelevant text. Set these:
- og:title, og:description, og:image, og:url and og:type for Open Graph.
- twitter:card, twitter:title, twitter:description and twitter:image for X.
- og:image:width and og:image:height, placed beside the image URL so platforms render it correctly.
The detail most people miss is timing. Social crawlers generally do not run JavaScript, so tags injected after the page loads in a single-page app are invisible to them. Your browser may show a perfect page while the crawler sees none of the tags. Put the metadata in the static HTML the server returns, and check what the platform sees with a debugger rather than trusting your browser.
What are the exact steps to set a working preview?
Work through these in order for any business-card link:
- Use the final public URL people will share, confirm it returns HTTP 200, and align og:url with the canonical URL.
- Use an absolute https:// address for og:image. The image must return 200 and be publicly fetchable, with no signed tokens or login.
- Set twitter:card to summary_large_image, keep titles within the recommended range and descriptions under about 160 characters.
- Serve the image in a suitable landscape format, under 1MB, as JPG or PNG, and declare og:image:width and og:image:height.
- After publishing, run the URL through a multi-platform preview checker, then force platform re-scrapes.
Pro Tip: Test the exact URL you will paste into a message, including any trailing slash or tracking parameters. A tidy-looking link that redirects somewhere else can show a different preview from the one you tuned.
How should you design the preview image and headline?
A preview is judged at thumbnail size, usually on a phone, in a fraction of a second. Design for that moment, not for the full-size file. Our own thinking on fast-scanning card layouts applies directly: one clear idea, high contrast, nothing fussy.
- Work on a 1200×630px canvas and keep the logo, face and any text inside the central safe zone, because X crops the edges.
- Keep the file under 1MB and use JPG or PNG. Avoid SVG and signed or expiring URLs.
- Use a short headline in a bold, readable weight.
- Add og:image:alt so screen readers and some platforms have a text description.
Speed matters as much as looks. Slow-loading images can fail silently on apps like WhatsApp, leaving a bare link. For layout inspiration, our mobile-first card examples show how simple compositions hold up at small sizes.
Rich social previews can make a link more engaging, and Ulinkly says platforms also treat them as a quality signal. That makes the image the cheapest improvement you can make.
How do you diagnose and fix a broken preview?
Broken previews usually involve several systems at once: the CMS, frontend, CDN, crawler and platform cache. Isolate them one at a time instead of changing everything together.
- Check the final public URL and its response codes, and confirm the canonical and og:url match.
- Fetch the raw HTML with curl or view-source and confirm the tags exist in the static source.
- Request the og:image URL directly: it should return HTTP 200, the right content type and a sensible size, with no signed token.
- Inspect redirects and canonical mismatches so the crawler sees the same page humans do.
- If the source is correct, force re-scrapes with each platform’s debugger. When only one platform is stale, treat it as cache timing.
Match the symptom to the likely cause:
| Symptom | Likely cause | Fix |
|---|---|---|
| Blank or generic card | og:image missing or relative path | Use an absolute https:// URL |
| Image works, then vanishes | CDN signed URL expired | Serve a permanent public URL |
| Tags visible in browser only | JavaScript-injected metadata | Move tags into static HTML |
| Preview fails for one crawler | robots rules or WAF blocking | Allow the social crawlers |
| Blurry or cropped image | Image too small or wrong dimensions declared | Use 1200×630px and declare it |
Relative paths such as /images/og.png are a classic cause, and absolute https:// URLs are the cure.
How do you test and refresh a preview on each platform?
Each major platform has its own tool, and they do different jobs:
- Facebook Sharing Debugger: paste the URL and use Scrape Again to pull fresh data.
- LinkedIn Post Inspector: use Inspect to re-fetch the page and see the title, image and description.
- Twitter Card Validator: confirm the card type renders as intended.
- WhatsApp: there is no public debugger, so rely on a preview checker and a test message to yourself.
A sensible sequence is to run a multi-platform preview checker, fix the tags, publish to production, force re-scrapes where available, then re-run the checker. Expect delays even so. Platform caches can hold a preview for days or weeks, and a forced scrape does not always clear every surface at once. Build that wait into any launch plan, and share the link only after your test passes.
What if you can’t edit the destination page?
Sometimes the page you want to share belongs to someone else. A branded preview link solves this: a short URL on your own domain that serves custom OG tags, then redirects visitors to the real destination. Preview link services work this way, so you control how the link looks without touching the destination site.
- Benefit: a consistent, professional preview for any destination.
- Trade-off: one extra redirect, reliance on the service, and a need for a stable image URL and correct cache control.
- Operational note: publish on a domain people recognise, confirm crawlers receive the tags, and test with a preview checker before sharing.
If the destination is your own card, you rarely need this. Our guide to creating a live digital business card covers the cleaner route.
How do you update link previews when your card details change?
Job titles, phone numbers and logos change, but a cached preview does not. Treat the preview as a living asset tied to the card, not a one-off setup.
Keep the share URL permanent and change the content behind it. If the URL stays the same, anyone holding your old message or email still lands on current details. Generate og:title and og:description from the same record that holds the card’s name and role, so a role change updates the page and the tags together rather than drifting apart.
Keep the image URL stable too. If you replace a photo, overwrite the file at the same address or update og:image to a new permanent URL, and declare the dimensions again. Then force a re-scrape on the platforms where you are active, because caches will otherwise serve the old version for a long while.
For teams, put one person or one admin in charge of this. When a promotion or rebrand lands, run the checklist once, test in a preview checker, and re-scrape the debuggers. A short standing routine beats discovering a stale preview in front of a client. We built central management into EcoCard so changes to roles, details and branding flow to every card.
How does preview quality shape your professional reputation?
A preview is often the first thing someone sees of you, before they open anything. A clean card with your name, role and a clear image signals that you are organised. A bare URL, a stretched logo or a generic site title signals the opposite, even if your actual profile is excellent.
Practitioners often read a weak or broken preview as a sign of an outdated or unreliable profile. That judgement is unfair but common, and it happens in seconds.
Consistency does most of the work. Branding, logo and call to action in your preview should match your site copy, so a contact who clicks feels they have arrived where they expected. A mismatch, such as an old company name in the preview and a new one on the page, creates doubt.
Think about where the link travels: a LinkedIn message, a follow-up email, a group chat after an event. In each place, the preview is doing the introduction for you. Our notes on avoiding mistakes when adding LinkedIn show how small details in a shared link change how it reads.
What privacy controls should a card preview respect?
A preview is public by design. Anything in og:title, og:description or og:image can be read by a crawler, cached by a platform and shown to people you never intended to reach. That changes what you should put there.
Keep personal contact details out of the tags. A preview needs a name, a role and perhaps a company, not a mobile number, home address or private email. Those can sit behind the click, on the card itself, where you control what is shown.
Check the image as well. A photo with a visible phone number, a badge with a staff ID, or a background that shows a workplace layout all travel with the preview. Once cached, an image can persist after you change it, which is another reason to decide carefully before publishing.
If a card is meant for a limited audience, remember that blocking crawlers also removes the preview. That is a real trade-off: privacy and polish pull in opposite directions, so decide which matters for each link. For event or team cards, our write-up on pronoun choices and digital privacy shows how to think about what you display publicly.
How do you use EcoCard previews in email signatures and messaging apps?
Email signatures and chat apps treat links differently, so test each. Many email clients do not render previews at all, which means the link text and a short call to action carry the weight. A label such as “View my card” beats a raw URL.
In messaging apps, the preview does the work. Paste your EcoCard link into a message to yourself first and check the title, image and description before sending it to a client. If it looks wrong, fix the tags and re-scrape rather than sending and hoping.
Use one permanent card URL everywhere, in your signature, your LinkedIn message templates and your event follow-ups. A single stable link means one preview to maintain and one place to update. Our comparison of email signatures and digital cards explains why a live card avoids stale details in old emails.
For events, pair the link with a QR code on a slide or badge. Scanning opens the same page, and sharing the link afterwards shows the same polished preview. See our QR code business card guide for print-ready sizing.
Why should publishers of digital business cards care?
Most people will meet your card through its preview, not its page. When that preview is reliable, networking has less friction: the contact recognises you, trusts the link and taps through. When it breaks, you look careless before you have said a word.
For teams, the risk multiplies. A team with hand-edited cards has more chances for a stale logo or wrong title. Central management removes that. With EcoCard, one admin updates branding and details, and every card follows.
— Chris
How does EcoCard keep previews reliable, and what should you try next?
Our cards give you:
- Shareable links and QR or direct-link sharing, so one card works everywhere.
- Live updates, so changed roles and details show without re-sending anything.
- Central team management for consistent branding across every card.
- A features page and examples so you can see how cards present when shared.
The simplest next step is to create a card, share its link with yourself, and check the preview with the workflow above. When you are ready, our pricing page lists every plan, including Individual at 9.99 NZD per month.
FAQ
How do I show my Facebook link on a business card?
Add your Facebook page URL to the social links on your digital card, so it opens with one tap. If you want the card’s own link to preview nicely when shared on Facebook, set Open Graph tags and run the URL through the Sharing Debugger.
How do I create a card link?
Create a digital card, then copy its public share URL. Check that it returns HTTP 200 and has Open Graph tags in the page source. Our guide to creating a digital business card walks through it.
How do I set up a LinkedIn business card?
Add your LinkedIn profile URL to your card’s social links, then share the card link in a LinkedIn message. Use LinkedIn Post Inspector to refresh the preview if it looks outdated.
Can I keep multiple business cards on one page?
Yes, if your platform supports several cards or roles under one account. Each card should keep its own URL and preview, so the title and image match the role being shared.
Sources
Recommended
- Make QR Code Business Cards Print Ready for Professionals: 2 cm Min
- 10 Mobile First Digital Business Card Examples for Professionals
- Secure, live digital business card: QR, link & vCard for professionals
- vCard Files: Fix Import Errors, Then Share Contact Details Live
This article was produced with AI assistance and reviewed for accuracy. It is provided for general information only and is not professional advice.
