Web: Kudos Image Not Unfurling

Created on 21 Nov 2018  路  9Comments  路  Source: gitcoinco/web

Describe the bug

When posting links to Twitter, Kudos thumbnails are not populating in the social description:

image

To Reproduce

Tweet a link to a kudos URL (ex https://gitcoin.co/kudos/388/ipfs)
View

Expected behavior

The image would unfurl in social posts

Screenshots

See above

Desktop (please complete the following information):

Additional context

Gitcoin Kudos

Most helpful comment

鈿★笍 A *Fast Response* Kudos has been sent to @kuhnchris for this issue from @owocki. 鈿★笍 Nice work @kuhnchris! Your Kudos has automatically been sent in the ETH address we have on file.

All 9 comments

Weird, the twitter card is provided multiple times in the head section, we may need to clean that up. the 'last' reference is a local /v2/... reference, assumingly that's why it's not working. Made a PR to solve this, cannot test it locally as twitter refuses to expand my port in the twitter card preview tools and I do not have the time to setup my redirect to a non-port address at this moment. ;-)

This is something was working, I believe is related to this change https://github.com/gitcoinco/web/commit/f40fc2e4567e5398080bbd589cac3f33994c1861#diff-ce9247470f8bc69895af06c61a6bacec
that left the images very small and for social sharing there are some minimum sizes we need in the og metadata also I saw there was a change in the og metadata so twitter one is two times in the page one to https://gitcoin.co/dynamic/kudos/388/ipfs and the second one to the svg (doesn't work for social sharing)

Not sure why the resize of 2x of the png was removed, as I read in the commits maybe was creating some conflicts but I believe that also affect the email template "new kudos" too
Some tools
https://cards-dev.twitter.com/validator
https://developers.facebook.com/tools/debug/

So in resume of what is happening I believe:
Twitter is sending robots to the page, there is 2 og metas with images one is a png and the other svg
In the past it was taking the png and that was working, looks like now png is too small to use it and svg is not supported resulting in twitter card without an image

50bcd0649649bbec1d897b607d1dda93e9d2bba2 fixes this

test it at https://cards-dev.twitter.com/validator

OK, throwing away my PR

sorry @kuhnchris -- i didnt see that earlier.. though im not sure that we've actually solved the root cause issue here. we might need to fix the other root causes

From @octavioamu :

We have 3 problems one is the format and other the the size and the repeated metas

鈿★笍 A *Fast Response* Kudos has been sent to @kuhnchris for this issue from @owocki. 鈿★笍 Nice work @kuhnchris! Your Kudos has automatically been sent in the ETH address we have on file.

Don't worry. If you guys got a "proper fix", then it's far better than my juggling around. ;-)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Skyge picture Skyge  路  3Comments

NukeManDan picture NukeManDan  路  3Comments

uluhonolulu picture uluhonolulu  路  3Comments

ghost picture ghost  路  3Comments

kuhnchris picture kuhnchris  路  4Comments