Metatags are tags/elements that describe the content of your website, invariably providing metadata/information for search engines.
You place them within the <head> tag above the <link> tags.
https://metatags.io makes it easy for one to generate these metatags.
In the top-right section, the three highlighted channels (Google, Facebook and Twitter) are most recommended.
Enter the title and description of your website or project.
At the left, Check how your website looks like when the link is searched on Google or how it appears when shared on Facebook or Twitter.
See Screenshot for example.
Then, click Generate Meta Tags
Copy the code into the <head> tag of your html file.
For the preview image, upload your project image on github, cloudinary, google drive or any online storage. Copy the image url into content attribute of tags with property="og:image".