Penemuan sosial

Anda dapat memengaruhi tampilan situs saat dibagikan melalui media sosial dengan menambahkan beberapa baris kode ke setiap halaman. Hal ini dapat membantu menarik lebih banyak orang ke situs Anda dengan menyediakan pratinjau dengan informasi yang lebih lengkap daripada yang disediakan situs lain.

Eiji Kitamura

Anda dapat memengaruhi cara situs Anda ditampilkan saat dibagikan melalui media sosial dengan menambahkan beberapa baris kode ke setiap halaman. Hal ini dapat membantu menarik lebih banyak orang ke situs Anda dengan memberikan pratinjau dengan informasi yang lebih lengkap daripada yang tersedia.

Ringkasan

  • Gunakan mikrodata schema.org untuk menyediakan judul halaman, deskripsi, dan gambar untuk Google+.
  • Gunakan Open Graph Protocol (OGP) untuk menyediakan judul halaman, deskripsi, dan gambar untuk Facebook.
  • Gunakan Twitter Cards untuk menyediakan judul halaman, deskripsi, gambar, dan ID Twitter untuk Twitter.

Anda dapat memengaruhi cara situs Anda ditampilkan saat dibagikan melalui media sosial dengan menambahkan beberapa baris kode ke setiap halaman. Hal ini dapat membantu meningkatkan interaksi dengan menyediakan pratinjau dengan informasi yang lebih lengkap daripada yang disediakan situs lain. Tanpanya, situs sosial hanya akan menyediakan informasi dasar, tanpa gambar atau informasi bermanfaat lainnya.

Manakah yang menurut Anda lebih cenderung diklik? Orang-orang tertarik pada gambar dan merasa lebih yakin mereka akan menyukai gambar yang mereka temukan saat memiliki pratinjau awal.

Dengan markup yang tepat: judul yang benar, deskripsi singkat, dan gambar akan disertakan. Penambahan semua item ini dapat membantu meningkatkan interaksi.
Dengan markup yang sesuai: judul yang benar, deskripsi singkat, dan gambar akan disertakan. Penambahan semua item ini dapat membantu meningkatkan interaksi.
Tanpa markup yang tepat, hanya judul halaman yang disertakan.
Tanpa markup yang tepat, hanya judul halaman yang disertakan.

Saat seseorang di jejaring sosial ingin membagikan situs Anda kepada temannya, dia mungkin akan menambahkan beberapa catatan yang menjelaskan betapa kerennya situs tersebut, lalu membagikannya. Namun, menjelaskan situs cenderung merepotkan dan dapat melewatkan poin dari sudut pandang pemilik halaman. Beberapa layanan membatasi jumlah karakter yang dapat dimasukkan pengguna dalam catatan.

Dengan menambahkan metadata yang sesuai ke halaman, Anda dapat menyederhanakan proses berbagi untuk pengguna dengan memberikan judul, deskripsi, dan gambar yang menarik. Artinya, mereka tidak perlu menghabiskan waktu (atau karakter) yang berharga untuk menjelaskan link tersebut.

Gunakan schema.org + mikrodata untuk menyediakan cuplikan yang lengkap di Google+

Perayap menggunakan banyak metode untuk mem-parse halaman dan memahami materinya. Dengan menggunakan microdata, dan schema.org, Anda membantu situs sosial dan mesin telusur untuk memahami konten halaman dengan lebih baik.

Berikut contohnya:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

Meski sebagian besar metadata disematkan di bagian head halaman web, microdata tetap ada di tempat konteks berada.

Tambahkan itemscope untuk menentukan cakupan microdata

Dengan menambahkan itemscope, Anda dapat menentukan tag sebagai blok konten tentang item tertentu.

Menambahkan itemtype untuk menentukan jenis situs Anda

Anda dapat menentukan jenis item menggunakan atribut itemtype bersama dengan itemscope. Nilai itemtype dapat ditentukan sesuai dengan jenis konten di halaman web Anda. Anda akan dapat menemukan yang relevan di halaman ini.

Menambahkan itemprop untuk mendeskripsikan setiap item menggunakan kosakata schema.org

itemprop menentukan properti untuk itemtype dalam cakupan. Untuk menyediakan metadata ke situs media sosial, nilai itemprop yang umum adalah name, description, dan image.

Memvalidasi cuplikan kaya

Untuk memvalidasi cuplikan kaya di Google+, Anda dapat menggunakan alat seperti:

Alat pengujian data terstruktur

Menggunakan Open Graph Protocol (OGP) untuk menyediakan cuplikan yang lengkap di Facebook

Open Graph Protocol (OGP) menyediakan metadata yang diperlukan Facebook agar halaman web dapat memiliki fungsi yang sama dengan objek Facebook lainnya.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

Jika disertakan di bagian head halaman Anda, metadata ini akan memberikan informasi cuplikan yang lengkap saat halaman dibagikan.

Gunakan tag meta dengan namespace og: untuk mendeskripsikan metadata

Tag meta terdiri dari atribut property dan atribut content. Properti dan konten dapat menggunakan nilai berikut:

Properti Konten
og:title Judul halaman web.
og:description Deskripsi halaman web.
og:url URL kanonis halaman web.
og:image URL ke gambar yang dilampirkan ke postingan yang dibagikan.
og:type String yang menunjukkan jenis halaman web. Anda dapat menemukan yang cocok untuk halaman web Anda di sini.

Tag meta ini memberikan informasi semantik kepada crawler dari situs sosial, seperti Facebook.

Pelajari lebih lanjut

Untuk mempelajari lebih lanjut hal-hal yang dapat dilampirkan ke postingan di Facebook, buka situs resmi Open Graph Protocol.

Memvalidasi cuplikan kaya

Untuk memvalidasi markup Anda di Facebook, Anda dapat menggunakan alat seperti:

Menggunakan Twitter Cards untuk menyediakan cuplikan yang lengkap di Twitter

Twitter Cards adalah ekstensi untuk Open Graph Protocol yang berlaku untuk Twitter. Semua itu memungkinkan Anda menambahkan lampiran media seperti gambar dan video ke Tweet dengan link ke halaman web Anda. Dengan menambahkan metadata yang sesuai, Tweet dengan link ke halaman Anda akan ditambahi kartu yang menyertakan detail lengkap yang telah Anda tambahkan.

Menggunakan tag meta dengan namespace twitter: untuk mendeskripsikan metadata

Agar Kartu Twitter berfungsi, domain Anda harus disetujui dan harus berisi tag meta yang memiliki twitter:card sebagai atribut name, bukan atribut property.

Berikut contoh ringkas:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

Dengan menetapkan ID Twitter ke nilai twitter:site, Twitter akan menyematkan informasi ini dalam postingan yang dibagikan sehingga orang-orang dapat dengan mudah berinteraksi dengan pemilik halaman.

Kartu Twitter.

Pelajari lebih lanjut

Untuk mempelajari Twitter Cards lebih lanjut, buka:

Memvalidasi cuplikan kaya

Untuk memvalidasi markup Anda, Twitter menyediakan:

Praktik Terbaik

Dengan ketiga opsi tersebut, hal terbaik yang dapat Anda lakukan adalah menyertakan semuanya dalam halaman web Anda. Berikut contohnya:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Perhatikan bahwa mikrodata dan OGP berbagi beberapa markup:

  • itemscope berada di tag head
  • title dan description dibagikan antara microdata dan OGP
  • itemprop="image" menggunakan tag link dengan atribut href, bukan menggunakan kembali tag meta dengan property="og:image"

Terakhir, pastikan untuk memvalidasi bahwa halaman web Anda muncul seperti yang diharapkan di setiap situs media sosial sebelum dipublikasikan.