search

freeCodeCamp / guide

A collection of easy-to-understand guides to programming tools
https://guide.freecodecamp.org
2.14k stars 4.21k forks source link

Meta OG image doesn't work when there's already an image but it's too small #7910

Closed QuincyLarson closed 6 years ago

QuincyLarson commented 6 years ago

Some articles have images - and thus the meta data won't fall back to our default image: https://s3.amazonaws.com/freecodecamp/freecodecamp-square-logo-large.jpg

This is related to https://github.com/freeCodeCamp/guides/issues/7895 which @spezzino recently fixed.

For example:

sharing_debugger_-_facebook_for_developers

If you look at the article, it has images, but they're too small to for websites like Facebook to bother rendering them:

binary_search___freecodecamp_guide_and_inbox__83__-_submit_freecodecamp_org_-_free_code_camp_mail

We need to figure out what the minimum dimensions an image has to be before Facebook will render it as the default image. Then if there aren't any images at least that big, we should fall back to our default image.

CC @systimotic

systimotic commented 6 years ago

According to https://developers.facebook.com/docs/sharing/best-practices/#images, the minimum image size is 200 x 200 pixels. Figuring out the size of the images at build time will be challenging 😄

QuincyLarson commented 6 years ago

@systimotic We just need to make sure at least one image per page is 200x200px. Perhaps we could figure out a way of adding the image dimensions as an attribute on the image tag to speed up future builds?

johnkennedy9147 commented 6 years ago

@QuincyLarson @systimotic As an interim solution we could always use the default image.

Sometimes images within the article are not going to make good sharing images anyway, maybe the best long term solution is to get a good graphic made specifically for the og:image for guides which is then used on all articles. Or maybe something that combines a common guides image with the article title so its specific to the shared article but provides a consistent look and feel.

QuincyLarson commented 6 years ago

@johnkennedy9147 I see what you're saying. I think we should have the goal of finding a relevant web comic or other fun large image to include in every page. That way, these will be a lot more appealing. It's OK if some of these are reused on multiple articles. XKCD and CommitStrip have some great ones that should look good as the article's OG image.

Would you be interested in helping find appropriate webcomics and adding them with citation to these articles?

johnkennedy9147 commented 6 years ago

@QuincyLarson Sorry, to clarify, you are saying to embed an image in each article, which would be then used for the OG image?

I know a good one to use whenever an article talks about browsers 😃 browser choice

QuincyLarson commented 6 years ago

@johnkennedy9147 That's a great one!

Yes - to clarify, I think we should strive to have a fun or relevant image on every page of the guide, though realistically, people will gradually add these over the coming year or two organically.

I think we can leave the code as it is currently, and as these images are added, more and more of the Twitter / Facebook cards for articles will start to look better.