2024-02-12 07:37:22 +04:00
|
|
|
---
|
2024-03-27 16:57:42 -05:00
|
|
|
import { getImage } from "astro:assets";
|
|
|
|
import { OG, SEO, SITE } from "@/data_files/constants";
|
2024-03-26 12:19:13 -05:00
|
|
|
import faviconSvgSrc from "@/images/icon.svg";
|
|
|
|
import faviconSrc from "@/images/icon.png";
|
2024-03-27 16:57:42 -05:00
|
|
|
|
2024-02-19 17:41:42 +04:00
|
|
|
// 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 = {
|
2024-03-27 16:57:42 -05:00
|
|
|
meta: SITE.description,
|
|
|
|
structuredData: SEO.structuredData,
|
2024-02-19 17:41:42 +04:00
|
|
|
};
|
2024-02-14 22:56:43 +04:00
|
|
|
|
2024-02-19 17:41:42 +04:00
|
|
|
// Extract props with default values assigned from defaultProps. Values can be overridden when the component is used.
|
|
|
|
// For example:
|
|
|
|
// <MainLayout title="Custom Title" meta="Custom description." />
|
2024-02-20 07:47:23 +04:00
|
|
|
const { meta = defaultProps.meta, structuredData = defaultProps.structuredData } = Astro.props;
|
2024-02-14 22:56:43 +04:00
|
|
|
|
2024-02-18 07:40:53 +04:00
|
|
|
// Define the metadata for your website and individual pages
|
2024-03-27 16:57:42 -05:00
|
|
|
const URL = `${Astro.site}`; // Set the website URL in astro.config.mjs
|
|
|
|
const author = SITE.author;
|
|
|
|
const ogTitle = OG.title;
|
|
|
|
const ogDescription = OG.description;
|
2024-03-27 17:03:27 -05:00
|
|
|
const socialImageRes = await getImage({ src: OG.image, width: 1200, height: 600 });
|
|
|
|
const socialImage = Astro.url.origin + socialImageRes.src; // Get the full URL of the image (https://stackoverflow.com/a/9858694)
|
|
|
|
|
2024-03-26 12:19:13 -05:00
|
|
|
// 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',
|
|
|
|
});
|
|
|
|
|
2024-02-12 07:37:22 +04:00
|
|
|
---
|
|
|
|
|
2024-02-19 17:41:42 +04:00
|
|
|
<!-- 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 && (
|
|
|
|
<script type="application/ld+json" set:html={JSON.stringify(structuredData)}></script>
|
|
|
|
)}
|
2024-02-18 07:40:53 +04:00
|
|
|
<!-- Define the character set, description, author, and viewport settings -->
|
2024-02-14 05:47:32 +04:00
|
|
|
<meta charset="utf-8" />
|
2024-02-19 17:41:42 +04:00
|
|
|
<meta content={meta} name="description" />
|
2024-02-18 07:40:53 +04:00
|
|
|
<meta name="web_author" content={author} />
|
2024-02-12 07:37:22 +04:00
|
|
|
<meta
|
2024-02-18 07:40:53 +04:00
|
|
|
name="viewport"
|
|
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"
|
2024-02-12 07:37:22 +04:00
|
|
|
/>
|
2024-02-18 07:40:53 +04:00
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
2024-02-12 07:37:22 +04:00
|
|
|
|
|
|
|
<!-- Facebook Meta Tags -->
|
|
|
|
<meta property="og:locale" content="en_US" />
|
2024-02-18 07:40:53 +04:00
|
|
|
<meta property="og:url" content={URL} />
|
|
|
|
<meta property="og:type" content="website" />
|
|
|
|
<meta property="og:title" content={ogTitle} />
|
2024-03-27 16:57:42 -05:00
|
|
|
<meta property="og:site_name" content={SITE.title} />
|
2024-02-18 07:40:53 +04:00
|
|
|
<meta property="og:description" content={ogDescription} />
|
|
|
|
<meta property="og:image" content={socialImage} />
|
|
|
|
<meta content="1200" property="og:image:width" />
|
|
|
|
<meta content="600" property="og:image:height" />
|
|
|
|
<meta content="image/png" property="og:image:type" />
|
2024-02-12 07:37:22 +04:00
|
|
|
|
|
|
|
<!-- Twitter Meta Tags -->
|
2024-02-18 07:40:53 +04:00
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
|
|
<meta property="twitter:domain" content={URL} />
|
|
|
|
<meta property="twitter:url" content={URL} />
|
|
|
|
<meta name="twitter:title" content={ogTitle} />
|
|
|
|
<meta name="twitter:description" content={ogDescription} />
|
|
|
|
<meta name="twitter:image" content={socialImage} />
|
2024-02-12 07:37:22 +04:00
|
|
|
|
2024-02-18 07:40:53 +04:00
|
|
|
<!-- Links to the webmanifest and sitemap -->
|
2024-03-26 12:06:02 -05:00
|
|
|
<link rel="manifest" href="/manifest.json" />
|
2024-02-13 05:50:53 +04:00
|
|
|
<!-- https://docs.astro.build/en/guides/integrations-guide/sitemap/ -->
|
2024-02-12 07:37:22 +04:00
|
|
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
|
|
|
|
2024-02-18 07:40:53 +04:00
|
|
|
<!-- Links for favicons -->
|
|
|
|
<link href="/favicon.ico" rel="icon" sizes="any" type="image/x-icon" />
|
2024-03-26 12:19:13 -05:00
|
|
|
<link href={faviconSvg.src} rel="icon" type="image/svg+xml" sizes="any" />
|
2024-02-18 07:40:53 +04:00
|
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
2024-03-26 12:19:13 -05:00
|
|
|
<link href={appleTouchIcon.src} rel="apple-touch-icon" />
|
|
|
|
<link href={appleTouchIcon.src} rel="shortcut icon" />
|
2024-02-18 07:40:53 +04:00
|
|
|
<!-- Set theme color -->
|
|
|
|
<meta name="theme-color" content="#facc15" />
|