Add OpenGraph tags to playlist page head #3078
Open
+72
−24
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
These were requested on the forums now that we have Atom feeds for playlists, and the embedded previews that use OG tags look very generic.
Forgot the indentifier in the playlist is a fully qualified URL, not just the ID
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.
MonkeyDo
force-pushed
the
playlist-opengraph-tags
branch
from
8adb168 to
e240a66
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
These were requested on the forums, now that we have Atom feeds for playlists and the embedded previews that use OG tags look very generic.
Followed docs at https://ogp.me/#type_music
My initial implementation used react-helmet (which we already use for the purpose of modifying head tags), but unfortunately that means the page must first load and run the react app before the tags are modified/added.
The solution required moving back to the flask/jinja template layer as those will be rendered to HTML directly.
I've modified our main index.html jinja template to support known and arbitrary opengraph tags, with sane defaults (same as before this PR) for title, description and type.
Once we have images for playlist thumbnails, we could consider adding that as og:image tags and testing that out.
Here is the resulting head when loading a playlist page:
N.B.: Considering LB is now a single-page-app with routing on the client-side, the opengraph tags rendered by flask will stay there even after you navigate to another page where (some of) those tags don't apply. This is not really an issue, as the meta tags are meant to be parsed by a machine once on page load while the client-side navigation is all about users in their browser page.