When you finish building a beautiful website for a client, the first thing they are going to do is text the link to their friends or share it on social media. If that link shows up as plain text or grabs a random, poorly-cropped image from the footer, it immediately makes the business look unprofessional.
To fix this, you need to use Open Graph (OG) and Twitter Card meta tags. These invisible tags sit in the <head> of your website and dictate exactly what image, title, and description social platforms should display when your link is shared.
The Standard Meta Tag Blueprint
Copy this HTML snippet and place it in the <head> section of your site. Replace the bracketed [Data] with your specific page details.
Note: For the best results across all platforms (Facebook, LinkedIn, iMessage, WhatsApp), your og:image should be exactly 1200 x 630 pixels.
<!-- Primary Meta Tags -->
<title>[Page Title - Keep under 60 characters]</title>
<meta name="title" content="[Page Title]">
<meta name="description" content="[Page Description - Keep under 160 characters]">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="[Full Website URL]">
<meta property="og:title" content="[Page Title]">
<meta property="og:description" content="[Page Description]">
<meta property="og:image" content="[Absolute URL to 1200x630 Image]">
<!-- Twitter / X -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="[Full Website URL]">
<meta property="twitter:title" content="[Page Title]">
<meta property="twitter:description" content="[Page Description]">
<meta property="twitter:image" content="[Absolute URL to 1200x630 Image]">How to Test Your Tags
Never guess if your tags are working. Once your site is deployed, you can use free tools to scrape your link and see exactly what the preview card will look like before your client shares it.
- For Facebook/WhatsApp/LinkedIn: Use the official Facebook Sharing Debugger.
- For Twitter/X: Use the Twitter Card Validator.
If you update your image later and the old one is still showing on social media, you can use these exact same debugging tools to force the platforms to clear their cache and scrape your newest tags!