Streaming live at 10am (PST)

Unfurling issues

I’ve followed the instructions on this site in order to get Open Graph images (link image previews) set up, however, when I share a Webflow link in Slack, I get a small image preview and not the larger richer visual. This happens on my test site but also happens if I share www.webflow.com which is leading me to think its something Webflow is controlling. https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254

In this screenshot, I want the green box but I get the red box instead.


This is the code that I’ve injected into the Webflow page settings. I’ve also uploaded an image and linked it for the open graph settings.

My test link is below. Thanks ahead of time for your help. As you can imagine, sharing a rich visual of a Webflow site to my team on Slack is important. Thanks!


Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

[1]: https://spark-brand-guidance-light.webflow.io/ test link
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

Hi :wave:t2:

Thanks for posting your question in the forums.

This is interesting behavior, as I was able to experience the small thumbnails when sharing other Webflow links in Slack. I want to clear on any limitations around this, so I have reached out to my team in order to acquire further info.

I’ll get back to you as soon as possible whenever I hear back from them.

Thank you for you patience through this, and please let me know if you have any further questions.

My best,
Riley

Hi again,

I was able to run some further tests after talking this through with a teammate, and I’m curious if all the value parameters were modified to to content then after saving and re-publishing that smoothens out this issue?

You can do some quick testing through Twitter’s validator to quickly see how the preview image comes through.

Hopefully this helps, and let me know if you have any further questions.

Riley

Hello, and thanks for the quick follow up.

I changed value to content and the following happened.
The slack preview images are still small. (See attached).
The twitter card actually broke and would not show an image, and the canvas for the image was small. When I changed content back to value the twitter card shows the larger image that I’m looking for. I’ve tested this in Facebooks debugger as well, and it shows the larger/richer image, but I’ve still not been able to figure out why a link preview of a Webflow link shows the small in a Slack message. I know it’s possible because I’ve done it to a site I’ve put together in the past (before Webflow) as well as I’m adding an image of Techcrunch link being shared, as you can see it shows the larger/richer image.

The image preview is still small for my link (when I change value to content). The Webflow proper .com image preview is small as well.

This techcrunch link preview is what I am looking for. A larger rich image.

I reached out to Slack in parallel and they came back with a suggestion. It appears there’s Webflow code that could be overwriting my Image Preview code? See attached.

Hi @skelley!

Thanks for reaching back out and sharing this/the efforts you made so far.

Would it be possible to replace the twitter tags with this template from Twitter to see if that helps how the tags are being rendered?

I tried that code and it still doesn’t give me the larger image preview.

re-posting the custom code I add to Webflow here and also showing how the code is being written by Webflow. It appears Webflow is removing the “summary_large_image” and replacing it with “summary”.

@RileyJones wondering if you were able to talk to the @webflow team about the overwriting issue mentioned above? Thanks for the time.

@here @webflow, wondering if anyone has taken a look at this issue?

Hey @skelley,

Thanks for reaching back out, and happy new year! When I run a successful attempt through the validator, and then try again in Slack then the results aren’t always the same.

I got some more insight from a teammate of mine and he mentioned,

Team, Slack Admins / Owners can control which domains unfurl in their workspaces. In ours (for example) we have quite a few that are blacklisted. So that may have some impact on how this works across different slack workspaces.

Do you have any success when you test the published domain and not the .webflow.com subdomain?

Hopefully this helps a bit, and please let me know if you have any questions.

I am having the same issue - Webflow is overwriting

<meta content="summary_large_image" name="twitter:card">

with

<meta content="summary" name="twitter:card">

which Slack specifically requires according to their link unfurl documentation:

Not sure why @skelley has had to follow up 3 times to get a response to this but I’d like to know why this is getting overwritten as well.