Blogger Template Framework Valid HTML5 and Schema.org
Updated on July 14, 2016
Template yang baik adalah template yang valid di segala bagian elemen, baik itu valid HTML5, CSS3, juga Schema.org. Karena dengan validnya sebuah template tersebut maka browser maupun mesin pencari akan lebih mudah untuk mengcrawl ataupun merayapi sebuah blog karena memilki struktur dari template yang baik.
Author: Namina Kiky
Pada kesempatan kali ini Iumari akan memberikan sebuah kerangka template yang sangat direkomendasikan untuk digunakan karena struktur kerangka template ini yang InsyaAllah sudah valid HTML5 dan valid Schema.org.
Kerangka Dasar Template Blog Valid HTML5 dan Schema.org
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Page Not Found | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silahkan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle + "Untuk membaca postingan-postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL Image here' property='og:image'/>
</b:if>
</b:if>
<meta content='kode id fb admin' property='fb:admins'/>
<meta content='kode id profil admin' property='fb:profile_id'/>
<style type="text/css">
<!-- /*<b:skin><![CDATA[
CSS Style Layout Here
*/]]></b:skin>
<style type='text/css'>
CSS Style Skin Blog Here
</style>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
CSS Style Homepage Blog Here
</style>
</b:if></b:if>
</head>
<body expr:class='data:blog.pageType' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<b:if cond='data:blog.pageType == "error_page"'>
<style scoped='scoped' type='text/css'>
CSS Style Error Page Here
</style>
HTML Error Page Here
</b:if>
<b:if cond='data:blog.pageType != "error_page"'>
<div class='content-wrapper'>
<div id='outer-wrapper'>
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader' role='banner'>
<div style='clear:both;'/>
</header>
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url' title='Daftar Isi'><span itemprop='name'>Daftar Isi</span></a></li>
<li class='has-sub'><a href='#' title='About This Blog'><span>About This Blog</span></a>
<ul>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li class='last'><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url' title='Forum'><span itemprop='name'>Forum</span></a></li>
</ul>
</nav>
<main id='main-wrapper' itemprop='mainContentOfPage' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='post' var='post'>
<article class='post hentry' expr:id='data:post.id' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<h3 class='date-header'>
<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
Posted by <span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>
</b:if>
</span>
<span class='clock'> on <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a></span></h3>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</article>
</b:includable>
</b:widget>
</b:section>
</main>
<aside id='sidebar-right' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
</aside>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
</div><!-- end outer-wrapper -->
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
<div class='credit'>
Copyright © 2016. <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - All Rights Reserved<br/>
Template Created by <a href='#' target='_blank'>iumari</a> - Proudly powered by <a href='http://www.blogger.com' target='_blank' title='Blogger'>Blogger</a>
</div>
</footer>
</b:if>
<!--</body>--></body>
</HTML>Silakan salin kode diatas dalam mode edit HTML template kamu, jika ada syntax yang error jangan sungkan untuk memberitahukan kepada saya melalui form komentar di bawah ini. Terima kasih.