Skip to content

Instantly share code, notes, and snippets.

@Makio64

Makio64/Technical specification

Last active September 4, 2017 10:43
Show Gist options
  • Save Makio64/550f523956d942e8f9456c2f27c79f8d to your computer and use it in GitHub Desktop.
Save Makio64/550f523956d942e8f9456c2f27c79f8d to your computer and use it in GitHub Desktop.
Download ZIP
meta simple step
Raw
code in your html <head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!--  FACEBOOK -->
<meta property="fb:app_id" content="YOUR_APP_ID"/>
<meta property="og:site_name" content="YOUR_SITE_NAME"/>
<meta property="og:title" content="TITLE_OF_THE_PAGE" />
<meta property="og:description" content="DESCRIPTION_OF_THE_PAGE" />
<meta property="og:image" content="http://your/complete/url/facebook.jpg" />
<meta property="og:url" content="http://your/complete/url" />
<!--  TWITTER -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="YOUR_SITE_NAME"/>
<meta name="twitter:creator" content="@YOUR_TWITTER_ACCOUNT" />
<meta name="twitter:title" content="YOUR_PAGE_NAME" />
<meta name="twitter:description" content="YOUR_DESCRIPTION" />
<meta name="twitter:image" content="http://your/complete/url/twitter.jpg" />
<title>YOUR_PAGE_NAME</title>
<meta property="description" content="YOUR_DESCRIPTION"/>
<link rel="stylesheet" type="text/css" href="./css/main.css">
<!-- ICON -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0e6078">
<meta name="theme-color" content="#ffffff">
</head>
Raw
Technical specification
facebook.jpg : 1200x630
twitter.jpg : 512x512
generate icons : https://realfavicongenerator.net/
facebook validator : https://developers.facebook.com/tools/debug/
twitter validator : https://cards-dev.twitter.com/validator
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment