Update metadata on recipes to support link preview on iOS

[greirson]

First Check

• I used the GitHub search to find a similar requests and didn't find it.
• Checked the tasks tagged issues and verified my feature is not covered

Please provide a concise description of the problem that would be addressed by this feature.

Currently when sending a link to a recipe via iOS messages there is a generic title and image in the preview, instead of the Recipe name and the image associated with the recipe.

Please provide a concise description of the feature that would resolve your issue.

iOS messages leverages Open Graph metadata to retrieve the preview data. It would be great to implement the Title and Image from the recipe as described here

Please consider and list out some caveats or tradeoffs made in your design decision

May impact recipe scraping? I’m unsure of any other caveats.

Additional Information

• If this is accepted I'm willing to submit a PR to provide this feature
• If this is accepted I'm willing to help maintain this feature
• I'm willing to sponsor/pay a developer to do this work

[michael-genson]

Mealie does implement open graph metadata, specifically for link previews, but the recipe has to be public (otherwise the recipe data can't be scraped). Are your recipes publically accessible?

[greirson]

Yes the recipe and the household are set to public and its visible it while not logged in. But the metadata shows the generic site data not data from the recipe, even when logged in .

[michael-genson]

Hmm, maybe it's an issue with IOS? Can you try this link and see if you get a preview? I confirmed it works on Discord.

https://demo.mealie.io/g/home/r/crispy-prosciutto-lemon-pesto-pasta-with-broccoli-parmesan

[michael-genson]

[greirson]

It gets the title but no image for that link in iOS Messages. I'm running 2.1.0, any idea what could block it?

[michael-genson]

I'll have to look into why the image isn't working on iOS but working fine on Discord (and other apps). For why the text isn't working for your site I'm not sure. Are you serving with a valid cert over HTTPS? Not sure if that matters but it could.

Can you scrape your site with curl and see the metadata in the response? e.g. curl https://your-site.com/g/home/r/your-recipe

[elcid2012]

@michael-genson I’m also having the same issue in iOS. My website is also publicly accessible and all recipes are public, but I still do not have previews in iMessage.

I’m not certain this is specific to iOS but rather to the website itself. In my case I’ve mealie running behind a reverse proxy locally, and Cloudflare tunnels externally.

So I ran a curl command via https://reqbin.com/curl on both my mealie instance and the demo instance. All of the metadata seems to be similar, but I did find something that might point to part of the problem in the response.

The og:image is returning https://demo.mealie.io on the demo site, but http://mealie.example.com:8080 via curl. Now, I’d say that that’s wrong, but if I browse to http://mealie.example.com:8080/path-to-image, it does indeed load the image in my browser.

But perhaps the way the iOS scraper works, it’s not successful in pulling the image. After erroring out on that, perhaps it gives up parsing the rest of the metadata and so we see a generic website link instead of pretty open graph data.

Just spitting out some ideas. I’d like to see if I can change the URL path to the proper string somehow… saving that experiment for the morning.