CommonsSwarm / tec-hatch

Front end for the Hatch
https://hatch.tecommons.org/
3 stars 11 forks source link

Meta tags for twitter and other SM #119

Closed Vyvy-vi closed 3 years ago

Vyvy-vi commented 3 years ago

Description

This PR adds some meta tags to public/index.html, that improve SEO(to some extent) and help websites in forming embeds, like Cards on twitter.

*This is kinda inserted statically for now, if we want, we could set these up as a dynamic head component(though since this doesn't have other pages, i think this is fine). (This PR is in response to https://github.com/CommonsBuild/coordination/issues/815)

Generated Embeds

Twitter- Screenshot 2021-07-21 at 9 12 12 PM

Discord- Screenshot 2021-07-21 at 9 21 37 PM

Added Tags

  <title>TEC Hatch</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="title" content="Token Engineering Commons Hatch">
  <meta name="description" content="TEC Hatch" />

  <meta property="og:type" content="website" />
  <meta property="og:title" content="Token Engineering Commons Hatch" />
  <meta property="og:description" content="Join the TEC and become part of the movement to advance Token Engineering for the benefit of societies around the globe." />
  <meta property="og:url" content="https://hatch.tecommons.org/" />
  <meta property="og:image" content="https://raw.githubusercontent.com/CommonsBuild/tec-branding-assets/main/Marketing/Twitter/Profile.png" />
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:url" content="https://hatch.tecommons.org/" />
  <meta property="twitter:site" content="@tecmns" />
  <meta property="twitter:title" content="Token Engineering Commons Hatch" />
  <meta property="twitter:description" content="Join the TEC and become part of the movement to advance Token Engineering for the benefit of societies around the globe." />
  <meta property="twitter:image" content="https://raw.githubusercontent.com/CommonsBuild/tec-branding-assets/main/Marketing/Twitter/Profile.png" />

Text from Griff, branding art/design from Markop

sembrestels commented 3 years ago

Thanks @Vyvy-vi! I included it in the code here: 2df20340127c19c5cd52101ff880562dc5496383

I also changed the urls to self-host the logo, in order to do not leak information of the website visitors to github here: e0bf1ddda79d10f03bb40dd5789b2aa738d9c11b