diff --git a/website/Makefile b/website/Makefile
index 0e83eb946..d7620d1c2 100644
--- a/website/Makefile
+++ b/website/Makefile
@@ -1,14 +1,24 @@
 VERSION?="0.3.22"
 
+build:
+	@echo "==> Starting build in Docker..."
+	@docker run \
+		--interactive \
+		--rm \
+		--tty \
+		--volume "$(shell pwd):/website" \
+		hashicorp/middleman-hashicorp:${VERSION} \
+		bundle exec middleman build --verbose --clean
+
 website:
 	@echo "==> Starting website in Docker..."
 	@docker run \
-	  --interactive \
-	  --rm \
+		--interactive \
+		--rm \
 		--tty \
 		--publish "4567:4567" \
 		--publish "35729:35729" \
 		--volume "$(shell pwd):/website" \
 		hashicorp/middleman-hashicorp:${VERSION}
 
-.PHONY: website
+.PHONY: build website
diff --git a/website/config.rb b/website/config.rb
index 2f70d5ee1..3ccf1e499 100644
--- a/website/config.rb
+++ b/website/config.rb
@@ -8,6 +8,15 @@ activate :hashicorp do |h|
 end
 
 helpers do
+  # Returns the FQDN of the image URL.
+  #
+  # @param [String] path
+  #
+  # @return [String]
+  def image_url(path)
+    File.join(base_url, image_path(path))
+  end
+
   # Get the title for the page.
   #
   # @param [Middleman::Page] page
diff --git a/website/source/assets/images/og-image.png b/website/source/assets/images/og-image.png
new file mode 100644
index 000000000..feea9124c
Binary files /dev/null and b/website/source/assets/images/og-image.png differ
diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss
index bedbee79c..bbf8ddbbe 100644
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@@ -3,12 +3,17 @@ $white: #FFFFFF;
 $black: #000000;
 $gray-darker: #555555;
 
+$consul-pink: #D62783;
+$consul-pink-dark: #961D59;
 $packer-blue: #1DAEFF;
 $packer-blue-dark: #1D94DD;
+$terraform-purple: #5C4EE5;
+$terraform-purple-dark: #4040B2;
 $vagrant-blue: #1563FF;
 $vagrant-blue-dark: #104EB2;
 $vault-black: #000000;
 $vault-blue: #00ABE0;
+$vault-gray: #919FA8;
 
 // Typography
 $font-family-klavika:   'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb
index 764ed5acd..242707163 100644
--- a/website/source/layouts/layout.erb
+++ b/website/source/layouts/layout.erb
@@ -14,6 +14,17 @@
     <meta name="msapplication-config" content="/microsoft-tile.xml" />
     <meta name="theme-color" content="#ffffff">
 
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@HashiCorp" />
+    <meta name="twitter:creator" content="@HashiCorp" />
+    <meta property="og:url" content="<%= File.join(base_url, current_page.url) %>" />
+    <meta property="og:title" content="<%= title_for(current_page) %>" />
+    <meta property="og:site_name" content="Vagrant by HashiCorp"/>
+    <meta property="og:image" content="<%= image_url("og-image.png") %>"/>
+    <meta property="og:image:width" content="1200"/>
+    <meta property="og:image:height" content="1200"/>
+    <meta property="og:description" content="<%= description_for(current_page) %>" />
+
     <title><%= title_for(current_page) %></title>
 
     <%= stylesheet_link_tag "application" %>