v4: Social meta tags (twbs#20825)

mdo · web-flow · commit 7bf868a709d5 · 2016-10-02T18:19:47.000-07:00
* 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
diff --git a/_config.yml b/_config.yml
@@ -14,14 +14,22 @@ destination:      _gh_pages
 host:             0.0.0.0
 port:             9001
 baseurl:          ""
-url:              http://getbootstrap.com
+url:              http://v4-alpha.getbootstrap.com
 encoding:         UTF-8
 exclude:          [assets/scss/]
 
 gems:
   - jekyll-redirect-from
   - jekyll-sitemap
 
+# Social
+title: Bootstrap
+description: The most popular HTML, CSS, and JS framework in the world.
+twitter: getbootstrap
+authors: Mark Otto, Jacob Thornton, and Bootstrap contributors
+social_logo_path: /assets/brand/bootstrap-social-logo.png
+social_image_path: /assets/brand/bootstrap-social.png
+
 # Custom vars
 current_version:  4.0.0-alpha.4
 repo:             https://github.com/twbs/bootstrap
diff --git 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
@@ -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 }}">
diff --git a/docs/about/brand.md b/docs/about/brand.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Brand guidelines
+description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
 group: about
 ---
 
diff --git a/docs/about/history.md b/docs/about/history.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: History
+description: A brief overview of the history of Bootstrap.
 group: about
 redirect_from: "/about/"
 ---
diff --git a/docs/about/license.md b/docs/about/license.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: License FAQs
+description: Commonly asked questions about Bootstrap's open source license.
 group: about
 ---
 
diff --git a/docs/about/team.md b/docs/about/team.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Team
+description: An overview of the founding team and core contributors to Bootstrap.
 group: about
 ---
 
diff --git a/docs/about/translations.md b/docs/about/translations.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Translations
+description: Links to community-translated Bootstrap documentation sites.
 group: about
 ---
 
diff --git a/docs/assets/brand/bootstrap-social-logo.png b/docs/assets/brand/bootstrap-social-logo.png
diff --git a/docs/assets/brand/bootstrap-social.png b/docs/assets/brand/bootstrap-social.png
diff --git a/docs/components/alerts.md b/docs/components/alerts.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Alerts
+description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 group: components
 ---
 
diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Breadcrumb
+description: Indicate the current page's location within a navigational hierarchy.
 group: components
 ---
 
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Button group
+description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
 group: components
 ---
 
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Buttons
+description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
 group: components
 redirect_from: "/components/"
 ---
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Cards
+description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
 group: components
 ---
 
diff --git a/docs/components/carousel.md b/docs/components/carousel.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Carousel
+description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
 group: components
 ---
 
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Collapse
+description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
 group: components
 ---
 
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Dropdowns
+description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
 group: components
 ---
 
diff --git a/docs/components/forms.md b/docs/components/forms.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Forms
+description: Examples and usage guidelines for from controls, form layouts, and custom forms.
 group: components
 ---
 
diff --git a/docs/components/input-group.md b/docs/components/input-group.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Input group
+description: Extend form controls with the input group.
 group: components
 ---
 
diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Jumbotron
+description: Lightweight, flexible component for showcasing hero unit style content.
 group: components
 ---
 
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: List group
+description: Learn about Bootstrap's list group component for rendering series of related content.
 group: components
 ---
 
diff --git a/docs/components/modal.md b/docs/components/modal.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Modal
+description: Learn how to use Bootstrap's modals to add dialog prompts to your site.
 group: components
 ---
 
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Navbar
+description: Documentation and examples for Bootstrap's powerful, responsive navigation header.
 group: components
 ---
 
diff --git a/docs/components/navs.md b/docs/components/navs.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Navs
+description: Documentation and examples for how to use Bootstrap's included navigation components.
 group: components
 ---
 
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Pagination
+description: Documentation and examples for showing pagination links.
 group: components
 ---
 
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Popovers
+description: Documentation and examples for adding Bootstrap popovers to your site.
 group: components
 ---
 
diff --git a/docs/components/progress.md b/docs/components/progress.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Progress
+description: Documentation and examples for using Bootstrap progress bars.
 group: components
 ---
 
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Scrollspy
+description: Documentation and examples for the scrollspy plugin with Bootstrap's navigation components.
 group: components
 ---
 
diff --git a/docs/components/tag.md b/docs/components/tag.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Tags
+description: Documentation and examples for tags, our small label-badge component.
 group: components
 ---
 
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Tooltips
+description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript.
 group: components
 ---
 
diff --git a/docs/content/code.md b/docs/content/code.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Code
+description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.
 group: content
 ---
 
diff --git a/docs/content/figures.md b/docs/content/figures.md
@@ -1,10 +1,11 @@
 ---
 layout: docs
 title: Figures
+description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
 group: content
 ---
 
-Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
+Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`.
 
 Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
 
diff --git a/docs/content/images.md b/docs/content/images.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Images
+description: Documentation and examples for styling images with Bootstrap.
 group: content
 ---
 
diff --git a/docs/content/reboot.md b/docs/content/reboot.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Reboot
+description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css.
 group: content
 redirect_from: "/content/"
 ---
diff --git a/docs/content/tables.md b/docs/content/tables.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Tables
+description: Documentation and examples for styling tables with Bootstrap.
 group: content
 ---
 
diff --git a/docs/content/typography.md b/docs/content/typography.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Typography
+description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more.
 group: content
 ---
 
diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Accessibility
+description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/best-practices.md b/docs/getting-started/best-practices.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Best practices
+description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Browsers and devices
+description: Learn which browsers and devices are supported by Bootstrap.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Build tools
+description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Contents
+description: Learn about what's included in Bootstrap's precompiled and source code directories.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Download
+description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Flexbox
+description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet.
 group: getting-started
 ---
 
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md
diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md
diff --git a/docs/layout/overview.md b/docs/layout/overview.md
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
