valentineus/popov.link
0
Fork 0
mirror of https://github.com/valentineus/popov.link.git synced 2025-11-04 06:49:45 +03:00
Code Issues Releases Activity

feat: add Open Graph and JSON-LD support to Head component

Browse Source 
- 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.
This commit is contained in:
Valentin Popov
2025-06-14 12:19:01 +00:00
parent 25ebd94466
commit 3d0f485746
3 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Head.astro
View File

@@ -1,6 +1,7 @@
--- ---
import type { WithContext, Thing } from "schema-dts"; import type { WithContext, Thing } from "schema-dts";
import JsonLd from "./JsonLd.astro"; import JsonLd from "./JsonLd.astro";
import OpenGraph from "./OpenGraph.astro";
type Props = { type Props = {
readonly description: string; readonly description: string;
@@ -13,6 +14,7 @@ const { description, title, schema } = Astro.props;
--- ---
<head> <head>
<!-- Meta Tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -26,11 +28,13 @@ const { description, title, schema } = Astro.props;
<title>{title}</title> <title>{title}</title>
<!-- Icons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<OpenGraph title={title} description={description} />
<JsonLd schema={schema} /> <JsonLd schema={schema} />
</head> </head>

1
src/components/JsonLd.astro
View File

@@ -9,4 +9,5 @@ const { schema } = Astro.props;
const json = JSON.stringify(schema); const json = JSON.stringify(schema);
--- ---
<!-- JSON-LD -->
<script is:inline type="application/ld+json" set:html={json} /> <script is:inline type="application/ld+json" set:html={json} />

26
src/components/OpenGraph.astro Normal file
View File

@@ -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} />