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 | 60x 60x 60x 60x 60x 60x | import React from 'react';
import {useTranslation} from "react-i18next";
/**
* SeoHead is a React component for injecting SEO-related meta tags into the document head
* using React 19 native <head> support. Supports dynamic title and description localization.
*
* @component
* @module components/seoHead/SeoHead
* @example
* <SeoHead pageKey="home" path="/" />
*
* @param {string} pageKey - Translation key suffix for SEO title and description.
* @param {string} path - Relative URL path of the page (e.g., "/projects").
*
* @returns {JSX.Element} Meta tags injected into <head>.
*/
export 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 logo = "https://danielemasone.github.io/ingdanielemasone/logo.png";
return (
<>
<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={logo}/>
{/* 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={logo}/>
</>
);
}
|