Bookmark card: Better url handling and error message

[rishabhgrg]

Issue Summary

Bookmark card has few minor issues atm as listed below -

• Better error message handling: Currently bookmark card fails with Unable to parse URL error in case of all failures including insufficient metadata available. We should differentiate between "unable to parse" and "page has insufficient metadata" cases and show appropriate error message to avoid confusion (ref: Bookmark card fails to parse dev.to link #11201)

• Storing original url on payload: We currently store the url grabbed from page's metadata in the bookmark card payload, which might not be pointing to original pasted url in many cases. We should improve our handling of this by storing the url that is pasted in rather than one that is grabbed from the page. (ref: bookmark card has problem get full of the canonical URL from a page #11209)

• Fixing empty payload for invalid cases: In case of invalid bookmark card, we currently store payload as {}, unlike embed card which stores original url as part of payload - payload: {url: '....'}. Bookmark card payload needs to be updated to mimic same behavior because it lets the user click the retry/paste as link buttons to get their original url back.

[jenlky]

Hi I would like to work on this issue. The guide to set up local development copy of Ghost at https://ghost.org/docs/install/source/ seems outdated. I'm unable to do git clone --recurse-submodules git@github.com:TryGhost/Ghost && cd Ghost.

[souravdasslg]

Hey @rishabhgrg , is this issue taken up by anybody ? I'd like to take this up :)

[kamranayub]

Oh wow, the second bullet point is huge if someone's trying to showcase affiliate-based links. Yikes!

I also noticed that even for relatively large sites like Amazon, you don't seem to get the right image previews and information.

For example, if I want to feature some products I'm reviewing/using, I get this:

But if posted to Facebook, the open graph meta tags seem correctly interpreted:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.amazon.com%2FSmart-Enabled-Google-Assistant-HomeKit%2Fdp%2FB076J8SLSF

I love this new feature but especially preserving what I pasted in is critical. It would be ideal to be able to have a fly-out to customize the fields if it failed to parse or doesn't look right, to fix issues like that, too.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[devaman]

Hi @rishabhgrg , I have tried resolving this issue... Can you take a look at it?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kevinansfield]

I also noticed that even for relatively large sites like Amazon, you don't seem to get the right image previews and information.

Unfortunately Amazon make it difficult to reliably extract product images from their pages. They don't include any of the standardised opengraph data so it's necessary to parse the html and find an element containing the image that Amazon is showing as the primary image - this is easier said than done because they use different html and classes across different types of product page (even for the same product in my testing).

There's an upstream issue on the library we use to extract metadata for bookmark cards here RE extracting Amazon images microlinkhq/metascraper#50. I tested adding the metascraper-amazon dependency to our metascraper plugins but it didn't improve anything.