awesome-prometheus-alerts/site/src/components/SEO.astro
2026-04-07 16:47:39 +02:00

56 lines
2.1 KiB
Text

---
import { SITE_NAME, AUTHOR_NAME, TWITTER_HANDLE } from '../data/site';
interface Props {
title: string;
description: string;
canonicalUrl: string;
ogImage?: string;
ogType?: string;
keywords?: string;
jsonLd?: object | object[];
base: string;
siteUrl: string;
datePublished?: string;
dateModified?: string;
}
const { title, description, canonicalUrl, jsonLd, keywords, datePublished, dateModified, base, siteUrl } = Astro.props;
const ogType = Astro.props.ogType ?? 'website';
const ogImage = Astro.props.ogImage ?? `${base}/images/prometheus-logo.png`;
const fullOgImage = ogImage.startsWith('http') ? ogImage : `${siteUrl}${ogImage}`;
const jsonLdArray = jsonLd
? Array.isArray(jsonLd) ? jsonLd : [jsonLd]
: [];
---
<title>{title}</title>
<meta name="description" content={description} />
{keywords && <meta name="keywords" content={keywords} />}
<link rel="canonical" href={canonicalUrl} />
<!-- Open Graph -->
<meta property="og:type" content={ogType} />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={fullOgImage} />
<meta property="og:image:alt" content={`${title} — Prometheus alert rules`} />
<meta property="og:site_name" content={SITE_NAME} />
<meta property="og:locale" content="en_US" />
{ogType === 'article' && datePublished && <meta property="article:published_time" content={datePublished} />}
{ogType === 'article' && dateModified && <meta property="article:modified_time" content={dateModified} />}
{ogType === 'article' && <meta property="article:author" content={AUTHOR_NAME} />}
<!-- Twitter Card -->
<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={fullOgImage} />
<meta name="twitter:site" content={TWITTER_HANDLE} />
<meta name="twitter:creator" content={TWITTER_HANDLE} />
{jsonLdArray.map((schema) => (
<script type="application/ld+json" set:html={JSON.stringify(schema)} />
))}