feat(route): enhance Open Graph metadata handling for bots

- Refactored the GET route to dynamically generate Open Graph and Twitter meta tags based on available link metadata.
- Added support for conditional rendering of meta tags, improving SEO and social media sharing capabilities.
- Ensured that the response includes appropriate meta tags for both Open Graph and Twitter cards, enhancing link previews.
This commit is contained in:
crbon 2026-01-22 13:11:59 +10:00
parent 95074fa38d
commit 39d4c6fc93

View file

@ -55,11 +55,22 @@ export async function GET(request: Request, { params }: { params: Promise<{ slug
userAgent,
);
if (isBot && (link.ogTitle || link.ogDescription || link.ogImageUrl)) {
if (isBot) {
const ogTitle = escapeHtml(link.ogTitle || link.name);
const ogDescription = escapeHtml(link.ogDescription || '');
const ogImageUrl = escapeHtml(link.ogImageUrl || '');
const url = escapeHtml(link.url);
const ogDescriptionTag = ogDescription
? `<meta property="og:description" content="${ogDescription}">`
: '';
const ogImageTag = ogImageUrl ? `<meta property="og:image" content="${ogImageUrl}">` : '';
const twitterCard = ogImageUrl ? 'summary_large_image' : 'summary';
const metaDescriptionTag = ogDescription
? `<meta name="description" content="${ogDescription}">`
: '';
const twitterDescriptionTag = ogDescription
? `<meta name="twitter:description" content="${ogDescription}">`
: '';
const twitterImageTag = ogImageUrl ? `<meta name="twitter:image" content="${ogImageUrl}">` : '';
return new Response(
`
@ -68,14 +79,21 @@ export async function GET(request: Request, { params }: { params: Promise<{ slug
<head>
<meta charset="utf-8">
<title>${ogTitle}</title>
<meta name="title" content="${ogTitle}">
${metaDescriptionTag}
<meta property="og:type" content="website">
<meta property="og:site_name" content="Umami">
<meta property="og:title" content="${ogTitle}">
<meta property="og:description" content="${ogDescription}">
<meta property="og:image" content="${ogImageUrl}">
<meta property="og:url" content="${url}">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="${request.url}">
${ogDescriptionTag}
${ogImageTag}
<meta name="twitter:card" content="${twitterCard}">
<meta name="twitter:title" content="${ogTitle}">
<meta name="twitter:description" content="${ogDescription}">
<meta name="twitter:image" content="${ogImageUrl}">
${twitterDescriptionTag}
${twitterImageTag}
</head>
<body></body>
</html>