-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSeo.jsx
More file actions
71 lines (61 loc) · 2.31 KB
/
Seo.jsx
File metadata and controls
71 lines (61 loc) · 2.31 KB
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React from 'react';
import { useLocation } from 'react-router-dom';
const BASE_URL = 'https://fezcode.com';
/**
* Seo Component - A React 19 compatible component for managing site metadata.
* It renders meta tags directly in the component tree, which React 19 hoists to the <head>.
* This ensures that static site generators like react-snap can capture the metadata
* even before hydration, as long as the component is rendered.
*/
const Seo = ({
title,
description,
image,
keywords,
ogImage,
twitterImage,
type,
}) => {
const location = useLocation();
if (!title || title === 'Fezcodex' || title === 'fezcodex') return null;
const currentUrl = BASE_URL + location.pathname;
const isAppPath = location.pathname.startsWith('/apps');
const defaultImage = isAppPath
? '/images/asset/ogtitle-apps.png'
: '/images/asset/ogtitle.png';
const rawImage = image || ogImage || twitterImage || defaultImage;
const finalImage = rawImage.startsWith('http')
? rawImage
: BASE_URL + (rawImage.startsWith('/') ? '' : '/') + rawImage;
const finalKeywords = Array.isArray(keywords)
? keywords.join(', ')
: keywords;
const finalType =
type || (location.pathname.startsWith('/blog') ? 'article' : 'website');
return (
<>
<title>{title}</title>
<meta name="description" content={description} />
{finalKeywords && <meta name="keywords" content={finalKeywords} />}
{/* Open Graph / Facebook */}
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={finalImage} />
<meta property="og:url" content={currentUrl} />
<meta property="og:type" content={finalType} />
<meta property="og:site_name" content="Fezcodex" />
{finalImage.startsWith('https') && (
<meta property="og:image:secure_url" content={finalImage} />
)}
{/* 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={finalImage} />
<meta name="twitter:url" content={currentUrl} />
{/* Canonical */}
<link rel="canonical" href={currentUrl} />
</>
);
};
export default Seo;