📌 What Are Meta Tags & Why They Matter?
Meta tags are elements inside the <head> of your HTML page that help:
🔍 Search engines understand your content (SEO)
📱 Social media generate previews (Facebook, Twitter, LinkedIn)
🌍 Improve accessibility and browser behavior.
⚠️ Problem in React
In traditional HTML, you control the <head> directly.
But in React:
- Components render inside
<body> - Managing
<head>dynamically is not straightforward.
✅ Solution: React Meta Hooks
react-meta-hooks lets you manage meta tags easily inside React components using hooks.
👉 You can:
- Set page titles
- Add meta descriptions
- Manage Open Graph (Facebook)
- Add Twitter meta tags
- Define canonical links
Installation
npm install react-meta-hooks
Basic Usage
The library provides hooks to manage metadata directly inside your components.
Example: Using react-meta-hooks
// index.js
import React from "react";
import ReactDOM from "react-dom";
import { MetaProvider } from "react-meta-hooks";
import App from "./App";
ReactDOM.render(
<MetaProvider>
<App />
</MetaProvider>,
document.getElementById("root")
);
// App.js
import React from "react";
import HomePage from "./HomePage";
import AboutPage from "./AboutPage";
import BlogPost from "./BlogPost";
import ProductPage from "./ProductPage";
function App() {
return (
<div>
<HomePage />
<AboutPage />
<BlogPost />
<ProductPage />
</div>
);
}
export default App;
Example 1: useTitle
// HomePage.js
import React from "react";
import { useTitle } from "react-meta-hooks";
function HomePage() {
useTitle("Welcome to My App");
return <h1>Home Page</h1>;
}
export default HomePage;
Example 2: useMeta
// AboutPage.js
import React from "react";
import { useMeta } from "react-meta-hooks";
function AboutPage() {
useMeta({ name: "description", content: "Learn more about our company" });
useMeta({ name: "keywords", content: "react, meta, hooks, SEO" });
return <h1>About Us</h1>;
}
export default AboutPage;
Example 3: useSocialMeta
// BlogPost.js
import React from "react";
import { useSocialMeta } from "react-meta-hooks";
function BlogPost() {
useSocialMeta({
ogTitle: "React Meta Hooks Blog",
ogDescription: "A modern way to manage head tags",
twitterCard: "summary_large_image",
ogImage: "https://example.com/blog-image.png"
});
return <h1>Blog Post</h1>;
}
export default BlogPost;
Example 4: useStructuredData
// ProductPage.js
import React from "react";
import { useStructuredData } from "react-meta-hooks";
function ProductPage() {
useStructuredData({
"@context": "https://schema.org",
"@type": "Product",
"name": "Super Gadget",
"brand": "TechCorp",
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "99.99"
}
});
return <h1>Product Details</h1>;
}
export default ProductPage;
Top comments (0)