v4: Social meta tags (#20825)

* descriptions for getting started pages

* descriptions for layout

* add content page descriptions

* more descriptions, updates to some existing ones

* correct site url

* add social stuff to config for twitter cards

* add twitter meta tags; use large image for homepage and regular card for all others

* add the assets

* more site config

* more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements

2 files changed, 36 insertions, 5 deletions

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 3fc75c058..54bfddf69 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -1,17 +1,17 @@
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
-<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
 
 <title>
-  {% if page.layout == "home" %}
-    {{ page.title }}
+  {% if page.title %}
+    {{ page.title }} &middot; {{ site.title }}
   {% else %}
-    {{ page.title }} &middot; Bootstrap
+    {{ site.title }} &middot; {{ site.description }}
   {% endif %}
 </title>
 
+{% include social.html %}
+
 <!-- Bootstrap core CSS -->
 {% if site.github %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
diff --git a/docs/_includes/social.html b/docs/_includes/social.html
new file mode 100644
index 000000000..c488ea610
--- /dev/null
+++ b/docs/_includes/social.html
@@ -0,0 +1,31 @@
+<!-- Twitter -->
+<meta name="twitter:site" content="@{{ site.twitter }}">
+<meta name="twitter:creator" content="@{{ site.twitter }}">
+
+{% if page.title %}
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="{{ page.title }}">
+  <meta name="twitter:description" content="{{ page.description }}">
+  <meta name="twitter:image" content="{{ site.url }}{{ site.social_logo_path }}">
+{% else %}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{{ site.title }}">
+  <meta name="twitter:description" content="{{ site.description }}">
+  <meta name="twitter:image" content="{{ site.url }}{{ site.social_image_path }}">
+{% endif %}
+
+<!-- Facebook -->
+{% if page.title %}
+  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+  <meta property="og:title" content="{{ page.title }}">
+  <meta property="og:description" content="{{ page.description }}">
+{% else %}
+  <meta property="og:url" content="{{ site.url }}">
+  <meta property="og:title" content="{{ site.title }}">
+  <meta property="og:description" content="{{ site.description }}">
+{% endif %}
+<meta property="og:image" content="{{ site.url }}{{ site.social_image_path }}">
+
+<!-- Meta -->
+<meta name="description" content="{{ site.description }}">
+<meta name="author" content="{{ site.authors }}">