Implement OpenGraph and basic Schema tags (#8224)

* Implement OpenGraph and basic Schema tags

* Better description

* Cleanup and smush

* Remove extra 2

* Shorter description

4 files changed, 83 insertions, 20 deletions

diff --git a/docs/generator/buildyaml.sh b/docs/generator/buildyaml.sh
index 3889f2a553..5fa77509d3 100755
--- a/docs/generator/buildyaml.sh
+++ b/docs/generator/buildyaml.sh
@@ -62,41 +62,41 @@ navpart() {
 	done
 }
 
-echo -e 'site_name: Netdata Documentation
+echo -e "site_name: Netdata Documentation
 site_url: https://docs.netdata.cloud
 repo_url: https://github.com/netdata/netdata
 repo_name: GitHub
 edit_uri: blob/master
-site_description: Netdata Documentation
-copyright: Netdata, 2019
+site_description: Learn about Netdata's real-time health monitoring and performance troubleshooting for all your systems and applications.
+copyright: Netdata, 2020
 docs_dir: '${docs_dir}'
 site_dir: '${site_dir}'
 #use_directory_urls: false
 strict: true
 extra:
   social:
-    - type: "github"
-      link: "https://github.com/netdata/netdata"
-    - type: "twitter"
-      link: "https://twitter.com/linuxnetdata"
-    - type: "facebook"
-      link: "https://www.facebook.com/linuxnetdata/"
+    - type: github
+      link: https://github.com/netdata/netdata
+    - type: twitter
+      link: https://twitter.com/linuxnetdata
+    - type: facebook
+      link: https://www.facebook.com/linuxnetdata/
 theme:
-    name: "material"
+    name: material
     palette:
-      primary: "blue grey"
-      accent: "light green"
+      primary: 'blue grey'
+      accent: 'light green'
     custom_dir: custom/themes/material
     favicon: custom/img/favicon.ico
     logo: custom/img/netdata_logo.svg
     language: '${language}'
 extra_css:
-  - "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
-  - "https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css"
-  - "custom/css/netdata.css"
+  - 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css'
+  - 'https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css'
+  - 'custom/css/netdata.css'
 extra_javascript:
-  - "custom/javascripts/cookie-consent.js"
-  - "https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"
+  - 'custom/javascripts/cookie-consent.js'
+  - 'https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js'
 markdown_extensions:
  - extra
  - abbr
@@ -111,7 +111,7 @@ markdown_extensions:
  - smarty
  - toc:
     permalink: True
-    separator: "-"
+    separator: '-'
  - wikilinks
  - pymdownx.arithmatex
  - pymdownx.betterem:
@@ -121,7 +121,7 @@ markdown_extensions:
  - pymdownx.details
  - pymdownx.highlight:
     pygments_style: manni
-    css_class: "highlight codehilite"
+    css_class: 'highlight codehilite'
     linenums_style: pymdownx-inline
  - pymdownx.inlinehilite
  - pymdownx.magiclink
@@ -139,7 +139,7 @@ markdown_extensions:
  - markdown.extensions.tables
  - markdown.extensions.abbr
  - pymdownx.extrarawhtml
-nav:'
+nav:"
 
 navpart 1 . "README" ""
 
diff --git a/docs/generator/custom/img/netdata_docs.png b/docs/generator/custom/img/netdata_docs.png
new file mode 100644
index 0000000000..04e7ba4837
--- /dev/null
+++ b/docs/generator/custom/img/netdata_docs.png
diff --git a/docs/generator/custom/themes/material/main.html b/docs/generator/custom/themes/material/main.html
new file mode 100644
index 0000000000..15ee857700
--- /dev/null
+++ b/docs/generator/custom/themes/material/main.html
@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+
+  <meta property="og:url" content="{{ page.canonical_url }}">
+  {% if page and page.meta and page.meta.title %}
+    <meta property="og:title" content="{{ page.meta.title }}">
+  {% elif page and page.title and not page.is_homepage %}
+    <meta property="og:title" content="{{ page.title }} - {{ config.site_name }}">
+  {% else %}
+    <meta property="og:title" content="{{ config.site_name }}">
+  {% endif %}
+
+  {% if page and page.meta and page.meta.description %}
+    <meta property="og:description" content="{{ page.meta.description }}">
+  {% elif config.site_description %}
+    <meta property="og:description" content="{{ config.site_description }}">  
+  {% endif %}
+  <meta property="og:image" content="custom/img/netdata_docs.png">
+  <meta property="og:image:alt" content="Netdata documentation: Learn about real-time health monitoring and performance troubleshooting for systems and applications">
+  <meta property="og:image:type" content="image/jpeg">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@linuxnetdata">
+  <meta name="twitter:creator" content="@linuxnetdata">
+  {% if page and page.meta and page.meta.title %}
+    <meta property="twitter:title" content="{{ page.meta.title }}">
+  {% elif page and page.title and not page.is_homepage %}
+    <meta property="twitter:title" content="{{ page.title }} - {{ config.site_name }}">
+  {% else %}
+    <meta property="twitter:title" content="{{ config.site_name }}">
+  {% endif %}
+  {% if page and page.meta and page.meta.description %}
+    <meta name="twitter:description" content="{{ page.meta.description }}">
+  {% elif config.site_description %}
+    <meta name="twitter:description" content="{{ config.site_description }}">  
+  {% endif %}
+  <meta name="twitter:image" content="custom/img/netdata_docs.png">
+  <meta name="twitter:image:alt" content="Netdata documentation: Learn about real-time health monitoring and performance troubleshooting for systems and applications">
+
+  <script type="application/ld+json">
+    {
+      "@context": "http://schema.org",
+      "@type": "HowTo",
+      {% if page and page.meta and page.meta.title %}"name": "{{ page.meta.title }}",{% elif page and page.title and not page.is_homepage %}"name": "{{ page.title }} - {{ config.site_name }}",{% else %}"name": "{{ config.site_name }}",{% endif %}
+      {% if page and page.meta and page.meta.description %}"description": "{{ page.meta.description }}",{% elif config.site_description %}"description": "{{ config.site_description }}",{% endif %}
+      "image": {
+        "@type": "ImageObject",
+        "url": "custom/img/netdata_docs.png",
+        "height": "1200",
+        "width": "630"
+      },
+    }
+  </script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/docs/step-by-step/step-00.md b/docs/step-by-step/step-00.md
index f4959b8b0a..7027e210c2 100644
--- a/docs/step-by-step/step-00.md
+++ b/docs/step-by-step/step-00.md
@@ -1,3 +1,8 @@
+---
+title: The step-by-step Netdata tutorial
+description: Learn what Netdata is, what it's capable of, and how it'll help you make faster and more informed decisions about the health and performance of your systems and applications.
+---
+
 # The step-by-step Netdata tutorial
 
 Welcome to Netdata! We're glad you're interested in our health monitoring and performance troubleshooting system.