Add social meta tags to your website without plug-ins

gistfile1.html

<!-- Facebook -->
<meta property="og:title" content="Title of your content" />
<meta property="og:description" content="Description Here" />
<meta property="og:url" content="http://www.example.com" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="400" />
<meta property="og:type" content="article"/> <!-- Is it a blog post, picture, video? -->
<!--Facebook Debugger: https://developers.facebook.com/tools/debug-->

<!-- Twitter -->
<meta name="twitter:card" content="Summary"> <!-- Twitter Card Type -->
<meta name="twitter:site" content="@SiteName">
<meta name="twitter:creator" content="@AuthorHandle">
<meta name="twitter:title" content="Article Title ">
<meta name="twitter:description" content="Page Description">
<meta name="twitter:image:src" content="Image URL">
<!-- Twitter Card Validator: https://cards-dev.twitter.com/validator -->
<!-- 
  Twitter Card Types:
  Summary Card: Default Card that includes a title, description, thumbnail, and Twitter account attribution.
  Summary Card with Large Image: It is similar to default Summary Card, except it allows you to feature an image with extra details and attribution.
  Gallery Card: A Card with an album of four photos.
  Photo Card: A Card with Tweet sized photo.
  Player Card: A Card to provide audio, video, or any other type of media.
  App Card: A Card featuring a mobile app with direct download facility.
  Product Card: A Card to show off product.
  Lead Generation Card: A Card for driving leads for your product/service.
  Website Card: A Card featuring your website to drive traffic via clicks.
-->


<!-- via http://www.creativebloq.com/web-design/add-social-meta-tags-61412129 -->