Add meta tags for link embedding

lostmapper · Sep 21, 2023 · 64f29d5 · 64f29d5
1 parent 3c11ada
commit 64f29d5
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 37 deletions.
diff --git a/templates/about.html b/templates/about.html
@@ -1,12 +1,12 @@
 {% extends 'layout.html' %}
 
 {% block title %}About{% endblock %}
+{% block description %}Some details on how this site is made{% endblock %}
 
 {% block content %}
-<h1>About</h1>
-
-<p>This site is a <a href="https://flask.palletsprojects.com/">Flask</a> application running on <a href="https://fly.io">fly.io</a>.</p>
-
-<p>You can find the source code at <a href="https://github.com/lostmapper/tools.lostmapper.com">https://github.com/lostmapper/tools.lostmapper.com</a></p>
+    <p>This site is a <a href="https://flask.palletsprojects.com/">Flask</a> application running on <a
+            href="https://fly.io">fly.io</a>.</p>
 
+    <p>You can find the source code at <a href="https://github.com/lostmapper/tools.lostmapper.com">https://github.com/lostmapper/tools.lostmapper.com</a>
+    </p>
 {% endblock %}
diff --git a/templates/index.html b/templates/index.html
@@ -1,15 +1,12 @@
 {% extends 'layout.html' %}
 
-{% block title %}Lost Mapper Tools{% endblock %}
+{% block title %}Welcome!{% endblock %}
+{% block description %}A growing collection of dynamic, web-based GIS & Cartography tools{% endblock %}
 
 {% block content %}
-<h1>Welcome!</h1>
+    <h2>Tools</h2>
 
-<p class="lead">A growing collection of dynamic, web-based GIS & Cartography tools to compliment the static content at <a href="https://lostmapper.com">lostmapper.com</a>.</p>
-
-<h2>Tools</h2>
-
-<ul>
-    <li><a href="/merge-gpx-tracks">Merge GPX Tracks</a> - merge tracks from multiple GPX files into one file</li>
-</ul>
+    <ul>
+        <li><a href="/merge-gpx-tracks">Merge GPX Tracks</a> - merge tracks from multiple GPX files into one file</li>
+    </ul>
 {% endblock %}
diff --git a/templates/layout.html b/templates/layout.html
@@ -4,6 +4,21 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}{% endblock %}</title>
+
+    <meta property="og:type" content="website">
+    <meta property="twitter:card" content="summary_large_image">
+
+    <meta name="title" content="{{ self.title() }}"/>
+    <meta property="og:title" content="{{ self.title() }}"/>
+    <meta property="twitter:title" content="{{ self.title() }}"/>
+
+    <meta name="description" content="{{ self.description() }}"/>
+    <meta property="og:description" content="{{ self.description() }}"/>
+    <meta property="twitter:description" content="{{ self.description() }}"/>
+
+    <meta property="og:url" content="{{ "https://tools.lostmapper.com" + request.path }}"/>
+    <meta property="twitter:url" content="{{ "https://tools.lostmapper.com" + request.path }}"/>
+
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 </head>
@@ -23,7 +38,7 @@
                 <li class="nav-item">
                     <a class="nav-link" href="/merge-gpx-tracks">Merge GPX Tracks</a>
                 </li>
-                                <li class="nav-item">
+                <li class="nav-item">
                     <a class="nav-link" href="/about">About</a>
                 </li>
             </ul>
@@ -32,6 +47,9 @@
 </nav>
 
 <div class="container">
+    <h1>{{ self.title() }}</h1>
+
+    <p class="lead">{{ self.description() }}</p>
     {% block content %}{% endblock %}
 </div>
 

diff --git a/templates/merge-gpx-tracks.html b/templates/merge-gpx-tracks.html
@@ -1,31 +1,29 @@
 {% extends 'layout.html' %}
 
 {% block title %}Merge GPX Tracks{% endblock %}
+{% block description %}Merge tracks from multiple GPX files into multiple tracks into just one file{% endblock %}
 
 {% block content %}
-<h1>Merge GPX Tracks</h1>
-
-<p class="lead">Merge tracks from multiple GPX files into multiple tracks in just one file</p>
-
-<form action="/merge-gpx-tracks" method="POST" enctype="multipart/form-data">
-    <div class="mb-3">
-        <label for="files">GPX Files</label>
-        <input type="file" id="files" name="files" multiple accept=".gpx" required class="form-control"/>
-    </div>
+    <form action="/merge-gpx-tracks" method="POST" enctype="multipart/form-data">
+        <div class="mb-3">
+            <label for="files">GPX Files</label>
+            <input type="file" id="files" name="files" multiple accept=".gpx" required class="form-control"/>
+        </div>
 
-    <div class="mb-3">
-        <label>Output File Format</label>
-        {% for format in formats -%}
-        <div class="form-check">
-            <input class="form-check-input" type="radio" name="format" id="{{ format }}" value="{{ format }}" required
-                   checked>
-            <label class="form-check-label" for="{{ format }}">
-                {{ formats[format].name }} (merged.{{ formats[format].extension }})
-            </label>
+        <div class="mb-3">
+            <label>Output File Format</label>
+            {% for format in formats -%}
+                <div class="form-check">
+                    <input class="form-check-input" type="radio" name="format" id="{{ format }}" value="{{ format }}"
+                           required
+                           checked>
+                    <label class="form-check-label" for="{{ format }}">
+                        {{ formats[format].name }} (merged.{{ formats[format].extension }})
+                    </label>
+                </div>
+            {% endfor %}
         </div>
-        {% endfor %}
-    </div>
 
-    <button type="submit" class="btn btn-primary">Merge Tracks</button>
-</form>
+        <button type="submit" class="btn btn-primary">Merge Tracks</button>
+    </form>
 {% endblock %}