Add OpenGraph tags to index.html Jinja template

We need to add OG meta tags *before* the react page is loaded (at which point react-helmet can take over) as the tags are read on page load in a lot of cases. This system should allow us to add any arbitrary og: meta tag we want on various pages as needed, with sane defaults for existing OG tags such as og:type, og:description and og:title as we have them until now.
metabrainz · Jan 8, 2025 · e240a66 · e240a66
1 parent c27faf7
commit e240a66
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 21 deletions.
diff --git a/listenbrainz/webserver/templates/index.html b/listenbrainz/webserver/templates/index.html
@@ -1,5 +1,16 @@
 {% from 'macros.html' import print_message %}
-
+{%
+  set opengraph_title =  og_meta_tags['title'] if og_meta_tags and og_meta_tags['title']
+  else "ListenBrainz"
+%}
+{%
+  set opengraph_description =  og_meta_tags['description'] if og_meta_tags and og_meta_tags['description']
+  else "Track, explore, visualise and share the music you listen to. Follow your favourites and discover great new music."
+%}
+{%
+  set opengraph_type =  og_meta_tags['type'] if og_meta_tags and og_meta_tags['type']
+  else "website"
+%}
 <!DOCTYPE html>
 <html>
 <head>
@@ -11,32 +22,28 @@
 
   <meta
     name="description"
-    content="Track, explore, visualise and share the music you listen to.
-  Follow your favourites and discover great new music."
+    content="{{ opengraph_description }}"
   />
   <!-- OpenGraph meta tags -->
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="ListenBrainz" />
   <meta property="og:site_name" content="ListenBrainz" />
-  <meta
-    property="og:description"
-    content="Track, explore, visualise and share the music you listen to.
-  Follow your favourites and discover great new music."
-  />
+  <meta property="og:title" content="{{ opengraph_title }}" />
+  <meta property="og:type" content="{{ opengraph_type }}" />
+  <meta property="og:description" content="{{ opengraph_description }}" />
   <!--  OpenGraph image meta tags -->
   <meta
     property="og:image"
     content="{{ url_for('static', filename='img/share-header.png', _external=True) }}"
   />
   <meta property="og:image:width" content="1280" />
   <meta property="og:image:height" content="640" />
+  <!-- Other OpenGraph meta tags (title, type and description are already handled above) -->
+  {%- for tagname, tagvalue in (og_meta_tags or {}).items() if tagname not in ['description', 'title', 'type']-%}
+    <meta property="og:{{ tagname }}" content="{{ tagvalue }}" />
+  {%- endfor -%}
+
   <!--  Twitter meta tags -->
-  <meta name="twitter:title" content="ListenBrainz" />
-  <meta
-    property="twitter:description"
-    content="Track, explore, visualise and share the music you listen to.
-  Follow your favourites and discover great new music."
-  />
+  <meta name="twitter:title" content="{{ opengraph_title }}" />
+  <meta property="twitter:description" content="{{ opengraph_description }}"/>
   <!--  Twitter image meta tags -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta

diff --git a/listenbrainz/webserver/views/playlist.py b/listenbrainz/webserver/views/playlist.py
@@ -1,4 +1,4 @@
-from flask import Blueprint, render_template, jsonify
+from flask import Blueprint, current_app, render_template, jsonify
 from flask_login import current_user
 
 from listenbrainz.webserver import ts_conn, db_conn
@@ -10,10 +10,27 @@
 playlist_bp = Blueprint("playlist", __name__)
 
 
-@playlist_bp.route("/",  defaults={'path': ''})
-@playlist_bp.route('/<path:path>/')
-def playlist_page(path):
-    return render_template("index.html")
+@playlist_bp.route("/",  defaults={'playlist_mbid': ''})
+@playlist_bp.route('/<playlist_mbid>/', methods=["GET"])
+def playlist_page(playlist_mbid: str):
+    current_user_id = None
+    og_meta_tags = None
+
+    if current_user.is_authenticated:
+        current_user_id = current_user.id
+
+    if is_valid_uuid(playlist_mbid):
+        playlist = db_playlist.get_by_mbid(db_conn, ts_conn, playlist_mbid, False)
+        if playlist is not None and playlist.is_visible_by(current_user_id):
+            og_meta_tags = {
+                "title": playlist.name,
+                "description": playlist.description,
+                "type": "music:playlist",
+                "url": f'{current_app.config["SERVER_ROOT_URL"]}/playlist/{playlist_mbid}',
+                "music:creator": f'{current_app.config["SERVER_ROOT_URL"]}/user/{playlist.creator}',
+                # "image": Once we have playlist images we can try adding it here
+            }
+    return render_template("index.html", og_meta_tags=og_meta_tags)
 
 
 @playlist_bp.route("/<playlist_mbid>/", methods=["POST"])