Add Open Graph meta tags and OG image for rich link previews #24
Description
Problem
When sharing the site link on iOS Messages (and other platforms), the preview shows a small yellow favicon with just "portfolio" as text. There's no large card preview because the site has no Open Graph meta tags.
Goal
Show a large, rich link card with the name tag sticker as the preview image when the link is shared.
Steps
1. Create an OG image (1200×630px)
Create a static image that recreates the name tag component — red HELLO MY NAME IS header, cream center with "Rob" in the Simple Cakes font, and red footer. Save it as static/og-image.png.
Options:
- Screenshot the name tag from the site and crop/resize to 1200×630
- Recreate it in Figma/Canva at the correct dimensions
2. Add meta tags to index.html
Add these inside <head>:
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Robert Blakey" />
<meta property="og:description" content="Software engineer portfolio" />
<meta property="og:image" content="https://andimrob.github.io/og-image.png" />
<meta property="og:url" content="https://andimrob.github.io" />
<!-- Twitter/iMessage large card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Robert Blakey" />
<meta name="twitter:description" content="Software engineer portfolio" />
<meta name="twitter:image" content="https://andimrob.github.io/og-image.png" />Note:
og:imagemust be an absolute URL. If using a custom domain, update accordingly.
Key details
- Image must be at least 1200×630 to trigger the large card format
twitter:card=summary_large_imageis what iOS Messages uses for the large preview- Can verify with https://www.opengraph.xyz/ after deploying