How to Create HTML5 all-head-content Custom Blogger Code
Blogger <b:include data='blog' name='all-head-content'/> is a short line of code but contains several important codes internally that relate to search engines such as the XML sitemap and meta tags that are automatically managed by Blogger.
Usually the all-head-content code is placed under the blog title tag. If you follow the posts about how to create a custom blogger theme from the base, then you will find the all-head-content code more clearly and can also know what code is generated from the all-head-content code.
Blogger's all-head-content looks like this:
<b:include data='blog' name='all-head-content'/>
And if extracted, the code contents like this.
<b:includable id='all-head-content'>
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>
<b:if cond='data:widgets'>
<b:comment>Chrome, Firefox OS and Opera</b:comment>
<meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>
<b:comment>Windows Phone</b:comment>
<meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
</b:if>
<data:blog.latencyHeadScript/>
<data:blog.mobileHeadScript/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<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/>
<b:tag name='link' cond='data:blog.googleProfileUrl' rel='publisher' expr:href='data:blog.googleProfileUrl'/>
<b:tag name='link' cond='data:view.featuredImage' expr:href='data:view.featuredImage' rel='image_src'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:include name='openGraphMetaData'/>
<data:blog.ieCssRetrofitLinks/>
<!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->
</b:includable>
The codes above only apply to certain HTML versions of Blogger, such as only those that apply to version 3 or to versions 1 or 2.
In version 1 of Blogger HTML, the all-head-content code generates the following code as an example:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link href='https://blogger.theinfiniteinfo.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://blogger.theinfiniteinfo.com/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Membuat Blog - Atom" href="https://blogger.theinfiniteinfo.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Membuat Blog - RSS" href="https://blogger.theinfiniteinfo.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="The Infinite Info Blog - Atom" href="https://www.blogger.com/feeds/953683082603921419/posts/default" />
<link rel="me" href="https://www.blogger.com/profile/10624324989863141903" />
<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->
<meta content='https://blogger.theinfiniteinfo.com/' property='og:url'/>
<meta content='HTML5 all-head-content Custom Blogger Code' property='og:title'/>
<meta content='How to create valid HTML5 all-head-content Custom Blogger Code' property='og:description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
OR something like this:
But if you are trying to make your blog theme valid HTML5, some of the code above turns out to be an HTML5 validation error.
For some reason until now Blogger has not made the code valid HTML5. The codes with HTML5 validation errors are the codes below.
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
And
<link rel="service.post" type="application/atom+xml" title="The Infinite Info Blogger - Atom" href="https://www.blogger.com/feeds/953683082603921419/posts/default" />
For this reason, so that the HTML5 all-head-content code is valid, the all-head-content code is as follows.
Please replace with the following valid HTML5 Blogger all-head-content code. And in this code there are additional Facebook open graph and also a Twitter Card:
<meta charset='utf-8'/>
<!-- Chrome, Firefox OS and Opera -->
<meta content='#2B0C93' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#2B0C93' name='msapplication-navbutton-color'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.canonicalHomepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link href='https://cdn.staticaly.com/img/3.bp.blogspot.com/-neRXGiMMl78/VwNf50cBEwI/AAAAAAAAmGk/jvUDozATUdU2fyPTXIc1fRjLdRLIpQQeA/s32/favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='https://cdn.staticaly.com/img/4.bp.blogspot.com/-_fuRWmsvvhw/VwNgCd9RvqI/AAAAAAAAmGo/IFhwNoh-_OIEsUORb-ie9gauR5HQgKAhQ/s192/android-icon-192x192.png' rel='icon' sizes='192x192'/>
<link href='https://cdn.staticaly.com/img/2.bp.blogspot.com/-Ahu-Rk5-2pU/VwNgIz2ruDI/AAAAAAAAmGs/lt_weAllC2ArCyVu09nB7Gms_HUqJIeUw/s180/apple-icon-180x180.png' rel='apple-touch-icon'/>
<meta content='https://cdn.staticaly.com/img/2.bp.blogspot.com/-9y27HsKCpyc/VwNgnWg1DlI/AAAAAAAAmG0/3Vl1JcjOBGoPAcMCqKIDDaMg53UffCMDg/s144/ms-icon-144x144.png' name='msapplication-TileImage'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default"' expr:title='data:blog.title + "- Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + "- RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + "- Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/" + data:blog.postId + "/comments/default"' expr:title='data:blog.title + "- Atom"' rel='alternate' type='application/atom+xml'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:blog.meTag/>
</b:if>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.canonicalHomepageUrl' rel='openid.delegate'/>
<link href='https://cdn.jsdelivr.net/gh/blogger-dyah/ka@master/v8/manifest.json' rel='manifest'/>
<link expr:href='data:blog.canonicalUrl' hreflang='x-default' rel='alternate'/>
<b:if cond='data:view.isArchive'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName.escaped' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi postingan " + data:blog.pageName.escaped + " untuk membaca artikel selengkapnya dengan klik link di atas."' name='description'/>
<meta expr:content='"Silahkan kunjungi postingan " + data:blog.pageName.escaped + " untuk membaca artikel selengkapnya dengan klik link di atas."' property='og:description'/>
<meta expr:content='"Silahkan kunjungi postingan " + data:blog.pageName.escaped + " untuk membaca artikel selengkapnya dengan klik link di atas."' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title.escaped' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='"HTML5 all-head-content Custom Blogger Code " + data:blog.pageTitle.escaped + " How to create valid HTML5 all-head-content Custom Blogger Code"' name='description'/>
<meta expr:content='"HTML5 all-head-content Custom Blogger Code " + data:blog.pageTitle.escaped + " How to create valid HTML5 all-head-content Custom Blogger Code"' property='og:description'/>
<meta expr:content='"HTML5 all-head-content Custom Blogger Code " + data:blog.pageTitle.escaped + " How to create valid HTML5 all-head-content Custom Blogger Code"' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType in {"static_page"}'>
<meta expr:content='data:blog.pageName.escaped' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='"HTML5 all-head-content Custom Blogger Code " + data:blog.pageTitle.escaped + " How to create valid HTML5 all-head-content Custom Blogger Code"' name='description'/>
<meta expr:content='"HTML5 all-head-content Custom Blogger Code" + data:blog.pageTitle.escaped + " How to create valid HTML5 all-head-content Custom Blogger Code"' property='og:description'/>
<meta expr:content='"HTML5 all-head-content Custom Blogger Code " + data:blog.pageTitle.escaped + " How to create valid HTML5 all-head-content Custom Blogger Code"' name='twitter:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl,1200,"1200:630")' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<b:if cond='data:blog.firstImageUrl'>
<meta expr:content='resizeImage(data:blog.firstImageUrl,1200,"1200:630")' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='resizeImage(data:blog.postImageThumbnailUrl,1200,"1200:630")' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<meta content='https://cdn.staticaly.com/img/3.bp.blogspot.com/-ccUYbxIIDvM/VqSSu92MnZI/AAAAAAAAksc/HExcuDOoKIQ/s300/logo.png' property='og:image'/>
<meta expr:content='data:blog.title.escaped' property='og:image:alt'/>
<meta content='158' property='og:image:width'/>
<meta content='158' property='og:image:height'/>
</b:if>
</b:if>
</b:if>
<meta content='xxxxxxxxxxxxxx' property='fb:app_id'/>
<meta content='xxxxxxxxxxxxxx'' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxx'' property='fb:profile_id'/>
<meta content='xxxxxxxxxxxxxx'' property='fb:pages'/>
<meta content='Your Name' name='Author'/>
<meta content='https://www.facebook.com/xxxxxxxxxxxxxx' property='article:author'/>
<meta expr:content='data:blog.title.escaped' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@xxxxxxxxxxxxxx' name='twitter:creator'/>
Now make modifications to the codes in orange color above And adjust the code marked xxxxxxxxxxxxxx for the purposes of sharing to Facebook and Twitter.
No comments:
Post a Comment