feat: implement og:url and og:type with Vitest test cases and demo update (#8)

[umsungjun]

• Add ogUrl and ogType props to ReactHeadSafe component
• Implement logic to manage og:url and og:type tags with duplicate prevention
• Add Vitest test cases to verify tag creation and update logic
• Update README.md and README.ko.md with the new API documentation
• Update the demo project to showcase practical usage of the new OG tags

Summary by CodeRabbit

• New Features

  • Added ogUrl and ogType Open Graph metadata properties to support enhanced social sharing previews.
  • Updated documentation and example applications to demonstrate new functionality.

• Tests

  • Added comprehensive test coverage for the new Open Graph properties.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-head-safe	Ready	Preview, Comment	Jan 30, 2026 0:49am

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request adds two new Open Graph metadata properties (ogUrl and ogType) to the ReactHeadSafe component's public API. These optional string props are integrated into the component's meta tag update logic, included in dependency arrays, reflected in type definitions, and covered by tests. Documentation and example files are updated to showcase the new functionality. Package version is bumped to 1.2.0.

Changes

Cohort / File(s)	Summary
Type Definitions & Component src/types.ts, src/ReactHeadSafe.tsx	Added ogUrl and ogType optional string properties to ReactHeadSafeProps interface. Component now destructures, uses, and includes these props in useLayoutEffect dependency array for meta tag updates.
Documentation README.md, README.ko.md	Extended API reference table and example usage sections to document the new ogUrl and ogType props with descriptions.
Tests src/test/ReactHeadSafe.test.tsx	Added tests for creating and preventing duplicates of og:url and og:type meta tags. Updated existing combined-props test to verify new properties alongside existing ones.
Examples examples/basic/index.html, examples/basic/src/pages/*	Added og:url and og:type meta tags to HTML file and passed ogUrl and ogType props to ReactHeadSafe components across Home, About, and Contact pages.
Version package.json	Bumped version from 1.0.2 to 1.2.0.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #7: Both PRs modify the same ReactHeadSafeProps interface and extend the ReactHeadSafe component's public API through type definition updates.
• PR #6: Both PRs extend the ReactHeadSafe test suite with additional test coverage for Open Graph metadata handling in the existing testing infrastructure.

Poem

🐰 Two properties, ogUrl and ogType, now belong,
To share with the world when posts are sung,
Meta tags dancing, social previews bright,
The rabbit hops forward with version delight! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main changes: adding og:url and og:type Open Graph tags with test coverage and demo updates.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/add-og-tags

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews:
  finishing_touches:
    unit_tests:
      enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!