Memasang Meta Viewport Pada Blogspot

SEO Blogspot – Membahas responsive memang agak panjang lebar, dan perlu di pelajari satu persatu. untuk itu kali ini saya akan berbagi tentang kegunaan menggunakan meta tag viewport dalam responsive.

Memasang Meta TagViewport Pada Blogspot

Dalam Responsive Meta Tag Viewport sangat penting karena meta tag ini berguna untuk menentukan tata letak tampilan Mobile. ketika blog kita di akses lewat Browser Desktop Meta Tag ini tidak memiliki fungsi, namun ketika blog kita di akses atau di buka via Mobile Browser barulah si viewport ini bekerja. 
Dibawah ini merupakan meta tag viewport yang paling sering digunakan oleh para blogger.

</em>
<table style=”border-collapse: collapse; width: 90.6509%;”>
<tbody>
<tr>
<td style=”width: 100%;”></td>
</tr>
</tbody>
</table>
<em>


Tampilan dari blog yang tidak memiliki atau memasang skala yang perlu ditentukan akan terlihat berantakan jika diakses pada versi mobile, untuk itulah meta ini berguna dan pemecahan masalahnya. 

Untuk lebih jelas pada bahasan Meta Tag viewport kita bisa lihat contoh di bawah ini perbedaan menggunakan meta tag viewport dan tidaknya

Baca Juga : Cara Memasang Meta Tag Generator Tool di Blogspot

meta viewport

berikut ini cara sederhana menerapkan meta tag viewport dan media queries. 
contoh ini adalah tampilan menggunakan pengkodean versi HTML5.

<em>/* pemasangan meta viewport */</em>

&nbsp;

&nbsp;

<style type=’text/css’></em></p>
<p><em>/* CSS Template */</em></p>
<p><em>body {</em></p>
<p><em>…nilai css page body…</em></p>
<p><em>}</em></p>
<p><em>/* CSS MEDIA QUERy */</em></p>
<p><em>@media screen and (max-width: 1024px){</em></p>
<p><em>/* CSS styles */</em></p>
<p><em>}</em></p>
<p><em>@media screen and (max-width:768px){</em></p>
<p><em>/* CSS styles */</em></p>
<p><em>}</em></p>
<p><em>@media screen and (max-width:600px){</em></p>
<p><em>/* CSS styles */</em></p>
<p><em>}</em></p>
<p><em>@media screen and (max-width:480px){</em></p>
<p><em>/* CSS styles */</em></p>
<p><em>}</em></p>
<p><em>@media screen and (max-width:320px){</em></p>
<p><em>/* CSS styles */</em></p>
<p><em>}</em></p>
<p><em>@media screen and (max-width:240px){</em></p>
<p><em>/* CSS styles */</em></p>
<p><em>}</em></p>
<p><em></style>

&nbsp;

&nbsp;

<em>…isi blog…</em>

 

 

Jika sobat ingin desain template blognya bisa tampil sempurna bisa memasang semua resolusi dalam media queries di contoh di atas, resolusi yang paling baik yang akan di tentukan dalam resolusi responsive Web Desain pada perangkat Mobile adalah pada resolusi 768px.
setiap penerapan media queries akan terlihat jelas jika anda mengecilkan ukuran browser anda ketika halaman sudah di muat untuk melihat apakah sudah sesuai atau belum.

Sekian semoga bermanfaat untuk meningkatkan SEO pada Blogspot yang seyogyanya dapat meningkat performa situs web Anda di mesin pencari dan mengantarkan situs web Anda meraih posisi terbaik diantara pesaing-pesaing situs web lainnya untuk berada dihalaman teratas dihasil mesin pencari Google dari setiap kata kunci yang Anda target untuk situs web Anda.

Kesimpulan

Apapun itu selagi berhubungan dengan performa suatu situs web harus selalu di perbarui secara berkala dan tidak ada yang bisa permanen tapi selalu ada pembaruan seiring perkembangan teknologi dan persaingan di mesin pencari yang tidak akan pernah ada habisnya.