It's a wrap for Chrome Dev Summit 2020! Watch all the sessions at goo.gle/cds20-sessions now!

Penemuan Sosial

Anda bisa memengaruhi cara penampilan situs saat dibagikan lewat media sosial dengan menambahkan beberapa baris kode ke setiap laman. Ini bisa membantu menarik banyak orang ke situs Anda dengan menyediakan pratinjau dengan informasi yang lebih lengkap daripada yang disediakan situs lain.

TL;DR

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

Anda bisa memengaruhi cara penampilan situs saat dibagikan lewat media sosial dengan menambahkan beberapa baris kode ke setiap laman. Ini bisa membantu meningkatkan interaksi dengan menyediakan pratinjau dengan informasi yang lebih lengkap daripada yang disediakan situs lain. Tanpa ini, situs sosial hanya akan menyediakan informasi dasar, tanpa gambar atau informasi berguna lainnya.

Manakah yang menurut Anda lebih cenderung diklik? Orang-orang tertarik pada gambar dan merasa lebih yakin mereka akan suka apa mereka temukan bila mereka memiliki pratinjaunya lebih dahulu.

Dengan markup yang tepat: judul yang benar, keterangan singkat, dan gambar akan disertakan. Penambahan semua item ini bisa membantu meningkatkan interaksi.
Tanpa markup yang tepat, hanya judul laman yang akan disertakan.

Bila seseorang di jaringan sosial ingin membagikan situs web Anda dengan teman-temannya, ia barangkali akan menambahkan beberapa catatan yang menjelaskan betapa menariknya situs web Anda, dan membagikannya. Namun menjelaskan situs web cenderung merepotkan dan bisa melewatkan pendapat dari sudut pandang pemilik laman. Sebagian layanan membatasi jumlah karakter yang bisa dimasukkan pengguna dalam catatan.

Dengan menambahkan metadata yang sesuai ke laman, Anda bisa menyederhanakan proses berbagi untuk pengguna dengan menyediakan judul, keterangan, dan gambar yang menarik. Ini berarti mereka tidak perlu menghabiskan waktu (atau karakter) yang berharga untuk menjelaskan tautan tersebut.

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

Perayap menggunakan banyak metode untuk mem-parse laman dan memahami materinya. Dengan menggunakan kosakata mikrodata, dan schema.org, Anda membantu situs sosial dan mesin telusur untuk memahami materi laman dengan lebih baik.

Inilah 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>

Walaupun sebagian besar metadata disematkan di bagian tajuk laman web, mikrodata tinggal di tempat konteks berada.

Tambahkan itemscope untuk mendefinisikan cakupan mikrodata

Dengan menambahkan itemscope, Anda bisa menetapkan tag sebagai blok materi tentang item khusus.

Tambahkan itemtype untuk mendefinisikan tipe situs web

Anda bisa menetapkan tipe item dengan menggunakan atribut itemtype bersama itemscope. Nilai itemtype bisa ditentukan sesuai dengan tipe materi laman web Anda. Anda akan bisa menemukan yang relevan di laman ini.

Tambahkan itemprop untuk menjelaskan setiap item menggunakan kosakata schema.org

itemprop mendefinisikan properti itemtype yang ada dalam cakupan. Untuk menyediakan metadata ke situs sosial, nilai-nilai itemprop yang umum adalah name, description, dan image.

Validasikan cuplikan yang lengkap

Untuk memvalidasi cuplikan yang lengkap di Google+, Anda bisa menggunakan alat seperti:

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

Open Graph Protocol (OGP) membekali Facebook dengan metadata yang diperlukan agar laman web bisa memiliki fungsionalitas yang sama seperti 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">

Bila disertakan di bagian tajuk laman Anda, metadata ini akan menyediakan informasi cuplikan yang lengkap bila laman dibagikan.

Gunakan tag meta dengan namespace og: untuk menjelaskan metadata

Tag meta terdiri dari atribut property dan atribut content. Properti dan materi dapat mengambil nilai-nilai berikut:

Properti Materi
og:title Judul laman web.
og:description Keterangan laman web.
og:url URL kanonis laman web.
og:image URL ke gambar yang dilampirkan ke entri blog yang dibagikan.
og:type String yang menunjukkan tipe laman web. Anda bisa menemukan yang cocok untuk laman web Anda di sini.

Tag meta ini menyediakan informasi semantik kepada perayap dari situs sosial, biasanya dari Facebook.

Ketahui selengkapnya

Untuk mengetahui selengkapnya tentang apa saja yang bisa Anda lampirkan ke entri blog di Facebook, kunjungi situs resmi Open Graph Protocol.

Validasikan cuplikan yang lengkap

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

Gunakan Twitter Cards untuk menyediakan cuplikan yang lengkap di Twitter

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

Gunakan tag meta dengan namespace twitter: untuk menjelaskan metadata

Agar Twitter Card bisa berfungsi, domain Anda harus telah disetujui dan harus berisi tag meta yang memiliki twitter:card sebagai atribut name, sebagai ganti atribut property.

Inilah contoh ringkasnya:

<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 entri blog yang dibagikan sehingga orang-orang bisa mudah berinteraksi dengan pemilik laman.

Ketahui selengkapnya

Untuk mengetahui selengkapnya tentang Twitter Cards, kunjungi:

Validasikan cuplikan yang lengkap

Untuk memvalidasi markup Anda, Twitter menyediakan:

Praktik Terbaik

Dengan ketiga opsi, hal terbaik yang bisa Anda lakukan adalah menyertakan semuanya dalam laman web Anda. Inilah 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, mikrodata dan OGP berbagi beberapa markup:

  • itemscope berada di tag head
  • title dan description digunakan bersama mikrodata dan OGP
  • itemprop="image" menggunakan tag link dengan atribut href sebagai ganti menggunakan ulang tag meta dengan property="og:image"

Terakhir, pastikan memvalidasi bahwa laman web Anda tampil sesuai harapan pada setiap situs sosial sebelum mempublikasikannya.