szurubooru icon indicating copy to clipboard operation
szurubooru copied to clipboard

Published 20 hours ago • verified publisher icon rr-

OpenGraph embeds

Open ioistired opened this issue 3 years ago • 6 comments

It would be nice if sharing a link to a szurubooru post on supported platforms (Twitter, Facebook, chat clients etc) would embed a preview of the post. However, as far as I'm aware (not sure though) this requires the metadata to be embedded in the HTML, rather than added by client side javascript, so it might require the backend to also start serving frontend pages or something along those lines.

ioistired avatar Jun 28 '21 07:06 ioistired

Here's my proposed design for enabling OpenGraph tags without changing the structure of the single-page app (SPA), based on the idea from https://stackoverflow.com/questions/50263513/redirect-crawlers-to-internal-microservice-in-nginx

  1. Request comes in from crawler / bot
  2. Nginx performs a match against the user agent (if it's not a crawler/bot, serve normally)
  3. For bots, redirect internally (as the reverse proxy) to http://backend/opengraph/$1
  4. Server backend generates an HTML stub page with just the opengraph tags (this is where permissions will be handled - e.g. denying access if the default post access level is not public)

Step 2 is the part where I am not sure it's the best implementation, since matching the user agent is an evolving problem which needs to be updated for every service that OG tags would be displayed on. (For example the discordbot user agent is not handled in the stackoverflow post I linked: "Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)")

robobenklein avatar Jul 06 '21 14:07 robobenklein

Or we could make the frontend a server side app which serves static HTML except for all pages that have OpenGraph tags, for which it serves static HTML + the tags

ioistired avatar Jul 06 '21 22:07 ioistired

@ioistired how would the frontend go about retrieving that content for the og tags from the backend server? AFAIK the current nginx config has no serverside processing going on at all right now, so what would that additional code look like?

robobenklein avatar Jul 06 '21 23:07 robobenklein

There'd be a backend server for the frontend. index.htm currently looks like this:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport"/>
  <meta content="#24aadd" name="theme-color"/>
  <meta content="yes" name="apple-mobile-web-app-capable"/>
  <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  <meta content="#ffffff" name="msapplication-TileColor"/>
  <meta content="/img/mstile-150x150.png" name="msapplication-TileImage"/>
  <title>
   Loading...
  </title>
  <!-- snip -->
 </head>
 <body>
  <!-- snip -->
 </body>
</html>

i'm proposing we set up a simple little web server in Python that normally continues to serve that, but when requesting something it can generate OpenGraph embeds for, it additionally requests info about the URL from the backend and adds it to the <head> element. Does that make more sense?

ioistired avatar Jul 08 '21 05:07 ioistired

I have implemented the approach I described above as #421. Here's a screenshot:

image

Note that Twitter video embeds are still a work in progress. Currently they're cut off for some reason:

image

ioistired avatar Jul 08 '21 22:07 ioistired