Header Blog Valid Schema.Org Dan Html5

Makin kesini semakin jarang buat artikel wacana tutorial blog, mumpung Saya ada waktu maka kali Saya akan buat tutorial cara menciptakan header blog valid schema.org dan HTML5 :D . Selain valid schema.org dan HTML5 header blog ini juga sangat manis dan SEO.

Bagaimana cara pemasangannya ? silakan ikuti cara yang akan Saya paparkan berikut ini :

1. Silakan cari isyarat di bawah ini atau yang menyerupai mirip isyarat dibawah. Jika masih kesulitan silakan pilih sajian Lompat ke Widget > Pilih Header1.

<b:widget id='Header1' locked='true' title=' (Header)' type='Header'> ... </b:widget>

2. Lalu ganti isyarat yang diatas dengan isyarat dibawah ini.

<b:widget id='Header1' locked='true' title=' (Header)' type='Header'>       <b:includable id='main'>   <b:if cond='data:useImage'>     <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>       <!--       Show image as background to text. You can't really calculate the width       reliably in JS because margins are not taken into account by any of       clientWidth, offsetWidth or scrollWidth, so we don't force a minimum       width if the user is using shrink to fit.       This results in a margin-width's worth of pixels being cropped. If the       user is not using shrink to fit then we expand the header.       -->       <b:if cond='data:mobile'>           <div id='header-inner'>             <div class='titlewrapper' style='background: transparent'>               <h1 class='title' style='background: transparent; border-width: 0px'>                 <b:include name='title'/>               </h1>             </div>             <b:include name='description'/>           </div>         <b:else/>           <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>             <div class='titlewrapper' style='background: transparent'>               <h1 class='title' style='background: transparent; border-width: 0px'>                 <b:include name='title'/>               </h1>             </div>             <b:include name='description'/>           </div>         </b:if>     <b:else/>       <!--Show the image only-->       <div id='header-inner'>         <b:if cond='data:blog.pageType != &quot;item&quot;'>           <b:if cond='data:blog.pageType != &quot;static_page&quot;'>             <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>             <div style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='description'/></div>           </b:if>         </b:if>         <a expr:href='data:blog.homepageUrl' style='display: block'>           <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:title' itemprop='image' style='display: block'/>         </a>         <!--Show the description-->         <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>           <b:include name='description'/>           <b:if cond='data:blog.pageType != &quot;item&quot;'>             <b:if cond='data:blog.pageType != &quot;static_page&quot;'>                <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>                 <div style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='description'/></div>             </b:if>           </b:if>         </b:if>       </div>     </b:if>   <b:else/>     <!--No header image -->     <div id='header-inner'>       <div class='titlewrapper'>               <b:if cond='data:blog.pageType != &quot;item&quot;'>           <b:if cond='data:blog.pageType == &quot;static_page&quot;'>              <h1 class='title'><b:include name='title'/></h1>            <b:else/>              <h1 class='title'><b:include name='title'/></h1>            </b:if>         <b:else/>           <h2 class='title'><b:include name='title'/></h2>         </b:if>         <b:include name='description'/>       </div>     </div>   </b:if> </b:includable>       <b:includable id='description'>   <div class='descriptionwrapper'>     <p class='description' itemprop='description'><span><data:description/></span></p>   </div> </b:includable>       <b:includable id='title'>     <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'><data:title/></span></a> </b:includable>     </b:widget>

3. Selesai :D

Sekarang tinggal Anda cek di https://developers.google.com/structured-data/testing-tool/. Bagaimana balasannya keren bukan, apalagi jika stuktur templatenya sudah menggunakan struktur yang disarankan oleh google niscaya lebih keren menyerupai template buatan Saya Sang SEO :). Nih hasilnya

Struktur header ini sangat disarankan alasannya ialah manis untuk memudahkan robot google menjelajahi blog kita. Itulah tutorial singkat yang sanggup Saya berikan, supaya bermanfaat ya :D
Sumber http://kang-mousir.blogspot.com

Artikel Terkait

Header Blog Valid Schema.Org Dan Html5

4/ 5

Oleh Admin