musiqpad / mqp-server

NodeJS server base for hosting an individual pad
MIT License
30 stars 18 forks source link

[Feature] Add support for Open Graph. #57

Closed Uricorn closed 8 years ago

Uricorn commented 8 years ago

Facebook and other websites rely on Open Graph to generate a rich preview of a website.

How it currently looks: capture

It will look much better with the following: `

`

foodbandlt commented 8 years ago

This is a complicated issue with the hosted frontend because those attributes would not be set until after page load and after javascript has executed. We could try baking them into the page initially, but it would required templating and I don't know what overhead that would bring with it for our webserver.

Perhaps @TheBanHammer could provide some insight on it. He setup the webserver, so he might have a better idea of how we could implement this. I don't remember what webserver we used for the hosted frontend.

foodbandlt commented 8 years ago

In addition to that, if we do go through with templating this into the hosted frontend, this might make getting pad configs to the frontend easier for hosted frontend. At the moment there are some weird caching issues with pad configs because of how it's delivered.

TheBanHammer commented 8 years ago

@foodbandlt I've been looking into this with a fair amount of thought. Currently I have an idea however it needs discussing internally before it goes ahead.

TheBanHammer commented 8 years ago

This has been added now. OpenGraph will work on both shortened and full length urls:

Full Length URL

Shortened URL

Uricorn commented 8 years ago

Will there be a way to customize the image?

Also the default image doesn't meet the optimal specs for Facebook. I recommend using an image that is 1200x628 in PNG format. That is UNDER 900 Kb.

tinypng.com is a great compression service if you need one.

The preview will be nicer, something like this. capture

DerpgonCz commented 8 years ago

We will probably be customizing it more, like allow pads to add their own image like with background

Uricorn commented 8 years ago

This does not work on pad links that aren't mqp.io or musiqpad.com

Also should I open an issue regarding the og:image?

TheBanHammer commented 8 years ago

@Uricorn it is only supported on the official links as it isnt handled by the web server directly.

I would recommend opening a generic feature request for Open Graph improvements and customization for the central server.