---
import { getImage } from 'astro:assets';
import { OG, SEO, SITE } from '@data/constants';
import faviconSvgSrc from '@images/icon.svg';
import faviconSrc from '@images/icon.png';
import {
getLocaleFromPath,
isLocale,
localeOg,
localizedPath,
localizeRoutePath,
stripLocalePrefix,
type Locale,
} from '@/i18n';
// Default properties for the Meta component. These values are used if props are not provided.
// 'meta' sets a default description meta tag to describe the page content.
// 'structuredData' defines default structured data in JSON-LD format to enhance search engine understanding of the page (for SEO purposes).
const defaultProps = {
meta: SITE.description,
structuredData: SEO.structuredData,
customDescription: null,
customOgTitle: null,
};
// Extract props with default values assigned from defaultProps. Values can be overridden when the component is used.
// For example:
//
const {
meta = defaultProps.meta,
structuredData = defaultProps.structuredData,
customDescription = defaultProps.customDescription,
customOgTitle = defaultProps.customOgTitle,
locale: rawLocale = getLocaleFromPath(Astro.url.pathname),
} = Astro.props;
const locale: Locale = isLocale(rawLocale) ? rawLocale : 'de';
// Use custom description if provided, otherwise use default meta
const description = customDescription || meta;
// Use custom OG title if provided, otherwise use default OG title
const ogTitle = customOgTitle || OG.title;
const ogDescription = customDescription || OG.description;
// Define the metadata for your website and individual pages
const siteURL = `${Astro.site}`; // Set the website URL in astro.config.mjs
const author = SITE.author;
const cleanPath = stripLocalePrefix(Astro.url.pathname);
const canonical = new URL(
localizedPath(cleanPath, locale),
Astro.site || Astro.url.origin
).href;
const socialImageRes = await getImage({
src: OG.image,
width: 1200,
height: 600,
format: 'png',
});
const socialImage = new URL(socialImageRes.src, Astro.site || Astro.url.origin)
.href;
const twitterDomain = new URL(siteURL).hostname;
const alternateLocales: Locale[] = ['de', 'en'];
// Generate and optimize the favicon images
const faviconSvg = await getImage({
src: faviconSvgSrc,
format: 'svg',
});
const appleTouchIcon = await getImage({
src: faviconSrc,
width: 180,
height: 180,
format: 'png',
});
---
{
/* Inject structured data into the page if provided. This data is formatted as JSON-LD, a method recommended by Google for structured data pass:
https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data */
}{
structuredData && (
)
}
{/* Define the character set, description, author, and viewport settings */}
{
alternateLocales.map(lang => {
const href = new URL(
localizeRoutePath(cleanPath, locale, lang),
Astro.site || Astro.url.origin
).href;
return ;
})
}
{/* Facebook Meta Tags */}
{/* Twitter Meta Tags */}
{/* Links to the webmanifest and sitemap */}
{/* https://docs.astro.build/en/guides/integrations-guide/sitemap/ */}
{/* Links for favicons */}
{/* Set theme color */}