Skip to content

Instantly share code, notes, and snippets.

@ogryzek

ogryzek/social_meta.html

Created February 22, 2014 18:47
Show Gist options
  • Save ogryzek/9159918 to your computer and use it in GitHub Desktop.
Save ogryzek/9159918 to your computer and use it in GitHub Desktop.
Download ZIP
Social media meta tags reference: Thanks to https://twitter.com/j_holtslander
Raw
social_meta.html
<html>
<head>
<title>__________</title>
<!--[if lt IE 9]>
<script src="https://raw.github.com/aFarkas/html5shiv/master/src/html5shiv.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta name="robots" content="noarchive"> <!-- Noarchive will prevent Google caching the page. -->
<meta name="keywords" data-page-subject="true" content="keyword,keyword,keyword,keyword,keyword,keyword,keyword" /> <!-- Relevant Keywords -->
<link rel="shortcut icon" href="favicon.ico">
<!----- Google ------->
<meta name="google" content="notranslate" /> <!-- Prevent translation to other languages -->
<meta name="google-site-verification" content="________________"/>
<link rel="author" href="https://plus.google.com/112278952869329204333"/><!-- Specifies Page's Author to Google. -->
<!----- OpenGraph Data Used for sites like Facebook, Linkedin, Twitter, Google+ & more ------->
<meta property="og:title" content="________________" />
<meta property="og:type" content="website" />
<meta property="og:site_name" data-page-subject="true" content="________________" />
<meta property="og:url" content="http://devignmag.com" /> <!-- OpenGraph MetaData - Best Link -->
<meta property="og:description" name="description" content="________________" /> <!-- Website description -->
<!-- Multiple og:images are ok. Facebook will give the user the choice to choose one of the og:image thumbnails -->
<meta property="og:image" content="http://____.com/image-180x110.jpg" /> <!-- 180x110 Image for Linkedin - Do not exceed -->
<meta property="og:image:width" content="180" />
<meta property="og:image:height" content="110" />
<meta property="og:image" content="http://____.com/image-200x200.jpg" /> <!-- 200x200 Image for Facebook -->
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<meta property="og:image" content="http://____.com/image-403x403.jpg" /> <!-- 403x403 Image for Facebook -->
<meta property="og:image:width" content="403" />
<meta property="og:image:height" content="403" />
<meta property="og:image" content="http://____.com/image-736x1128.jpg" /> <!-- Optimum Image for Pinterest -->
<meta property="og:image:width" content="736" /> <!-- Try to keep this width -->
<meta property="og:image:height" content="1128" /> <!-- Can be any height -->
<meta property="og:image" content="http://____.com/image-1500x1500.jpg" /><!-- Largest image for Facebook (Max. 5MB)-->
<meta property="og:image:width" content="1500" />
<meta property="og:image:height" content="1500" />
<!----- Linkedin ------->
<meta name="linkedin:owner" content="mid:12105681"/> <!-- Linkedin Site Verification -->
<!----- Facebook ------->
<link rel="image_src" type="image/jpeg" href="facebook_thumb.jpg" /> <!-- Old & unreliable Facebook Share image method - OpenGraph's og:image works better -->
<meta property="fb:app_id" content="_____" /> <!-- Unique App ID that identifies your domain to Facebook.-->
<meta property="fb:page_id" content="____" /> <!-- Unique Page ID that identifies your domain to Facebook.-->
<meta property="fb:admins" content="570792107"/> <!-- User ID for extra data available via Facebook Insights -->
<meta property="article:author" content="________________" /> <!-- Author's personal Facebook page -->
<meta property="article:publisher" content="________________" /> <!-- Publisher's Facebook page -->
<!----- Twitter ------->
<meta name="twitter:site" data-page-subject="true" content="________________" /> <!-- Author's Twitter Handle -->
<meta name="twitter:creator" data-page-subject="true" content="________________" /> <!-- Publisher's Twitter Handle -->
<meta name="twitter:url" data-page-subject="true" content="http://_______.com/" /> <!-- Page URL -->
<meta name="date" content="2013-08-16 03:15:25 UTC" data-page-subject="true" /> <!-- Time/Date stamp -->
<!----- Twitter Cards - https://dev.twitter.com/docs/cards ------->
<!-- Summary card - https://dev.twitter.com/docs/cards/types/summary-card -->
<meta name="twitter:card" content="summary"> <!-- Summary card with small image" -->
<meta name="twitter:site" content="@j_holtslander"> <!-- Author's Twitter Handle -->
<meta name="twitter:creator" content="@j_holtslander"> <!-- Publisher's Twitter Handle -->
<meta name="twitter:title" data-page-subject="true" content="______" > <!-- eg: Amazing thing to watch [VIDEO] (70 characters max.)-->
<meta name="twitter:description" data-page-subject="true" content="______"/> <!-- (200 characters max.) -->
<meta name="twitter:image" data-page-subject="true" content="path/image.jpg" /> <!-- Square image under 1MB (Images larger than 120x120px will be resized and cropped square based on longest dimension. Images smaller than 60x60px will not be shown -->
<!-- Large Image Summary Card - https://dev.twitter.com/docs/cards/large-image-summary-card -->
<meta name="twitter:card" content="summary_large_image"> <!-- Summary card with large image -->
<meta name="twitter:site" content="________________"> <!-- Author's Twitter Handle -->
<meta name="twitter:creator" content="________________"> <!-- Publisher's Twitter Handle -->
<meta name="twitter:title" data-page-subject="true" content="________________" > <!-- eg: Amazing thing to watch [VIDEO] (70 characters max.)-->
<meta name="twitter:description" data-page-subject="true" content="________________"/> <!-- (200 characters max.) -->
<meta name="twitter:image" data-page-subject="true" content="path/image.jpg" /> <!-- A 560x315 image works well. Minimum 280x150. Under 1MB size -->
<meta content="560" data-page-subject="true" name="twitter:image:width"> <!-- Width of above image -->
<meta content="315" data-page-subject="true" name="twitter:image:height"> <!-- Height of above image -->
<!-- Photo Card - https://dev.twitter.com/docs/cards/types/photo-card -->
<meta name="twitter:card" content="photo"> <!-- Summary card with a big important image" -->
<meta name="twitter:site" content="________________">
<meta name="twitter:creator" content="________________">
<meta name="twitter:title" content="________________"> <!-- Title of photo - You may specify an empty string if you wish no title to render -->
<meta name="twitter:image" content="path/image.jpg">
<meta name="twitter:image:width" content="560"> <!-- Maximum size 560px for Retina -->
<meta name="twitter:image:height" content="750"> <!-- Maximum size 750px for Retina -->
<!-- Gallery Card - https://dev.twitter.com/docs/cards/types/gallery-card -->
<meta name="twitter:card" content="gallery"> <!-- Summary card with a gallery of 4 small images" -->
<meta name="twitter:site" content="________________">
<meta name="twitter:creator" content="@hackweek">
<meta name="twitter:title" content="________________"> <!-- Title of gallery - You may specify an empty string if you wish no title to render -->
<meta name="twitter:description" content="________________"> <!-- (200 characters max.) -->
<meta name="twitter:image0" content="________________">
<meta name="twitter:image1" content="________________">
<meta name="twitter:image2" content="________________">
<meta name="twitter:image3" content="________________">
<!-- App Card - https://dev.twitter.com/docs/cards/types/app-card -->
<meta name="twitter:card" content="app"> <!-- Summary card for an app store item" -->
<meta name="twitter:description" content="The perfect app for ________. Try it by downloading today."> <!-- (200 characters max.) -->
<meta name="twitter:app:name:iphone" content="Example App">
<meta name="twitter:app:id:iphone" content="306934135">
<meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef">
<meta name="twitter:app:id:iphone" content="id358801284">
<meta name="twitter:app:name:ipad" content="Example App">
<meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef">
<meta name="twitter:app:id:googleplay" content="com.example.app">
<meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef">
<meta name="twitter:app:country" content="CA"> <!-- If not available in the US App Store, you must set this value to the two-letter country code for the App Store that contains your application. -->
<!-- Product Card - https://dev.twitter.com/docs/cards/types/product-card -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="devignmag"> <!-- Product Site's Twitter Handle -->
<meta name="twitter:creator" content="j_holtslander"> <!-- Author's Twitter Handle -->
<meta name="twitter:title" content="Logo Mug"> <!-- Product name -->
<meta name="twitter:description" content="________"> <!-- (200 characters max.) -->
<meta name="twitter:image" content="path/image.jpg"> <!-- Product image -->
<meta name="twitter:image:src" content="path/image.jpg"> <!-- Product image -->
<meta name="twitter:image:width" data-page-subject="true" content="450"> <!-- Width of above image -->
<meta name="twitter:image:height" data-page-subject="true" content="350"> <!-- Height of above image -->
<meta name="twitter:data1" content="$3.00"> <!-- Data field 1 -->
<meta name="twitter:label1" content="Price"> <!-- Data field 1's label -->
<meta name="twitter:data2" content="Black"> <!-- Data field 2 -->
<meta name="twitter:label2" content="Color"> <!-- Data field 2's label -->
<!-- Video Card - https://dev.twitter.com/docs/cards/types/player-card -->
<!-- Not included/ Limited availability -->
<!----- Pinterest ------->
<meta property="og:price:amount" content="0.00" /><!-- Pinterest - No currency sign -->
<meta property="og:price:currency" content="USD" /><!-- Pinterest -->
<meta property="og:brand" content="Toyota" /><!-- Pinterest - eg: Lucky Brand -->
<meta property="og:upc" content="726534765" /><!-- Pinterest - UPC Code. -->
<meta property="og:isbn" content="726534765" /><!-- Pinterest - ISBN Code. -->
<meta property="og:availability" content="instock" /><!-- Pinterest - Use "instock", "preorder", "backorder", "out of stock", or "discontinued" -->
<!----- Readability ------->
<meta name="readability-verification" content="___________________">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<style type="text/css">
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}
body {background-image:url("");}
img {border:solid 1px #00FFFF; background-image:url("spinner.gif"); background-repeat:no-repeat; background-position:10px 10px; }
</style>
</head>
<body>
<p style="color:#000;">test</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment