Add meta/og tags

Add noIndex tag to /favs. Google complained about / and /favs returning the same content.
SenneMalfliet · Jun 25, 2024 · ec3d23b · ec3d23b
1 parent 8f40916
commit ec3d23b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# freetar - an alternative frontend for ultimate-guitar.com
+# freetar - an open source alternative front-end to ultimate-guitar.com
 
 This is like [Invidious](https://invidious.io/) but only for [Ultimate Guitar](https://www.ultimate-guitar.com/).  
 

diff --git a/freetar/backend.py b/freetar/backend.py
@@ -10,9 +10,7 @@
 
 @app.route("/")
 def index():
-    return render_template("index.html",
-                           title="Freetar",
-                           favs=True)
+    return render_template("index.html", favs=True)
 
 
 @app.route("/search")

diff --git a/freetar/templates/base.html b/freetar/templates/base.html
@@ -1,17 +1,31 @@
 <!doctype html>
 <html data-bs-theme="light" lang="en">
 
+{% import 'macros.j2' as macros %}
+
+
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <meta name="description" content="freetar is an open source alternative frontend to ultimate-guitar.com. Search for your chords/tabs hosted on Ultimate Guitar. View them in a simple design. You can save them for later in your favorites without having an account." />
+  <meta name="keywords" content="freetar guitar chords tabs ultimate-guitar" />
+  {{ macros.nodinex_on_favs() }}
+
+  <meta property="og:title" content=freetar - guitar chords from Ultimate Guitar>
+  <meta property="og:site_name" content=freetar>
+  <meta property="og:url" content=https://freetar.de>
+  <meta property="og:description" content=freetar is an alternative frontend for ultimate-guitar.com>
+  <meta property="og:type" content=website>
+  <meta property="og:image" content=https://freetar.de/static/guitar.png>
+
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
-  <title>{{ title or "Welcome to Freetar" }}</title>
+  <title>{{ title or "Freetar - guitar chords from Ultimate Guitar" }}</title>
   <link rel="icon" type="image/png" href="/static/guitar.png" />
   <script>
     if (JSON.parse(localStorage.getItem("dark_mode")) || false)
@@ -25,8 +39,11 @@
     <div class="container d-flex" style="flex-wrap: nowrap;">
       <a class="navbar-brand" href="/">Freetar</a>
       <form class="d-flex w-50" method="GET" action="/search">
-        <input required class="form-control me-2" name="search_term" type="search" placeholder="Search"
-          aria-label="Search">
+          {% if search_term %}
+            <input required class="form-control me-2" name="search_term" type="search" value="{{ search_term }}" aria-label="Search">
+          {% else %}
+            <input required class="form-control me-2" name="search_term" type="search" placeholder="Search for chords" aria-label="Search">
+          {% endif %}
         <button class="btn btn-outline-success d-none d-md-block" type="submit">🔎</button>
       </form>
       <ul class="navbar-nav ms-2" style="flex-direction: row;">

diff --git a/freetar/templates/macros.j2 b/freetar/templates/macros.j2
@@ -0,0 +1,5 @@
+{% macro nodinex_on_favs() %}
+  {% if request.endpoint == 'show_favs' %}
+    <meta name="robots" content="noindex">
+  {% endif %}
+{% endmacro %}