search

sqz269 / tlmc-player-vue

MIT License
4 stars 0 forks source link

Add OpenGraph Metadata Support for Scraper/Spiders #29

Open sqz269 opened 1 year ago

sqz269 commented 1 year ago

Add OpenGraph support such that when a user shares a link, properly formatted images and titles will be displayed.

However, due to the frontend implementation (static content), we can't generate OpenGraph elements.

Current plan:

  1. Frontend deployment will no longer be on Github pages but instead served by an Nginx server
  2. A docker file will be created for frontend code and an Nginx server
  3. In the Nginx server, check for the user agent. If the user agent matches a known scraper (Discord bot/Google Bot), rewrite the URL to the backend server that will generate OpenGraph metadata for that URL. Else return actual frontend assets
  4. A backend needs to be created to generate OpenGraph elements

OpenGraph Documentation https://developers.facebook.com/docs/opengraph/music/

sqz269 commented 1 year ago

One difficulty in implementing this feature is that we currently use hash mode with Vue router, which means the path data is displayed after the # (URL fragment), which will not be sent to the server. And the server is unable to figure out what kind of resource the URL is pointing to (For example, if the URL is http://localhost:9000/#/album/171d1dbc-a7ea-416a-bd51-89c5120de856, the browser will only send the http://localhost:9000/ part, while everything after # ignored)

However, this can be solved by changing the routing mode to history, and the side effects of the change need to be tested.