Skip to content

Feat/add twitter og support #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
umsungjun merged 3 commits into from
Feb 5, 2026
Merged

Feat/add twitter og support #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5bee7c1
feat: add robots.txt for example project
umsungjun Feb 5, 2026
9d4d433
feat: add Twitter meta tags to basic example
umsungjun Feb 5, 2026
0ae5a9d
feat: add Google site verification meta tag to basic example
umsungjun Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions examples/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,17 @@
<meta property="og:image" content="/logo.png" />
<meta property="og:url" content="https://react-head-safe.vercel.app/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="(main) React Head Safe" />
<meta
name="twitter:description"
content="(main) A CSR-only React head manager that prevents duplicate meta tags."
/>
<meta name="twitter:image" content="/logo.png" />
Comment on lines +22 to +28
Copy link

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🌐 Web query:

Twitter Card meta tag image URL requirements absolute vs relative path

💡 Result:

For Twitter/X Cards, the twitter:image value should be a fully-qualified (absolute) URL—i.e., include scheme + host + full path, like:

<meta name="twitter:image" content="https://example.com/images/card.jpg">

Relative paths (e.g., /images/card.jpg) commonly fail because Twitterbot can’t reliably resolve them when scraping. [2], [6]

Also avoid protocol-relative URLs (e.g., //example.com/image.jpg); use an explicit https:// URL instead. [8]

X’s card markup docs define twitter:image as a “URL of image to use in the card” and specify key constraints (e.g., supported formats, < 5MB, etc.). [3], [1]

Sources: X Developer Platform docs on Cards markup / Summary Card image constraints [3], [1]; reported behavior in practice that Twitter Cards require absolute (not relative / not protocol-relative) image URLs [2], [8].

🏁 Script executed:

# Check the full context of the HTML file
cd examples/basic && cat -n index.html | head -40

Repository: umsungjun/react-head-safe

Length of output: 1612

🏁 Script executed:

# Look for other social meta tags in the file to see URL patterns
cd examples/basic && rg 'meta name.*content' index.html -A 0

Repository: umsungjun/react-head-safe

Length of output: 403

Use absolute URLs for twitter:image and og:image.

Twitter/X Cards require fully-qualified absolute URLs for the twitter:image meta tag; relative paths like /logo.png will fail with Twitterbot and prevent card images from displaying. The same applies to og:image for consistency and OpenGraph compliance.

Required changes 
-    <meta property="og:image" content="/logo.png" />
+    <meta property="og:image" content="https://react-head-safe.vercel.app/logo.png" />
     <meta property="og:url" content="https://react-head-safe.vercel.app/" />
     <meta property="og:type" content="website" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="(main) React Head Safe" />
     <meta
       name="twitter:description"
       content="(main) A CSR-only React head manager that prevents duplicate meta tags."
     />
-    <meta name="twitter:image" content="/logo.png" />
+    <meta name="twitter:image" content="https://react-head-safe.vercel.app/logo.png" />
🤖 Prompt for AI Agents 
In `@examples/basic/index.html` around lines 22 - 28, The twitter:image (and
corresponding og:image) meta tags use a relative path (/logo.png) which will
fail for Twitter/X and OpenGraph; update the content attributes for the meta
tags named "twitter:image" and "og:image" to use fully-qualified absolute HTTPS
URLs (including protocol and domain), or wire them to a runtime/template
variable that inserts the site's origin so the meta values are absolute.

<meta
name="google-site-verification"
content="FkVxpqkKnBQlSm1tgTF-GyQP0GLfhX_z03E6h21lipo"
/>
</head>
<body>
<div id="root"></div>
Expand Down
2 changes: 2 additions & 0 deletions examples/basic/public/robots.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
User-agent: *
Allow: /