diff options
| author | Valentin Popov <valentin@popov.link> | 2025-06-14 15:19:01 +0300 |
|---|---|---|
| committer | Valentin Popov <valentin@popov.link> | 2025-06-14 15:19:01 +0300 |
| commit | 3d0f4857465e55815809719a4a4438e8a3cd16a0 (patch) | |
| tree | 4d1f99d20eb3e9fd9439e1b367450ff2f5b33f8a /src/components | |
| parent | 25ebd94466edcf87c675a12e3cf80b0ce572ab76 (diff) | |
| download | popov.link-3d0f4857465e55815809719a4a4438e8a3cd16a0.tar.xz popov.link-3d0f4857465e55815809719a4a4438e8a3cd16a0.zip | |
feat: add Open Graph and JSON-LD support to Head component
- Introduced OpenGraph component for enhanced social media sharing with Open Graph meta tags.
- Updated Head component to include OpenGraph and JSON-LD for improved SEO and structured data representation.
- Added comments for better clarity on meta tags and JSON-LD integration.
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Head.astro | 4 | ||||
| -rw-r--r-- | src/components/JsonLd.astro | 1 | ||||
| -rw-r--r-- | src/components/OpenGraph.astro | 26 |
3 files changed, 31 insertions, 0 deletions
diff --git a/src/components/Head.astro b/src/components/Head.astro index a421915..0026886 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,6 +1,7 @@ --- import type { WithContext, Thing } from "schema-dts"; import JsonLd from "./JsonLd.astro"; +import OpenGraph from "./OpenGraph.astro"; type Props = { readonly description: string; @@ -13,6 +14,7 @@ const { description, title, schema } = Astro.props; --- <head> + <!-- Meta Tags --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> @@ -26,11 +28,13 @@ const { description, title, schema } = Astro.props; <title>{title}</title> + <!-- Icons --> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/png" href="/favicon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="manifest" href="/manifest.json" /> <meta name="theme-color" content="#ffffff" /> + <OpenGraph title={title} description={description} /> <JsonLd schema={schema} /> </head> diff --git a/src/components/JsonLd.astro b/src/components/JsonLd.astro index a589f7b..b58efd7 100644 --- a/src/components/JsonLd.astro +++ b/src/components/JsonLd.astro @@ -9,4 +9,5 @@ const { schema } = Astro.props; const json = JSON.stringify(schema); --- +<!-- JSON-LD --> <script is:inline type="application/ld+json" set:html={json} /> diff --git a/src/components/OpenGraph.astro b/src/components/OpenGraph.astro new file mode 100644 index 0000000..6ca1856 --- /dev/null +++ b/src/components/OpenGraph.astro @@ -0,0 +1,26 @@ +--- +import { config } from "../config"; + +type Props = { + readonly description: string; + readonly title: string; +}; + +const canonicalURL = new URL(Astro.url.pathname, Astro.site); +const { description, title } = Astro.props; + +const image = new URL(config.posts.defaultImage, Astro.site).toString(); +--- + +<!-- Open Graph --> +<meta property="og:type" content="website" /> +<meta property="og:title" content={title} /> +<meta property="og:description" content={description} /> +<meta property="og:image" content={image} /> +<meta property="og:url" content={canonicalURL} /> + +<!-- Twitter Cards --> +<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={image} /> |