EBSECan/donatemask

Website Previews Don't Work on Facebook, Twitter, etc.

Closed this issue · 3 comments

mekkim commented

When you compose a post on Facebook, Twitter, LinkedIn, etc., with a link, like donatemask.ca, the sites try to grab a "preview" of the site's page to include as a clickable image on the post. Currently, none of these previewers are able to render anything to preview for any of the donatemask.ca pages and sub-pages.

This must be a solved problem for React pages but may involve some trickery that needs a bit of research.

jaas666 commented

You can force this by adding Open Graph Tags and Twitter card tags to the HEAD of the page.

Is that what you mean?

mekkim commented

Could be! If you know what tags should be added, suggestions or a pull request are most welcome!

jaas666 commented

I'm still not very good with React but here's my suggestion.

Add the following to the HEAD fo the website

<meta name="description" content="">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://donatemask.ca/">
<meta property="og:type" content="website">
<meta property="og:title" content="Donate a Mask">
<meta property="og:description" content="">
<meta property="og:image" content="">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="donatemask.ca">
<meta property="twitter:url" content="https://donatemask.ca/">
<meta name="twitter:title" content="Donate a Mask">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

TODO:

  • Write a description to use for <meta name="description" content=" **DESCRIPTION HERE** ", <meta property="og:description" content=" **DESCRIPTION HERE** "> and <meta name="twitter:description" content="** DESCRIPTION HERE **">

  • Get the image to display on the preview cards and insert the URL in <meta property="og:image" content=" **URL HERE** "> and <meta name="twitter:image" content=" **URL HERE** ">

  • Replace<meta property="og:url" content="https://donatemask.ca/">, <meta property="twitter:domain" content="donatemask.ca">, <meta property="twitter:url" content="https://donatemask.ca/"> with correct domain.

I'm pretty sure there has to be a way to specify all these fields in some config file or something and dynamically populate them using React but I'm not there yet... sorry.