search

LycheeOrg / Lychee

A great looking and easy-to-use photo-management-system you can run on your server, to manage and share photos.
https://lycheeorg.github.io/
MIT License
3.43k stars 304 forks source link

[Enhancement] Opengraph tagging of album and image page #729

Open chrissearle opened 4 years ago

chrissearle commented 4 years ago

If opengraph tags were added to the head metadata (for an album - album name and use the image thumb for image) - then sharing to sites that use opengraph (FB etc) would give a nicely formatted sharing object

ildyria commented 4 years ago

This is in the plans, at the back of my head.

At the moment, it is not possible because loading albums is generated by JS.

Maybe in some later implementation of a new front-end.

chrissearle commented 4 years ago

Understood. But - if you managed to build the <head> block backend for the current URI (image or album) then it would not need to be updated by the JS - since when you share the direct link - thats the page that gets loaded from the server.

So - you could have a header block backend that fetched just the data needed for OG and then add that to the <head> that index.php (or whatever) delivers.

chrissearle commented 4 years ago

Might be worth testing setting it in JS too - I thinhk some sites (FB maybe?) render JS on fetch.

ildyria commented 4 years ago

If the JS sets it, I don't have any problem with merging such solution.

Currently this is what happens:

  1. Servers get /gallery query, returns the gallery pages
  2. page load, and execute JS.
  3. JS parses url and get the fragment (after the #) and make a post Query to get the album data.
  4. JS renders the album.

Also, as far as I know, it is not possible to get the fragment server side without using JS. https://stackoverflow.com/a/2317523

On the other side, as Instagram is really annoying with respect to # I added a route: if your album (also works for photos) is at the address https://example.com/gallery#123456 , you can use this shortcut: https://example.com/r/1234567 This will do a 30x redirection on https://example.com/gallery#123456

I am highly interested in Livewire https://www.youtube.com/watch?v=fX1aOWWt2nQ and I am thinking about rebuilding a new front end on it. I think this would also fix this problem but I need to dig dipper.

chrissearle commented 4 years ago

Managed to find something (although not official) that said that google's bot will render JS and waits 20 sec before reading - but can't find anything for FB. Would need to implement the tagging on an available instance and then see what the DB sharing debugger showed.

https://developers.facebook.com/tools/debug/

Or - open a port with something like ngrok Or - just found a chrome plugin called open graph preview :)