Hello anh em, tiếp tục với chuyên mục tỉ năm mới có bài hay thì hôm nay mình sẽ chia sẻ cho anh em những Thẻ Meta HTML gần như là mới nhất hiện nay được lấy ở bên Github. Anh em tham khảo thì đừng gạch đá gì nhé !!
Thẻ Meta OpenGraph
<meta name="og:title" content="The Rock"/> <meta name="og:type" content="movie"/> <meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/> <meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta name="og:site_name" content="IMDb"/> <meta name="og:description" content="A group of U.S. Marines, under command of..."/> <meta name="fb:page_id" content="43929265776" /> <meta name="og:email" content="[email protected]"/> <meta name="og:phone_number" content="650-123-4567"/> <meta name="og:fax_number" content="+1-415-123-4567"/> <meta name="og:latitude" content="37.416343"/> <meta name="og:longitude" content="-122.153013"/> <meta name="og:street-address" content="1601 S California Ave"/> <meta name="og:locality" content="Palo Alto"/> <meta name="og:region" content="CA"/> <meta name="og:postal-code" content="94304"/> <meta name="og:country-name" content="USA"/> <meta property="og:type" content="game.achievement"/> <meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/> <meta property="og:video" content="http://example.com/awesome.swf" /> <meta property="og:video:height" content="640" /> <meta property="og:video:width" content="385" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video" content="http://example.com/html5.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video" content="http://example.com/fallback.vid" /> <meta property="og:video:type" content="text/html" /> <meta property="og:audio" content="http://example.com/amazing.mp3" /> <meta property="og:audio:title" content="Amazing Song" /> <meta property="og:audio:artist" content="Amazing Band" /> <meta property="og:audio:album" content="Amazing Album" /> <meta property="og:audio:type" content="application/mp3" />
Thẻ Meta Tùy Chỉnh
Sử dụng thẻ meta tuỳ chỉnh để lưu trữ dữ liệu mà bạn cần trong Javascript, thay vì mã hóa cứng mà dữ liệu vào Javascript của bạn. Dưới đây là một số ví dụ:
<meta name="google-analytics" content="1-AHFKALJ"/> <meta name="disqus" content="abcdefg"/> <meta name="uservoice" content="asdfasdf"/> <meta name="mixpanel" content="asdfasdf"/>
Thẻ Meta Dịch Vụ
ClaimID
<meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" />
Thẻ Meta Apple
<meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">
Internet Explorer Meta Tags
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" /> <meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" /> <meta name="mssmarttagspreventparsing" content="true"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="msapplication-starturl" content="http://blog.reybango.com/about/"/> <meta name="msapplication-window" content="width=800;height=600"/> <meta name="msapplication-navbutton-color" content="red"/> <meta name="application-name" content="Rey Bango Front-end Developer"/> <meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/> <meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" /> <meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" /> <meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" /> <meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" /> <link rel="shortcut icon" href="/images/favicon.ico" />
Thẻ Meta TweetMeme
<meta name="tweetmeme-title" content="Retweet Button Explained" />
Thẻ Meta Danh Mục Blog
<meta name="blogcatalog" />
Rails Meta Tags
<meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/>
Apple Tags
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name= "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no"> <meta name= "viewport" content = "width = device-width"> <meta name = "viewport" content = "initial-scale = 1.0"> <meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no"> <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" /> <link rel="apple-touch-startup-image" href="/startup.png"> <link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png" />
Thẻ HTML Link
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/martini" /> <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <link rel="fluid-icon" type="image/png" href="/fluid-icon.png" /> <link rel="me" type="text/html" href="http://google.com/profiles/thenextweb"/> <link rel='shortlink' href='http://blog.unto.net/?p=353' /> <link rel='archives' title='May 2003' href='http://blog.unto.net/2003/05/' /> <link rel='index' title='DeWitt Clinton' href='http://blog.unto.net/' /> <link rel='start' title='Pattern Recognition 1' href='http://blog.unto.net/photos/pattern_recognition_1_about/' /> <link rel='prev' title='OpenSearch and OpenID? A sure way to get my attention.' href='http://blog.unto.net/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/' /> <link rel='next' title='Not blog' href='http://blog.unto.net/meta/not-blog/' /> <link rel="search" href="/search.xml" type="application/opensearchdescription+xml" title="Viatropos" /> <link rel="self" type="application/atom+xml" href="http://www.syfyportal.com/atomFeed.php?page=3"/> <link rel="first" href="http://www.syfyportal.com/atomFeed.php"/> <link rel="next" href="http://www.syfyportal.com/atomFeed.php?page=4"/> <link rel="previous" href="http://www.syfyportal.com/atomFeed.php?page=2"/> <link rel="last" href="http://www.syfyportal.com/atomFeed.php?page=147"/> <link rel='shortlink' href='http://smallbiztrends.com/?p=43625' /> <link rel="canonical" href="http://smallbiztrends.com/2010/06/9-things-to-do-before-entering-social-media.html" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://smallbiztrends.com/xmlrpc.php?rsd" /> <link rel="pingback" href="http://smallbiztrends.com/xmlrpc.php" /> <link media="only screen and (max-device-width: 480px)" href="http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />
Bộ Meta chuẩn SEO 2021
<meta charset='UTF-8' />
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport' />
<title>
<data:view.title.escaped />
</title>
<link href='//1.bp.blogspot.com' rel='dns-prefetch' />
<link href='//2.bp.blogspot.com' rel='dns-prefetch' />
<link href='//3.bp.blogspot.com' rel='dns-prefetch' />
<link href='//4.bp.blogspot.com' rel='dns-prefetch' />
<link href='//www.blogger.com' rel='dns-prefetch' />
<link href='//dnjs.cloudflare.com' rel='dns-prefetch' />
<link href='//fonts.gstatic.com' rel='dns-prefetch' />
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch' />
<link href='//www.googletagmanager.com' rel='dns-prefetch' />
<link href='//www.google-analytics.com' rel='dns-prefetch' />
<link href='//connect.facebook.net' rel='dns-prefetch' />
<link href='//c.disquscdn.com' rel='dns-prefetch' />
<link href='//disqus.com' rel='dns-prefetch' />
<b:include name='theme-head' />
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='theme-head'>
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type' />
<meta content='blogger' name='generator' />
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon' />
<meta expr:content='data:skin.vars.keycolor' name='theme-color' />
<meta expr:content='data:skin.vars.keycolor' name='msapplication-navbutton-color' />
<b:if cond='data:blog.adultContent'>
<meta content='adult' name='rating' />
</b:if>
<link expr:href='data:view.url.canonical' rel='canonical' />
<data:blog.feedLinks />
<data:blog.meTag />
<meta expr:content='data:view.description.escaped' name='description' />
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:href='data:widgets.Blog.first.posts[0].featuredImage' name='link' rel='image_src' />
<b:tag cond='data:view.isSingleItem and data:view.featuredImage' expr:href='data:view.featuredImage' name='link' rel='image_src' />
<b:include name='customOpenGraphMetaData' />
</b:includable>
<b:includable id='customOpenGraphMetaData'>
<b:if cond='data:view.isHomepage'>
<meta content='website' property='og:type' />
</b:if>
<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type' />
</b:if>
<b:if cond='data:view.isMultipleItems and not data:view.isHomepage'>
<meta content='object' property='og:type' />
</b:if>
<meta expr:content='data:view.title.escaped' property='og:title' />
<meta expr:content='data:blog.url.canonical' property='og:url' />
<meta expr:content='data:view.description.escaped' property='og:description' />
<meta expr:content='data:blog.title.escaped' property='og:site_name' />
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:content='data:widgets.Blog.first.posts[0].featuredImage' name='meta' property='og:image' />
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' property='og:image' />
<meta expr:content='data:view.featuredImage' name='twitter:image' />
</b:if>
<meta expr:content='data:blog.url.canonical' name='twitter:site' />
<meta cexpr:content='data:blog.url.canonical' name='twitter:site' />
<meta content='summary' name='twitter:card' />
<meta content='summary_large_image' name='twitter:card' />
<meta expr:content='data:blog.title.escaped' name='twitter:title' />
<meta expr:content='data:blog.url.canonical' name='twitter:domain' />
<meta expr:content='data:view.description.escaped' name='twitter:description' />
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image' />
<meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' name='twitter:image' />
<b:elseif cond='data:widgets' />
<b:loop reverse='true' values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
<meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' name='twitter:image' />
</b:loop>
<b:elseif cond='data:blog.postImageUrl' />
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' name='twitter:image' />
</b:if>
<b:if cond='data:view.isHomepage'>
<script type='application/ld+json'>{"@context":"http://schema.org","@type":"WebSite","name":"<data:view.title.escaped/>","url":"<data:view.url.canonical/>","potentialAction":{"@type":"SearchAction","target":"<data:view.url.canonical/>search?q={search_term_string}","query-input":"required name=search_term_string"}}</script>
</b:if>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
<b:include data='blog' name='google-analytics' />
Nguồn : lancejpollard