Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 99x 99x 99x 99x 99x 99x | import React from 'react';
import {Helmet} from 'react-helmet-async';
import {useTranslation} from "react-i18next";
/**
* SeoHead is a React component for injecting SEO-related meta tags into the document head
* using `react-helmet`. It supports dynamic title and description localization via `react-i18next`,
* and constructs canonical/Open Graph/Twitter metadata based on the provided `pageKey` and `path`.
*
* @component
* @module components/ui/SeoHead
* @example
* // Inside a page component
* <SeoHead pageKey="home" path="/" />
*
* @param {string} pageKey - The translation key suffix for fetching SEO title and description.
* @param {string} path - The relative URL path of the page (e.g., "/projects").
*
* @returns {JSX.Element} A Helmet component injecting meta tags into the <head>.
*/
export default function SeoHead({pageKey, path}) {
const {t} = useTranslation();
const title = t(`seo.${pageKey}.title`);
const description = t(`seo.${pageKey}.description`);
const url = `https://danielemasone.github.io/ingdanielemasone/#${path}`;
const image = "https://danielemasone.github.io/ingdanielemasone/logo.jpg";
return (
<Helmet>
<title>{title}</title>
<meta name="description" content={description}/>
<link rel="canonical" href={url}/>
{/* Open Graph */}
<meta property="og:title" content={title}/>
<meta property="og:description" content={description}/>
<meta property="og:type" content="website"/>
<meta property="og:url" content={url}/>
<meta property="og:image" content={image}/>
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={title}/>
<meta name="twitter:description" content={description}/>
<meta name="twitter:image" content={image}/>
</Helmet>
);
}
|