juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add OG metadata (#110)

Browse source
This commit is contained in:
Szymon Kin 2022-12-03 19:22:53 +01:00 committed by GitHub
parent a6c95f4046
commit 47a23ca34a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/pages/index.astro
View file

@ -12,6 +12,7 @@ import getObjectKeys from '@/utils/getObjectKeys';
import data from '../data'; import data from '../data';
const { seo, i18n, ...dataWithoutSeoAndI18n } = data; const { seo, i18n, ...dataWithoutSeoAndI18n } = data;
const seoImage = seo.image ? seo.image : '/favicon.svg';
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -19,10 +20,13 @@ const { seo, i18n, ...dataWithoutSeoAndI18n } = data;
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{seo.title}</title> <title>{seo.title}</title>
<meta name="description" content={seo.description} /> <meta name="description" content={seo.description} />
<link rel="icon" type={seo.image ? 'image/jpeg' : 'image/svg+xml'} href={seoImage} />
<meta property="og:title" content={seo.title} />
<meta property="og:description" content={seo.description} />
<meta property="og:image" content={seoImage} />
</head> </head>
<body class="flex justify-center bg-gray-50"> <body class="flex justify-center bg-gray-50">
<div class="flex relative transform-none gap-8 w-full max-w-5xl px-2 py-3 sm:px-8 sm:py-12 lg:py-20"> <div class="flex relative transform-none gap-8 w-full max-w-5xl px-2 py-3 sm:px-8 sm:py-12 lg:py-20">

4
src/types/seo.ts
View file

@ -8,4 +8,8 @@ export interface Seo {
* Description that will be displayed in Google search results. To be fully visible in search results, it should be no longer than 160 characters. * Description that will be displayed in Google search results. To be fully visible in search results, it should be no longer than 160 characters.
*/ */
description: string; description: string;
/**
* Path to the image inside the public folder that will be used as page icon and as a preview image in site links.
*/
image?: string;
} }