diff options
| author | Valentin Popov <valentin@popov.link> | 2025-06-14 22:25:16 +0300 |
|---|---|---|
| committer | Valentin Popov <valentin@popov.link> | 2025-06-14 22:25:16 +0300 |
| commit | a81117972d39df35574bbab809bb590abc874761 (patch) | |
| tree | 41cb25172c7603d2ea0dc275f8d90c72d83bf5a1 /src/components | |
| parent | 3d0f4857465e55815809719a4a4438e8a3cd16a0 (diff) | |
| download | popov.link-a81117972d39df35574bbab809bb590abc874761.tar.xz popov.link-a81117972d39df35574bbab809bb590abc874761.zip | |
feat: implement Open Graph image generation and enhance configuration
- Added ogImages integration to generate Open Graph images for blog posts.
- Updated configuration to include Open Graph settings and default preview image.
- Refactored Head component to utilize new preview property for Open Graph meta tags.
- Enhanced blog post schema to include preview image for structured data representation.
- Introduced utility functions for creating Open Graph images with dynamic content.
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Head.astro | 26 | ||||
| -rw-r--r-- | src/components/OpenGraph.astro | 26 |
2 files changed, 20 insertions, 32 deletions
diff --git a/src/components/Head.astro b/src/components/Head.astro index 0026886..3fded95 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,16 +1,18 @@ --- import type { WithContext, Thing } from "schema-dts"; import JsonLd from "./JsonLd.astro"; -import OpenGraph from "./OpenGraph.astro"; type Props = { readonly description: string; - readonly title: string; + readonly preview: string; readonly schema: WithContext<Thing>; + readonly title: string; }; -const canonicalURL = new URL(Astro.url.pathname, Astro.site); -const { description, title, schema } = Astro.props; +const { description, preview, schema, title } = Astro.props; + +const canonicalUrl = new URL(Astro.url.pathname, Astro.site); +const previewUrl = new URL(preview, Astro.site); --- <head> @@ -24,7 +26,7 @@ const { description, title, schema } = Astro.props; <link href="/feed.xml" rel="alternate" title="RSS" type="application/atom+xml" /> <link href="/sitemap-index.xml" rel="sitemap" /> - <link href={canonicalURL} rel="canonical" /> + <link href={canonicalUrl} rel="canonical" /> <title>{title}</title> @@ -35,6 +37,18 @@ const { description, title, schema } = Astro.props; <link rel="manifest" href="/manifest.json" /> <meta name="theme-color" content="#ffffff" /> - <OpenGraph title={title} description={description} /> + <!-- 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={previewUrl} /> + <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={previewUrl} /> + <JsonLd schema={schema} /> </head> diff --git a/src/components/OpenGraph.astro b/src/components/OpenGraph.astro deleted file mode 100644 index 6ca1856..0000000 --- a/src/components/OpenGraph.astro +++ /dev/null @@ -1,26 +0,0 @@ ---- -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} /> |