Mengatur Thumbnail Gambar Website Landing page Saat Dishare ke Sosmed

22 November 2024

Halaman landing page yang dibuat bukan menggunakan cms atau dalam artian merupakan halaman statis biasa kadang seringkali tidak dioptimalkan dengan baik khususnya dalam pengaturan tag meta ataupun tag og, nah salah satu contoh yang sering terjadi ketika membuat laman web berupa landing page seringkali kita melupakan untuk mengatur tag og untuk mengatur thumbnail gambar atau bagaimana tampilan konten pada saat dibagikan ke sosial media

Tag Open Graph (OG) adalah tag HTML yang digunakan untuk menentukan tampilan konten yang dibagikan di media sosial, seperti Facebook, LinkedIn, dan Twitter. Tag ini memungkinkan admin web untuk mengontrol informasi apa yang ditampilkan saat konten dibagikan di media sosial

Untuk dapat mengatur thumbnail gambar website landing page saat dishare ke Sosmed maka Anda hanya perlu menambahkan tag og kedalam head website Anda seperti contoh berikut :


		<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="utf-8">
		    <meta content="width=device-width, initial-scale=1.0" name="viewport">
		    <!-- Open Graph meta tags -->
		    <meta property="og:title" content="Web Anda" />
		    <meta property="og:description" content="Deskripsi Web Anda" />
		    <meta property="og:image" content="https://webanda.com/path-gambar.png" />
		    <meta property="og:url" content="https://webanda.com" />
		    <meta property="og:type" content="website" />
		    <meta property="og:site_name" content="Nama Site Anda" />
		    
		    <!-- End Open Graph meta tags -->
		    <title>Web Anda</title>
		    <meta content="isi dengan deskripsi" name="description">
		    <meta content="isi dengan keyword yang diinginkan" name="keywords">

Jadi Anda dapat menaruh open graph diatas setelah tag atau sebelum tag , setelah tag title Anda bisa mengatur met tag lainnya untuk keperluan misal menampilkan deskripsi laman pada hasil pencarian</p>