Add general meta tags to non-share pages

jacebrowning · Jun 2, 2017 · 3eafeaa · 3eafeaa
1 parent 9c6ba1f
commit 3eafeaa
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 4 deletions.
diff --git a/memegen/static/images/logo.png b/memegen/static/images/logo.png
diff --git a/memegen/templates/custom.html b/memegen/templates/custom.html
@@ -1,6 +1,9 @@
 {% extends "layout.html" %}
+
 {% set active_page = "custom" %}
+
 {% block title %}{{ super() }} | custom{% endblock %}
+
 {% block content %}
     <div class="generator">
       <div class="container">

diff --git a/memegen/templates/index.html b/memegen/templates/index.html
@@ -1,5 +1,7 @@
 {% extends "layout.html" %}
+
 {% set active_page = "index" %}
+
 {% block content %}
     <div class="generator">
       <div class="container">

diff --git a/memegen/templates/latest.html b/memegen/templates/latest.html
@@ -1,6 +1,9 @@
 {% extends "layout.html" %}
+
 {% set active_page = "latest" %}
+
 {% block title %}{{ super() }} | latest{% endblock %}
+
 {% block content %}
   <div class="meme-templates">
     <div class="row">

diff --git a/memegen/templates/layout.html b/memegen/templates/layout.html
@@ -4,6 +4,7 @@
     ('magic', '/magic', 'Magic'),
     ('latest', '/latest', 'Latest')
 ] -%}
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -12,6 +13,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}memegen.link{% endblock %}</title>
 
+    <!-- Favicon (http://realfavicongenerator.net) -->
     <link rel="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
@@ -30,7 +32,23 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="msapplication-TileImage" content="/mstile-144x144.png">
     <meta name="theme-color" content="#ffffff">
-    {% block meta %}{% endblock %}
+
+    {% block meta -%}
+    <!-- Meta tags (general) -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@memegenlink" />
+    <meta name="twitter:title" content="memegen.link" />
+    <meta name="twitter:description" content="The open source meme generator." />
+    <meta name="twitter:image" content="{{ url_for('static', filename='images/logo.png', _external=True) }}" />
+    <meta property="fb:app_id" content="{{ config['FACEBOOK_APP_ID'] }}" />
+    <meta property="og:title" content="memegen.link" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="{{ url_for('index-page.get_index', _external=True) }}" />
+    <meta property="og:image" content="{{ url_for('static', filename='images/logo.png', _external=True) }}" />
+    <meta property="og:image:width" content="296" />
+    <meta property="og:image:height" content="296" />
+    <meta property="og:description" content="The open source meme generator." />
+    {%- endblock %}
 
     <!-- Bootstrap -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

diff --git a/memegen/templates/magic.html b/memegen/templates/magic.html
@@ -1,6 +1,9 @@
 {% extends "layout.html" %}
+
 {% set active_page = "magic" %}
+
 {% block title %}{{ super() }} | magic{% endblock %}
+
 {% block content %}
     <div class="generator">
       <div class="container">

diff --git a/memegen/templates/share.html b/memegen/templates/share.html
@@ -1,7 +1,9 @@
 {% extends "layout.html" %}
+
 {% block title %}{{ title | safe }}{% endblock %}
-{% block meta %}
-{{- super() }}
+
+{% block meta -%}
+    <!-- Meta tags (shared image) -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@memegenlink" />
     <meta name="twitter:title" content="memegen.link" />
@@ -15,7 +17,6 @@
     <meta property="og:image:width" content="{{ config['FACEBOOK_IMAGE_WIDTH'] }}" />
     <meta property="og:image:height" content="{{ config['FACEBOOK_IMAGE_HEIGHT'] }}" />
     <meta property="og:description" content="{{ title | safe }}" />
-
 {%- endblock -%}
 
 {% block content %}