add meta titles and update meta descriptions (#949)

* add meta titles and update meta descriptions

* remove unnecessary tag

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:

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:

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'
 ---

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"
 

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" />