KontenWeb: Meta Tags

Penulis
- Oktober 13, 2019
Membuat Thumbnail Image Khusus URL HomePage - Home Page atau halaman beranda website harusnya memiliki thumbnail image sendiri seperti logo website yang sudah di desain khusus untuk menggambarkan keorganisasian website itu sendiri, saya memperhatikan banyak situs-situs blog personal yang tidak memperhatikan ini, jadi ketika pengguna membagikan url homepage situs web mereka ke sosial media, gambar thumbnail yang muncul berasal dari halaman post sehingga seringkali gambar thumbnail tersebut tidak sesuai dengan judul dan deskripsi situs.
Cara Membuat Thumbnail Image Khusus URL HomePage
Maka dari itu sekarang saya akan menjelaskan dan membagikan cara membuat thumbnail image khusus URL HomePage dengan menggunakan sedikit tag meta, mari kita simak dengan seksama.
  1. Siapkan gambar atau logo situs kemudian upload ke host masing-masing, kemudian copy url gambar atau logo yang akan dijadikan thumbnail image url homepage
  2. Khusus untuk pengguna blogger silahkan gunakan url gambar logo header masing-masing.
  3. Jika situs tidak menggunakan logo header, silahkan upload gambar melalui posts editor atau page editor,
  4. Setelah gambar berhasil di upload, klik HTML Mode pada post editor untuk melihat url gambar (logo), agar lebih mudah silahkan Open image in new tab untuk melihat url gambar kemudian Copy URL
  5. Setelah URL gambar di dapatkan (di copy), boleh menghapus gambar logo yang ada di post editor, kemudian
  6. Masuk ke HTML Template dan tambahkan kode atau tag meta berikut ini tepat sebelum atau di atas kode </head>.
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='url_image_here/logo.png' property='og:image'/>
</b:if>[/code]
Secara lengkap meta tags yang mengatur thumbnail image, baik hompage maupun postpage adalah sebagai berikut;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB_6fSVonxOE5iAJZ2iG1caH0kx5E3djvtVyCTCJI7gEzhKR54ydKSdm-cYGUMMGCBYYVNkGXFVq9sUsFb7nTPA_osIl8zgHpVFpC4_KHtS5us4aUef35ma28fBdFvtZRwu5WV4HtjNKk/' property='og:image'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<b:elseif cond='data:blog.postImageThumbnailUrl'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
</b:if>[/code]
Cara ini bisa juga digunakan untuk memperbaiki logo website yang tidak muncul di sosial media. Sekarang cobalah sendiri, jika anda ingin melihat apakah tutorial ini benar-benar bekerja dengan baik, silahkan share url situs blog Gigi Pages ke sosial media anda.

Penulis
- Oktober 13, 2019
Meta Tag Hreflang Dan Cara Penerapannya - Tag hreflang merupakan penanda bahasa yang digunakan pada halaman website, Tag hreflang berfungsi untuk memberikan perintah atau akses kepada perayap atau crawler untuk menerjemahkan bahasa utama situs ke bahasa tertentu.

Kamu mungkin pernah mengunjungi situs web yang menggunakan lebih dari satu bahasa dan uniknya konten atau halaman situs dapat ditelusuri dengan kata kunci yang menggunakan bahasa yang berbeda seperti artikel bantuan google misalnya yang dapat ditelusuri dengan bahasa yang berbeda seperti terlihat pada contoh berikut;
Ketika di telusuri dengan kata kunci dalam bahasa inggris misalnya; seo starter guide, konten yang ditampilkan dilaman hasil penelusuran juga menggunakan bahasa inggris (judul dan deskripsi, dll), begitu juga ketika konten ditelusuri dalam bahasa indonesia.

Untuk melakukan itu sebenarnya tidak cukup hanya dengan menambahkan hreflang tags saja, dibutuhkan suntikan teknologi yang dapat menterjemahkan halaman.

Manfaat tag hreflang itu sendiri adalah sebagai optimasi seo, lebih spesifik lagi untuk memberitahukan bahasa yang digunakan halaman situs kepada perayap, seperti yang telah dijelaskan diatas.

Cara Memasang Tag hreflang

Kode hreflang tags biasanya ditempatkan pada area header html situs "dianta tag <head> dan </head>, secara default pemasangan tag hreflang adalah seperti dibawah ini;
[code type="Tags"]<head>
<link href='http://en-gb.example.com/page.html' hreflang='en-gb' rel='alternate'/>
<link href='http://en-us.example.com/page.html' hreflang='en-us' rel='alternate'/>
<link href='http://en.example.com/page.html' hreflang='en' rel='alternate'/>
<link href='http://de.example.com/page.html' hreflang='de' rel='alternate'/>
<link href='http://www.example.com/' hreflang='x-default' rel='alternate'/>
</head>[/code]
Penerapan tag hreflang diatas hanya berupa contoh saja, jika kamu pengguna blogger, maka penerapan meta tag hreflang harus dikombinasikan meta-data situs seperti contoh berikut.

Tag Hreflang Blogger

[code type="Tags"]<link expr:href='data:blog.url' hreflang='en-gb' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en-us' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='en' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='de' rel='alternate'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>[/code]
Simpan atau tempatkan hreflang tags tersebut dibawah kode <head> pada html situs web, jika ingin menggunakan lebih banyak tag hreflang silahkan tambahkan baris tag hreflang dengan kode bahasa tujuan berbasis ISO 639-1 pelajari standard kode bahasa berdasarkan lokasi [Buka Tautan]

Pertanyaan seputar tag hreflang

Apa fungsi tag hreflang='x-default' ? Jawab: tag hreflang='x-default' berfungsi untuk memerintahkan mesin penelusur untuk menampilkan bahasa asli (default) website ketika robot crawl tidak menemukan tag hreflang yang cocok untuk target negara tertentu.

Apakah situs berbahasa indonesia harus menggunakan tag hreflang='id-id'? Jawab: Tidak ada penggunaan hreflang='id-id', Tag hreflang untuk situs lokal atau regional sudah diwakili dengan tag hreflang='x-default', kode tag hreflang tersebut bertujuan untuk meminta perayap agar tidak menerjemahkan halaman dan menampilkannya secara default.

Tag hreflang seperti apa yang banyak digunakan oleh situs web "blogger"? Jawab: Belum dilakukan survey secara luas, namun menurut admind tag hreflang yang paling banyak digunakan adalah seperti contoh diatas atau hanya sebaris ini;
[code type="Tags"]<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>[/code]
Situs web yang hanya menggunakan sebaris tag hreflang='x-default' tidak akan diterjemahkan (ditampilkan dan di baca dalam bahasa asli atau default). Namun harus diketahui bahwa tidak semua mesin penelusur support dengan hreflang='x-default', Mesin telusur tertentu seperti Bing contoh-nya tidak mendukung anotasi rel = "alternate" hreflang = "x".

Situs ini hanya menggunakan sebaris tag hreflang='x-default' saja karena menurut salah satu sumber tag tag hreflang pernah mengalami sedikit masalah, sehingga kami memilih untuk tidak menerjemahkan situs dengan memasang sebaris tag hreflang='x-default' saja meskipun sekarang google telah memperbaiki gangguan kecil tersebut.

Demikian penjelasan mengenai "meta tag hreflang dan cara penerapannya", semoga artikel ini dapat membantu dan menambah ilmu bagi kita semua, sampai jumpa kembali.

Penulis
- Oktober 13, 2019
Meta Tag Keyword Blogger - Dalam dunia blogger penggunaan meta tag keywords masih menjadi alternatif yang populer untuk optimasi seo. Meskipun sebenarnya pada tahun 2018 meta keywords tidak lagi menjadi prioritas pada algoritma google. Saya sendiri tidak menemukan informasi yang jelas apakah meta keywords benar-benar ditiadakan dari system penelusur google atau tidak, namun perubahan algoritma google yang sekarang digadang-gadang lebih memprioritaskan isi konten yang relevan dengan keyword pengguna.

Meski demikian bukan tidak mungkin meta keywords masih memberi sedikit pengaruh dan masih berfungsi untuk menginformasikan isi halaman dan topik pembahasan suatu laman web. Sejauh ini algoritma google masih menjadi rahasia besar demi menjaga penyalahgunaan yang bisa saja terjadi pada system mereka.

Pentingkah Meta Keywords Dalam Optimasi SEO?

Diluar dari yang telah dijelaskan diatas, meta keywords masih menjadi bagian penting dalam mengoptimalkan keterlihatan konten situs di laman hasil penelusuran (SERPs) karena penelusur bukan hanya google saja, masih ada Yahoo / bing, Yandex, Ask, DuckDuckGo dan masih banyak lagi penelusur selain google yang mungkin saja masih memanfaatkan meta keyword dalam system pencarian mereka.

Bagaimana Cara Memasang Meta Keywords?

Pada tutorial ini saya akan membagi metode penerapan meta keywords menjadi dua bagian yaitu meta keywords otomatis dan meta keywords dengan ejaan (manual). Sedangkan untuk pemasangan tag <meta> keywords tetap diletakkan diantara tag pembukaan <head> dan penutup </head>.

Meta Keywords Otomatis

Memasang meta keywords otomatis dapat ditargetkan ke dua keyword target yang berbeda yaitu dengan menjadikan data title atau data deskripsi artikel sebagai keyword target. Metode penerapan meta keywords otomatis ini sangat sesuai dengan prinsip seo on page jadi sebaiknya jangan lupa untuk menyertakan keyword utama pada judul dan deskripsi artikel jika menggunakan meta keywords otomatis ini.
[code type="Meta"]<meta expr:content='data:blog.pageTitle' name='keywords'/>[/code]
Atau
[code type="Meta"]<meta expr:content='data:blog.metaDescription' name='keywords'/>[/code]
Catatan: Gunakan salah satu meta keywords saja, jika ingin menjadikan judul sebagai keyword maka gunakan meta keywords yang paling atas, jika ingin menargetkan deskripsi sebagai keywords maka gunakan meta keywords yang ke dua (bawah).

Tips: Jika menggunakan meta keywords otomatis (merupakan gabungan antara meta tag dan metadata) di sarankan agar memasukkan keyword utama pada judul dan deskripsi konten/artikel.

Meta Keywords Manual (Ejaan)
[code type="Meta"]<meta content='keyword1, keyword2, keyword3' name='keywords'/>[/code]
Contoh penggunaan meta keywords ejaan (manual) dalam html situs web adalah seperti dibawah ini.
[code type="Meta"]<meta content='optimasi seo, blogger, template' name='keywords'/>[/code]
Tips: Agar meta keyword tersebut selalu relevan dengan konten situs sebaiknya konten / artikel tidak keluar dari 3 keyword target yang ada didalam meta keywords tersebut.

Apakah situs blog KontenWeb masih menggunakan salah satu dari meta keywords diatas? Jawaban-nya "ya" saya masih menggunakan meta keywords otomatis, kamu dapat melihatnya melalui view-source setiap halaman situs ini.

Demikian yang dapat saya jelaskan mengenai meta keywords blogger dan cara penerapan-nya (meta keywords otomatis dan manual/ ejaan), semoga bermanfaat dan menambah ilmu pengetahuan blogging bagi kita semua.

Penulis
- Oktober 13, 2019
Meta Tag Theme Color - Tutorial kali ini akan membahas sebuah cara menyesuaikan warna theme browser (Chrome, Firefox & Opera) dengan theme website. Metode yang kita gunakan untuk merubah atau menyesuaikan warna theme address bar browser adalah dengan menggunakan meta tag theme color. Di-era android browser modern sudah mendukung untuk penyesuaian warna thema address bar dengan theme situs web termasuk situs blogger.

Mungkin kamu juga telah memperhatikan hal ini ketika membuka situs-situs raksasa seperti facebook, youtube dan lain-nya ketika di akses melaui browser chrome secara otomatis akan merubah warna address bar sesuai dengan warna template mereka. Penyesuaian itu tentu tidak terjadi begitu saja melainkan sebuah meta tag theme-color yang mengaturnya.

Praktek Terbaik:
  • Sebelum menambahkan meta tag theme-color kedalam html template, cari tahu terlebih dahulu kode warna template situs web anda, sebagai contoh jika header situs berwarna hijau (#003c30) maka tambahkan juga kode warna tersebut kedalam meta theme-color agar warna theme address bar browser dapat mengikuti warna template situs, atau
  • Kombinasikan warna yang sesuai agar tampilan situs di mobile browser terlihat mengagumkan, contoh; template situs gigi pages di dominasi dengan warna putih di bagian header, maka untuk mendapatkan kombinasi warna yang tidak canggung saya menambahkan warna hitam (#0e0e0e) ke meta theme-color.
Gambar diatas adalah contoh tampilan address bar browser sebelum menggunakan meta theme color dan sesudah menggunakan meta theme color, situs web yang dipasangi meta tag theme color akan meminta browser menyesuaikan warna address bar dengan warna yang minta oleh meta theme-color sehingga situs web akan terlihat lebih mengagumkan.

Cara Memasang Meta Theme Color

Tambahkan meta tag theme color berikut ini kedalam html template situs web anda tepat berada diatara tag pembuka <head> dan penutup </head>.
[code type="HTML"]<meta content='#color-code' name='theme-color'/>[/code]
[code type="Contoh"]<meta content='#d32f2f' name='theme-color'/>[/code]
Perhatikan kode "#d32f2f " dan ganti kode warna tersebut sesuai dengan kode warna yang anda inginkan atau gunakan kode template situs web agar theme address bar menyatu dengan warna theme situs web.

Info: Meta theme color tersebut support pada browser Google Chrome, Firefox & Opera "perangkat android", silahkan lihat hasilnya dengan membuka situs melalui browser di smartphone anda.

Catatan: Jika kamu ingin menerapkan <meta> theme-color yang support di banyak jenis perangkat dan browser silahkan gunakan meta theme color di bawah ini:
[code type="Meta Theme Color"]<!-- Support Google Chrome, Firefox & Opera -->
<meta content='#d32f2f' name='theme-color'/>
<!-- Support Windows Phone & Safari iOS -->
<meta content='#d32f2f' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#d32f2f' name='apple-mobile-web-app-status-bar-style'/>[/code]
Meta tag theme color diatas support untuk penyesuaian warna theme pada browser Google Chrome, Firefox & Opera pada perangkat Android, browser Windows Phone dan Safari iOS. Untuk mendukung kinerja meta tag sebaiknya gunakan kode warna "color hexadecimal".

Demikian penjelasan tentang meta theme color serta panduan cara penerapan meta tag theme color untuk mengatur atau menyesuaikan warna address bar browser dengan warna theme situs web. Semoga bermanfaat dan sampai jumpa kembali, jangan lupa follow dan subscribe ya.

Penulis
- Oktober 13, 2019
Cara Menambahkan Meta Tag Geo Location ke Situs Web - Sebelum memasang meta geo tagging kedalam html header situs sebaiknya pahami dulu fungsi dan manfaatnya, <meta> geo tagging yang ditanamkan ke dalam html situs web sebenarnya bertujuan untuk menentukan lokasi fisik atau lokasi nyata situs web (perusahaan atau tempat pengelolaan situs web).

Dengan menempatkan geo tag location pada halaman web atau umpan RSS maka kamu telah memberikan informasi kepada pengguna dan mesin penelusur tentang lokasi geografis situs tersebut. Metadata geo tagging juga bisa merujuk ke lokasi halaman dan media objek situs seperti keterangan foto, video dll.

Manfaat yang paling nyata yang diperoleh dari meta geo tagging adalah memperkecil atau merampingkan tingkat persaingan di laman hasil pencarian lokal, sehingga bisnis/situs lokal mendapat kesempatan untuk mencul dilaman hasil pencarian.

Meta geo tagging sangat efektif jika ditempatkan pada situs bisnis seperti website restaurant, travel dan semacamnya, Sekarang meta geo tagging sedang di elu-elukan sebagai seo lokal yang praktis, meskipun sebenarnya terkadang robot penelusur juga mengabaikan meta geo tagging jika dinilai tingkat akurasi lokasi geografis yang rendah.
Cara Menambahkan Meta Tag Geo Location ke Situs Web

Contoh Metadata Geo Tagging

[code type="Meta Tag"]<meta content="ID-KR"  name="geo.region"/>
<meta content="Batam"  name="geo.placename"/>
<meta content="1.130078;104.052921" name="geo.position"/>
<meta content="1.130078, 104.052921" name="ICBM"/>[/code]
Untuk mendapatkan atau membuat meta geo tagging dengan tingkat akurasi yang tinggi saya sangat menyaran agar menggunakan tool online seperti Geo Tag Generator, dalam beberapa kasus pengelola situs hanya mengcopy meta  geo tag location dari situs lain kemudian menempatnya ke situs web mereka.

Dan tentu saja itu perilaku yang salah dan tidak bermanfaat untuk situs web karena meta geo tagging hasil copy akan dianggap tidak akurat sehingga robot penelusur bisa saja mengabaikan-nya.

Meta Geo Tag Location Halaman Artikel Blogger

Saya fikir kamu juga telah memperhatikan fitur lokasi pada bilah samping kanan post editor blogger, prinsip fitur lokasi pada editor post blogger sama halnya dengan meta geo tagging berfungsi untuk menentukan lokasi konten atau post blogger, lokasi yang ditargetkan bisa berupa tempat khusus atau yang lebih umum seperti jalan, kota, provinsi atau lokasi negara, seperti contoh pada gambar dibawah ini;
Meta Tag Geo Location Blogger
Praktek terbaik untuk menentukan geo lokasi kontent situs blogger adalah dengan menyesuaikan-nya dengan topik tujuan artikel, jika kamu menulis tentang jakarta maka sebaiknya geo lokasi artikel juga di tag ke lokasi jakarta. Jika konten adalah bisnis lokal maka penetapan lokasi sebaiknya lebih detail hingga ke tempat fisik bisnis.

Metadata Optional Open Graph

Selain meta tag lokasi diatas, dianjurkan juga menambahkan properti meta tag og:locale yang lebih umum yang di rekomondasikan oleh Open Graph seperti dibawah ini;
[code type="Meta Tag"]<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="id_ID" />[/code]
Property og:locale tesebut sangat umum dan opsional untuk objek apapun seperti konten artikel, photo, audio dan video dan umumnya penerapannya sangat disarankan. Kamu dapat mengkombinasikan ketiga metode tag geo lokasi diatas untuk meningkatkan keberadaan situs web dan konten situs di laman hasil peneluran.

Saya fikir ini sudah cukup untuk dijadikan referensi untuk memahami meta geo tagging dan cara setting metadata geo tag pada laman website. Kamu mugkin ingin mempelajari secara spesifik mengenai meta geo tagging di tempat lain, namun saya sangat menyarankan agar kamu mempelajarinya terlebih dahulu pada link resmi yang telah saya lampirkan pada artikel ini untuk mendukung penerapan meta geo tagging pada situs anda.

Penulis
- Oktober 13, 2019
Cara Setting Thumbnail Share Posts Blogger - Masalah yang sering terjadi pada thumbnail share post adalah hilangnya thumbnail image atau gambar postingan ketika laman situs web di share ke social media, hal ini disebabkan karena browser social media seperti twitter dan facebook tidak menemukan meta Open Graph di dalam html situs web.

Selain itu masalah thumbnail share posts yang mungkin banyak dikeluhkan oleh blogger pemula yaitu posisi judul situs yang muncul dikiri judul posts yang dianggap kurang tepat. Judul situs yang terlalu panjang biasanya tidak terlihat bagus pada thumbnail share posts di social media karena dapat menghilangkan fokus audiens yang seharus-nya berpusat pada gambar dan judul konten (artikel).

Maka dari itu artikel ini akan menjelaskan cara mengatur tampilan (thumbnail share posts) situs web sesuai dengan keinginan anda dengan memanfaatkan meta open graph, ini merupakan trick yang paling mudah untuk mengatur thumbnail share posts agar lebih menarik dan lebih menonjol di social media (twitter, gplus dan facebook).
Setting Thumbnail Share Posts Blogger
Yang harus dilakukan untuk membuat thumbnail share post yang menarik dan menonjol adalah, dengan menambahkan Tag Meta dibawah ini ke dalam html situs web, Posisikan meta tag diantara tag <head> dan </head>, yang lebih tepat letakkan di bawah kode penutup </title>.
[code type="Meta Tags"]<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<b:else/><b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
</b:if></b:if>
<!-- Metadata Facebook -->
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='218168578325095' property='fb:app_id'/>
<meta content='100002549773049' property='fb:admins'/>
<!-- Metadata Twitter -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@gigi_pages' name='twitter:site'/>
<meta content='@gigi_pages' name='twitter:creator'/>
<meta content='1200' name='twitter:image:width'/>
<meta content='800' name='twitter:image:height'/>
<link href='https://twitter.com/gigi_pages' rel='me'/>
<!-- Blogger Authorship and Publisher Markup -->
<link href='https://www.blogger.com/profile/13988649334104083824' rel='author'/>
<link href='https://www.blogger.com/profile/13988649334104083824' rel='publisher'/>
<!-- Schema.org markup for Google+ -->
<meta expr:content='data:blog.pageTitle' itemprop='name'/>[/code]
Save template dan lihat hasilnya, dengan catatan "thumbnail share post" akan berubah setelah cache situs web di browser hilang, biasanya 1 x 24 jam atau paling lama 2 hari setelah menerapkan tag meta diatas.

Jika sebelumnya situs web sudah memiliki meta open graph seperti yang tertera diatas maka tidak perlu mengganti semua-nya. Cukup lakukan sedikit perubahan saja pada tag meta seperti berikut ini untuk mengatur thumbnail share post yang lebih relevan.

Thumbnail Share Post (Twitter Social Media)

Cari dan temukan sebaris kode berikut didalam html situs web.
[code type="Meta Tag"]<meta content='summary' name='twitter:card'/>[/code]
Kemudian ganti kode tersebut dengan;
[code type="Meta Tag"]<meta content='summary_large_image' name='twitter:card'/>[/code]
Selanjut-nya tamnahkan property image width dan height agar gambar (thumbnail share post) pada social media twitter terlihat lebih besar dan menonjol.
[code type="Meta Tag"]<meta content='1200' name='twitter:image:width'/>
<meta content='800' name='twitter:image:height'/>[/code]
Thumbnail Share Post (Twitter Social Media)

Thumbnail Share Post (Facebook Social Media)

Cari dan temukan sebaris kode tag meta berikut didalam html situs web;
[code type="Meta Tag"]<meta expr:content='data:blog.pageTitle' property='og:title'/>[/code]
Kemudian tambahkan tepat dibawahnya kode tag meta berikut;
[code type="Meta Tag"]<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>[/code]
Kode tag meta tersebut berfungsi untuk memerintahkan browser social media facebook hanya menampilkan judul halaman (judul artikel) dan menyembunyikan judul situs dari thumbnail share post.
Thumbnail Share Post (Facebook Social Media)
Silahkan share artikel ini ke beberapa jenis social media kamu untuk melihat live demo thumbnail share post situs Gigi Pages, pengaturan yang saya terapkan di situs ini kurang lebih sama persir seperti yang telah dijelaskan di atas, Jika kamu sudah paham dan mengenal secara rinci tentang meta tags yang mengatur thumbnail share posts, kamu dapat mengganti semua meta tag yang telah ada dengan meta tags yang saya bagikan di atas.

Catatan: Ganti id facebook, twitter dan username google plus yang telah ditandai dengan huruf tebal dengan id dan username anda sendiri.

Demikian saja "Setting Thumbnail Share Post Blogger", semoga bermanfaat dan dapat membantu anda dalam mengatur ukuran gambar dan judul yang ditampilkan pada thumbnail share post situs web anda. Jangan lupa subscribe jika artikel ini benar-benar membantu.

Penulis
- Oktober 13, 2019
Meta Tags Icon (Cara Terbaru Menambahkan Icon Website) - Apa yang dimaksud dengan meta tags icon? meta tags icon merupakan sebuah penanda khusus yang digunakan untuk menambahkan icon atau logo melalui html situs web agar icon website muncul pada tab browser dan di tempat lainnya.

Sebelum kehadiran smartphone dan banyak-nya jenis browser modern setiap website seperti situs blogger umumnya menggunakan sebaris tag favicon.ico untuk menambahkan icon situs web. Namun sekarang meta tag icon seperti itu kurang maksimum bahkan tidak support di sebagian browser.

Agar icon situs web khususnya icon situs blogger muncul di banyak jenis browser dan kita perlu menambahkan beberapa jenis meta tag icon dengan size atau ukuran icon website yang berbeda.

Meta tag icon ini untuk mendukung keterlihatan icon atau logo situs di banyak browser modern dan di banyak tempat seperti pada tab browser, beranda browser, history, recent history, favorite dan lainnya seperti terlihat pada contoh di bawah ini;
Apa bedanya? Jika penerapan icon pada situs blogger menggunakan metode lama, browser modern tidak dapat menampilkan gambar icon secara utuh dan hanya di tandai dengan inisial "B" atau blogger, sedangkan jika penerapan icon situs menggunakan metode baru yaitu meta icon-website, gambar atau logo icon akan ditampilkan secara utuh dengan resolusi yang tinggi sehingga situs lebih mudah dikenali seperti terihat pada gambar diatas (sebelah kanan).

Agar icon website muncul secara maksimal di banyak jenis browser kita perlu menambahkan beberapa versi meta tag icon berikut diantara tag pembuka <head> dan tag penutup </head> html situs web.
[code]<link rel="apple-touch-icon" sizes="72x72" href="url-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="url-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="url-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="url-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="url-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="url-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="url-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="url-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="url-icon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="url-icon-96x96.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="url-icon-144x144.png">[/code]
Catatan: Tidak semua meta tag icon harus di tambahkan ke dalam html situs web, pilih beberapa meta tag icon saja untuk mewakili browser yang paling umum di gunakan dan jenis file gamar icon yang digunakan adalah file png "icon_name.png".

Cara Memasang Meta Icon Pada Situs Blogger

Tambahkan meta tag icon di bawah ini pada area <head> html situs, lebih jelas nya letakkan di antara kode <head> dan </head>, kemudian ganti tanda pagar atau hashtag "#" dengan url_icon atau logo yang di inginkan.
[code]<link href='#' rel='icon' sizes='192x192'/>
<link href='#' rel='apple-touch-icon'/>
<link href='#' rel='apple-touch-icon' sizes='152x152'/>
<link href='#' rel='apple-touch-icon' sizes='180x180'/>
<link href='#' rel='apple-touch-icon' sizes='167x167'/>[/code]
Pengaturan size image data icon

Untuk menyesuaikan ukuran atau size icon.png dengan size yang ditetapkan pada meta (link) tag icon, kamu tidak perlu membuat dan menggunggah banyak gambar dengan ukuran (size) yang berbeda. Cukup unggah satu (1) icon.png persegi misal: 5cm x 5cm dengan data size dibawah 350kb, kemudian icon.png akan kita compress menggunakan image url blogspot agar sesuai dengan ukuran yang di tetapkan pada meta tag icon, perhatikan image_url dibawah ini.
[code type="URL"]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s470/HG.png[/code]
Perhatikan size file pada url diatas, kemudian ganti s470 dengan size yang ada pada masing-masing meta tag icon, misalnya s192, s152, s180 dan s167, dengan demikian ukuran atau size mage "icon.png" akan di resize sesuai dengan ukuran pada tag icon. Untuk membuat ukuran normal icon.png silahkan hapus /s470 dari image_url.

Contoh Penerapan Sebenarnya:
[code]<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s144/ms-icon-144x144.png' name='msapplication-TileImage'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s192/HG.png' rel='icon' sizes='192x192'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s32/HG.png' rel='icon' sizes='32x32'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s96/HG.png' rel='icon' sizes='96x96'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s16/HG.png' rel='icon' sizes='16x16'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/' rel='apple-touch-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s152/HG.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s180/HG.png' rel='apple-touch-icon' sizes='180x180'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s167/HG.png' rel='apple-touch-icon' sizes='167x167'/>[/code]
Setelah tag icon di terapkan silahkan lihat atau tinjau situs anda melalui smartphone (android atau apple) dengan browser chrome, opera dan safari, jangan lupa untuk meninjaukan situs saya juga jika kamu pengguna iphone.

Seberapa Penting Tag Icon Untuk Situs Blogger?

Icon atau logo situs akan menambah nilai / tingkat propesional terhadap situs web itu sendiri, Selain itu icon/logo situs juga menjadikan situs web anda lebih mudah di kenali karena itu merupakan brand situs web. Orang-orang biasanya lebih cenderung mengenali atau menghafal brand di bandingkan url situs.

Demikian saja penjelasan dan cara menerapkan tag icon website, saya harap artikel ini dapat memberikan sedikit ilmu atau sekedar pemahaman tentang website selamat mencoba dan sukses buat kamu. Jika kamu butuh refesensi yang lebih akurat mengenai cara penerapan meta tag icon ini silahkan view-source situs saya untuk melihat meta icon yang saya terapkan (Buka halaman "Beranda" situs ini kemudian tekan Ctrl+U untuk melihat).
x