Freecodecamp: /news search results page doesn't produce Twitter card

[QuincyLarson]

Currently the search results page of /news doesn't have the necessary meta properties to produce a large Twitter card. I think we need an og:image and twitter image property for this. We also need the proper tags so that Twitter can display a summary. I imagine this is also the case with Facebook and LinkedIn. Here's an example of the card not rendering on Twitter:

https://twitter.com/ossia/status/1242844586357161987

[DZuz14]

I can tackle this pretty quickly if you guys want.

[DZuz14]

Updating the headers to the following would fix the issue. Some necessary meta tags were missing, including the generic meta description tag.

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

<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@freecodecamp" />

<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="freeCodeCamp.org" />
<meta property="og:type" content="website" />
<meta property="article:publisher" content="" />

[scissorsneedfoodtoo]

@DZuz14, awesome, thank you for jumping on this so quickly.

Please go ahead and submit a PR to the news-theme repo and we'll review it right away: https://github.com/freeCodeCamp/news-theme

[DZuz14]

Yeah, I was under the assumption news was handled by the Gatsby app. I unfortunately don't have any time to learn how Ghost and handlebars works. If someone already familiar with it had the information above, they could easily change all of the templates headers to display information in this style.

As of right now, I can see the home page, search results, and blog posts all contain different types of meta tags. Prob best to make them all uniform, because it seems to be all over the place.

[DZuz14]

If anyone else wants to pick this up, here are some links for easy reference:

• Twitter Card Validator

• Twitter Card Markup Reference

• Facebook Sharing Debugger

• Facebook Open Graph Reference

[ahmadabdolsaheb]

The news meta is handled by ghost automatically.
Some pages do not include social meta, which need further investigation.
Here is a good place to start for unifying the social meta for the gatsy app.
https://github.com/freeCodeCamp/freeCodeCamp/blob/master/client/src/head/meta.js

[scissorsneedfoodtoo]

Hi @DZuz14, thanks for the additional details and for looking at different blogs posts. Making the meta tags uniform across the different apps is definitely something we should look into.

[darek-grund]

@ahmadabdolsaheb @ojeytonwilliams - Social metatags can be edited using Ghost Admin Panel. You can set metatags per page/post and Search Page should be no different.

1. In Admin Panel, go to Pages and click on Search page (yours may have different name). It will allow you to edit that page:
   

2. In top right corner there is setting button, clicking on it will reveal sidebar:
   

3. At the bottom you can set metatags for Facebook and Twitter.

Before we start hacking metatags in template files, please check if you can edit the metatags using Admin Panel. I've tested it on my end and it works, so please try it and let me know if it works on your end too. If not, then we will investigate this issue further.

It's also good idea to set default social media metatags, and it will be used whenever Twitter or Facebook metatags are not set. You can do it in Admin Panel, here:

[ahmadabdolsaheb]

@scissorsneedfoodtoo, would have better context, but the search page is not a regular page.

[scissorsneedfoodtoo]

Thank you for all of those helpful details and screenshots @darek-grund. I was looking into the templates a little while ago, but handling it this way would be much easier.