From 3eccc367c1ed1550422203b522f9bdc404368026 Mon Sep 17 00:00:00 2001
From: Rikard Nilsson <drakir.nosslin@gmail.com>
Date: Fri, 1 Dec 2023 18:06:06 +0100
Subject: [PATCH] add meta titles and update meta descriptions (#949)

* add meta titles and update meta descriptions

* remove unnecessary tag
---
 site/content/docs/CICD/vercel.md                      | 4 ++++
 site/content/docs/integrations/opsgenie.md            | 4 ++++
 site/content/guides/end-to-end-monitoring.md          | 4 +++-
 site/content/learn/headless/basics-puppeteer-intro.md | 4 ++++
 site/layouts/partials/head.html                       | 4 ++--
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/CICD/vercel.md b/site/content/docs/CICD/vercel.md
index 5583863c0..b18a5290b 100644
--- a/site/content/docs/CICD/vercel.md
+++ b/site/content/docs/CICD/vercel.md
@@ -1,5 +1,9 @@
 ---
 title: Vercel
+description: >-
+  Integrate Checkly with Vercel for app development and deployment to benefit from automated browser checks and production deployment testing.
+metatags:
+  title: How to Integrate Vercel with Checkly? Step-by-Step Guide
 weight: 7
 menu:
   integrations:
diff --git a/site/content/docs/integrations/opsgenie.md b/site/content/docs/integrations/opsgenie.md
index f5d85d18b..b905f02fc 100644
--- a/site/content/docs/integrations/opsgenie.md
+++ b/site/content/docs/integrations/opsgenie.md
@@ -1,5 +1,9 @@
 ---
 title: Opsgenie
+description: >-
+  Learn how to integrate Checkly with Opsgenie and deliver failure, degradation, and recovery events to any Opsgenie team. Check our guide!
+metatags:
+    title: Opsgenie Integration with Checkly | How to Get Started
 weight: 57
 menu:
   integrations:
diff --git a/site/content/guides/end-to-end-monitoring.md b/site/content/guides/end-to-end-monitoring.md
index 1ebab9c0a..b8370e7c5 100644
--- a/site/content/guides/end-to-end-monitoring.md
+++ b/site/content/guides/end-to-end-monitoring.md
@@ -1,7 +1,9 @@
 ---
 title: End to end monitoring
 description: >-
-  End-to-End monitoring uses headless browser automation tools like Puppeteer and Playwright to continuously test your website's key user flows. This article summarises the most important points on this topic and gets you up and running in 10 minutes.
+  Learn end-to-end monitoring with puppeteer and playwright to test key website flows. Follow our guide that gets you up and running in 10 minutes.
+metatags:
+  title: What is End to End Monitoring? Overview with Examples
 author: Giovanni Rago
 avatar: 'images/avatars/giovanni-rago.png'
 ---
diff --git a/site/content/learn/headless/basics-puppeteer-intro.md b/site/content/learn/headless/basics-puppeteer-intro.md
index c3351f07e..b5d6be5f2 100644
--- a/site/content/learn/headless/basics-puppeteer-intro.md
+++ b/site/content/learn/headless/basics-puppeteer-intro.md
@@ -1,5 +1,9 @@
 ---
 Title: What is Puppeteer?
+description: >-
+  Puppeteer is a Node library for controlling Chrome or Chromium via the DevTools Protocol, with headless and full-browser modes. Learn more in our guide!
+metatags:
+  title: What is Puppeteer? Definition & Main Use Cases
 Date: 2020-06-19
 Author: "Giovanni Rago"
 
diff --git a/site/layouts/partials/head.html b/site/layouts/partials/head.html
index f826af6ef..c306dad48 100644
--- a/site/layouts/partials/head.html
+++ b/site/layouts/partials/head.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="/css/style.css" />
 
   <meta property="og:type" content="article" />
-  <meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | Checkly {{ end }}" />
+  <meta property=“og:title” content="{{ if .IsHome }}{{ .Site.Title }}{{ else if .Params.metatags.title }}{{ .Params.metatags.title }}{{ else }}{{ .Title }} | Checkly{{ end }}" />
   <meta property="og:description" content="{{ with .Description }}{{ . | markdownify }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . | markdownify}}{{ end }}{{ end }}{{ end }}" />
   <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
   {{ $template_name := .Scratch.Get "template_name"}}
@@ -21,7 +21,7 @@
   <meta property="twitter:creator" content="@checklyHQ" />
   <meta property="twitter:domain" content="https://checklyhq.com" />
   <meta property="twitter:site" content="@checklyHQ" />
-  <meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | Checkly {{ end }}" />
+  <meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else if .Params.metatags.title }}{{ .Params.metatags.title }}{{ else }}{{ .Title }} | Checkly {{ end }}" />
   <meta property="twitter:description" content="{{ with .Description }}{{ . | markdownify }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . | markdownify}}{{ end }}{{ end }}{{ end }}" />
   <meta property="twitter:image" content='https://og-image.checklyhq.com/image.png?titleText={{ htmlEscape .Title }}&subtitleText={{ if $subtitle_text }} {{ replace (htmlEscape $subtitle_text) "\n" "%20" }}{{ else }}{{ replace (htmlEscape .Summary) "\n" "%20" }}{{end}}&template={{ $template_name}}{{ if ne $template_name "site"}}&breadcrumbsText={{ htmlEscape $breadcrumb_text}}{{end}}&fontSize=75px' />
   <meta name="msvalidate.01" content="36F243A91FAA24DE468D8A8EECF33554" />