I often find myself referencing back and forth to different resources, old projects, and searching in Google how to create certain social media meta tags to put in my HTML document’s head. The metadata is constantly changing, and there’s tons of different variations of each kind. So, with that being said, I highly recommend that you double check everything you use from this quick tip to make sure it works for your specific needs. A lot of these will even cross-share the tags. For example, Google+ will actually use Facebook’s Open Graph tags if their available. All in all, the following code is a great start.
The following example is taken from one of our articles. Depending on the the webpage, your meta may be required to change (for example a homepage is different than a single blog post). Checkout our source, it’s a clean and organized reference. I also encourage you to take inspiration from how major sharing dependent sites like Smashing Magazine and New York Times do theirs.
Search Engines / Google
|
1 2 3 4 |
<!-- SEO --> <meta name="author" content="Nicholas Cerminara"> <meta name="description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you...."> <link rel="canonical" href="http://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know"> |
Twitter Cards (Large Image)
|
1 2 3 4 5 6 7 |
<!-- Social: Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@scotch_io"> <meta name="twitter:creator" content="ncerminara"> <meta name="twitter:title" content="Bootstrap 3 Tips and Tricks You Might Not Know"> <meta name="twitter:description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you...."> <meta name="twitter:image:src" content="http://scotch.io/wp-content/uploads/2014/05/bs31.jpg"> |
Facebook Open Graph
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Social: Facebook / Open Graph --> <meta property="fb:admins" content="579622216,709634581"> <meta property="fb:app_id" content="1389892087910588"> <meta property="og:url" content="http://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know"> <meta property="og:type" content="article"> <meta property="og:title" content="Bootstrap 3 Tips and Tricks You Might Not Know"> <meta property="og:image" content="http://scotch.io/wp-content/uploads/2014/05/bs31.jpg"/> <meta property="og:description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you...."> <meta property="og:site_name" content="Scotch"> <meta property="article:author" content="https://www.facebook.com/NCerminara"> <meta property="article:publisher" content="https://www.facebook.com/scotchdevelopment"> |
Google+ and Schema.org / Itemscope
|
1 2 3 4 5 6 |
<!-- Social: Google+ / Schema.org --> <link rel="author" href="https://plus.google.com/+NicholasCerminaraV/"> <link rel="publisher" href="https://plus.google.com/+ScotchIo/"> <meta itemprop="name" content="Bootstrap 3 Tips and Tricks You Might Not Know"> <meta itemprop="description" content="Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you...."> <meta itemprop="image" content="http://scotch.io/wp-content/uploads/2014/05/bs31.jpg"> |
Fonte: http://scotch.io/quick-tips/all-search-and-social-media-meta-tags-starter-template