5
HTML meta tags cheatsheet
source link: https://devhints.io/html-meta
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
HTML meta tags cheatsheet
Meta tags
<meta charset='utf-8'>
<!-- title -->
<title>···</title>
<meta property='og:title' content='···'>
<meta name='twitter:title' content='···'>
<!-- url -->
<link rel='canonical' href='http://···'>
<meta property='og:url' content='http://···'>
<meta name='twitter:url' content='http://···'>
<!-- description -->
<meta name='description' content='···'>
<meta property='og:description' content='···'>
<meta name='twitter:description' content='···'>
<!-- image -->
<meta property="og:image" content="http://···">
<meta name="twitter:image" content="http://···">
<!-- ua -->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<!-- viewport -->
<meta name='viewport' content='width=device-width'>
<meta name='viewport' content='width=1024'>
More opengraph
<meta property='og:site_name' content='···'>
<meta property='og:type' content='website'>
<meta property='fb:app_id' content='···'>
<meta property='fb:admins' content='UID1,UID2'>
<!-- ···unless there's app_id -->
<meta property='og:audio' content='http://···/theme.mp3'>
<meta property='og:video' content='http://···/trailer.swf'>
See: OpenGraph protocol (developers.facebook.com)
Opengraph for articles
article:published_time
article:modified_time
article:expiration_time
article:author
article:section
article:tag
Apple-only
<meta name='format-detection' content='telephone=no'>
#Progressive web apps
Add to homescreen
<meta name='mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<!-- black | black-translucent | default -->
Theme color
<meta name='theme-color' content='#ff00ff'>
Android-only. See: Theme color
Manifest
<link rel='manifest' href='/manifest.json'>
Android-only. See: Manifest
Icons
<!-- Minimal -->
<link rel='icon' type='image/png' href='[email protected]'>
<link rel='icon' sizes='192x192' href='[email protected]'>
<link rel='apple-touch-icon' href='[email protected]'>
<meta name='msapplication-square310x310logo' content='[email protected]'>
<!-- Apple -->
<link rel='apple-touch-icon' href='touch-icon-iphone.png'>
<link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'>
<link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'>
<link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'>
<!-- Microsoft -->
<meta name='msapplication-square70x70logo' content='icon_smalltile.png'>
<meta name='msapplication-square150x150logo' content='icon_mediumtile.png'>
<meta name='msapplication-wide310x150logo' content='icon_widetile.png'>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK