feat(meta): Add meta tags (#53)

gathering · Oct 10, 2024 · e9c944a · e9c944a
1 parent c926f94
commit e9c944a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -6,32 +6,54 @@ interface Props {
   title: string;
   description?: string;
   image?: string;
+  lang?: string;
+  seo_title?: string;
+  search_description?: string;
+  introText?: string;
+  type?: string;
 }
 
 const {
   title,
-  description = "We have hosted The Gathering since 1992 and it has always been a hub for young creative people to battle it out in many types of competitions; demo-coding, music, graphics, animation, and gaming.",
+  seo_title,
+  search_description,
+  introText,
+  type = "website",
+  lang = "no",
   image = "/images/tg.jpg",
+  description = "We have hosted The Gathering since 1992 and it has always been a hub for young creative people to battle it out in many types of competitions; demo-coding, music, graphics, animation, and gaming.",
 } = Astro.props;
 
+const finalTitle = seo_title || title;
+const finalDescription = search_description || introText || description;
+
 const matomoSiteId = import.meta.env.MATOMO_SITE_ID;
 const matomoInstanceUrl =
   import.meta.env.MATOMO_INSTANCE_URL || "//matomo.gathering.org/";
 ---
 
 <!doctype html>
-<html lang="no">
+<html lang={lang}>
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content={description} />
+    <meta name="description" content={finalDescription} />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="generator" content={Astro.generator} />
+    <meta property="og:url" content={Astro.request.url} />
+
+    <meta property="og:type" content={type} />
+    <meta property="og:title" content={finalTitle} />
+    <meta property="og:description" content={finalDescription} />
     <meta property="og:image" content={image} />
+    <meta property="twitter:title" content={finalTitle} />
+    <meta property="twitter:description" content={finalDescription} />
+    <meta property="twitter:image" content={image} />
+    <meta property="twitter:card" content="summary_large_image" />
 
     <title>{title}</title>
 

diff --git a/src/pages/news/[slug].astro b/src/pages/news/[slug].astro
@@ -22,10 +22,15 @@ const article = await fetchArticleById({
   id,
   api_url: import.meta.env.API_URL,
 });
-
 ---
 
-<Layout title=`The Gathering - ${article.title}`>
+<Layout
+  title=`The Gathering - ${article.title}`
+  description=`${article.meta.search_description}`
+  seo_title=`${article.meta.seo_title}`
+  search_description=`${article.meta.search_description}`
+  introText=`${article.intro}`
+  type="article">
   <Main>
     <!-- Article Title -->
     <H1 text=`${article.title}` />

diff --git a/src/utils/articles.ts b/src/utils/articles.ts
@@ -6,6 +6,8 @@ export interface Article {
     html_url: string;
     slug: string;
     first_published_at: string;
+    seo_title: string;
+    search_description: string;
   };
   title: string;
   intro: string;