The minimum Essential Meta tags to make your website Social Media shareable
When we share a website on social media, says Facebook, Twitter, LinkedIn, etc. these websites fetch some metadata from the URL and show a nice card with a title, description, and sometimes an image associated with it. These are not random and you can customize the same using meta tags in your HTML document.
Meta Tags for Social Media Sharing
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Moody Man" />
<meta name="twitter:description" content="Moody Man - Play a game of hangman online" />
<meta name="twitter:image" content="https://moodyman.gamelette.com/background-1.png" />
<!-- Open Graph data -->
<meta property="og:title" content="Moody Man" />
<meta property="og:type" content="game" />
<meta property="og:url" content="https://moodyman.gamelette.com/" />
<meta property="og:image" content="https://moodyman.gamelette.com/background-1.png" />
<meta property="og:description" content="Moody Man - Play a game of hangman online" />If you are adding Meta tags for Social Media Share to a React App created with CRA, You can add the same in view \public\index.html file
You can validate your meta tags are working properly or not using these below tools
While these meta tags are good for a start, If you are looking to deep dive and customize more you can follow docs on Open Graph and Twitter docs.
I learned about these while developing a PWA Game Moody Man
