Apa itu Open Graph dan bagaimana saya boleh menggunakannya untuk laman web saya?

Ia memerlukan banyak masa untuk membina kandungan dan mengekalkan laman web. Bagaimanakah kita dapat memastikan bahawa kandungan kita menonjol ketika dibagikan pada suapan sosial di internet?

  • Apakah Graf Terbuka?
  • Mengapa saya memerlukannya?
  • Apa yang berlaku jika saya tidak memilikinya?
  • Bermula dengan asas grafik terbuka
  • Jenis grafik terbuka laman web
  • Beberapa tag grafik terbuka lain yang patut ditambah
  • Twitter dan rangkaian media sosial lain menggunakan grafik terbuka
  • Gambar dalam grafik terbuka
  • Menguji teg grafik terbuka anda
  • Bolehkah saya mendapat contoh?

Apakah Graf Terbuka?

Open Graph adalah protokol internet yang pada awalnya dibuat oleh Facebook untuk menyeragamkan penggunaan metadata dalam laman web untuk mewakili isi halaman.

Di dalamnya, anda dapat memberikan perincian sesederhana judul halaman atau khusus seperti durasi video. Potongan-potongan ini sesuai untuk membentuk perwakilan setiap halaman internet.

Mengapa saya memerlukannya?

Kandungan di internet biasanya dibuat dengan sekurang-kurangnya satu tujuan - untuk membaginya dengan orang lain. Perkara ini tidak semestinya penting jika anda hanya menghantarnya kepada satu rakan, tetapi jika anda ingin membagikannya atau mahu ia dikongsi di mana-mana rangkaian sosial atau aplikasi yang menggunakan pratonton yang kaya, anda mahu pratonton itu berkesan yang mungkin.

Bagaimana Menjadi Pembangun Web Stack Penuh pada tahun 2020 #javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@colbyfayock) 10 Mac 2020

Ini akan membantu mendorong orang ramai untuk melihat kandungan anda dan pasti dapat mengeklik kandungan anda.

Apa yang berlaku jika saya tidak memilikinya?

Sebilangan besar rangkaian sosial secara lalai akan berusaha sedaya upaya untuk membuat pratonton kandungan anda. Perkara ini lebih kerap tidak berjalan lancar.

Ambil contohnya laman web saya colbyfayock.com.

Ini betul-betul mengambil tajuk halaman saya dan keterangannya, tetapi itu bukan tweet yang paling menarik dalam suapan.

Berbeza dengan pratonton satu siaran dan kita melihat cerita yang berbeza.

Jadi apa yang berlaku jika anda tidak mempunyai tag grafik terbuka? Tidak ada perkara buruk yang akan berlaku, tetapi anda tidak akan memanfaatkan beberapa ciri yang membantu menjadikan kandungan anda menonjol di sebelah banyak kandungan lain yang disiarkan di internet.

Bermula dengan asas grafik terbuka

Empat tag graf terbuka asas yang diperlukan untuk setiap halaman adalah og:title, og:type, og:image, dan og:url. Teg ini harus unik untuk setiap halaman yang anda layani, yang bermaksud tag halaman utama anda harus berbeza dari halaman artikel posting blog anda.

Walaupun semestinya cukup mudah, berikut adalah pecahan makna setiap tag:

  • og:title: Tajuk halaman anda. Ini biasanya sama dengan tag halaman web anda melainkan anda ingin membentangkannya secara berbeza.
  • og:type: "Jenis" laman web yang anda ada. Saya akan menerangkan lebih lanjut di bahagian seterusnya, walaupun "jenis" generik adalah "laman web".
  • og:image: Ini harus menjadi pautan ke gambar yang anda ingin mewakili kandungan anda. Seharusnya gambar beresolusi tinggi yang akan digunakan oleh rangkaian sosial dalam suapan mereka.
  • og:url: Ini mestilah URL halaman semasa.

Semasa meletakkan teg di laman web anda, anda harus meletakkannya bersama dengan metadata lain. Teg yang digunakan akan menjadi tag dan kelihatan seperti corak ini:

Oleh itu, jika saya membuat satu set empat tag grafik terbuka asas untuk laman web saya, colbyfayock.com, ia mungkin kelihatan seperti:

Jenis grafik terbuka laman web

Protokol grafik terbuka mempunyai beberapa variasi "jenis" laman web yang disokongnya. Ini merangkumi jenis seperti laman web, artikel, atau video.

Semasa menyediakan tag grafik terbuka anda, anda pasti ingin mengetahui jenis mana yang lebih sesuai untuk laman web anda. Sekiranya halaman anda difokuskan pada satu video, mungkin masuk akal untuk menggunakan jenis "video". Sekiranya laman web umum tanpa menegak tertentu, anda mungkin hanya ingin menggunakan jenis "laman web".

Sama seperti yang lain, ini unik untuk setiap halaman. Oleh itu, jika halaman utama anda adalah "laman web", anda selalu boleh mempunyai halaman lain dengan jenis "video".

Oleh itu, jika saya membuat jenis grafik terbuka untuk laman web saya, ini mungkin seperti yang berikut di laman utama saya:

Semasa menavigasi ke catatan blog, ia akan kelihatan seperti:

Anda boleh mendapatkan jenis laman web grafik terbuka yang paling biasa di halaman web grafik terbuka: //ogp.me/#types

Beberapa tag grafik terbuka lain yang patut ditambah

Walaupun secara amnya anda baik-baik saja dengan asas-asasnya, berikut adalah beberapa perkara yang perlu ditambah:

  • og:description: Huraian halaman anda. Begitu juga dengan og:title, ini mungkin sama dengan teg laman web anda , kecuali jika anda ingin membentangkannya secara berbeza.
  • og:locale: Sekiranya anda ingin melokalkan tag anda, mungkin masuk akal untuk memasukkan lokal. Formatnya language_TERRITORY, di mana lalai en_US.
  • og:site_name: Nama laman web keseluruhan kandungan anda aktif. Sekiranya anda berada di halaman catatan blog, anda mungkin mempunyai titletajuk tajuk blog tersebut, di mana site_namenama blog anda.
  • og:video: Ada video yang menyokong kandungan anda? Inilah peluang untuk memasukkannya. Tambahkan pautan ke video anda menggunakan teg ini.

Tag ini akan ditambahkan dalam corak yang sama seperti sebelumnya:

Twitter dan rangkaian media sosial lain menggunakan grafik terbuka

Sebilangan besar rangkaian sosial mematuhi asas piawaian grafik terbuka, tetapi sebilangan dari mereka juga merangkumi peluasan mereka sendiri untuk membantu menyesuaikan rupa dan nuansa dalam ekosistem mereka.

Twitter misalnya, membolehkan anda menentukan twitter:card, jenis "kad" yang dapat Anda gunakan ketika mereka menunjukkan laman web anda. Pada masa ini, jenis kad mereka termasuk:

  • ringkasan
  • rangkuman_lihat_perbukaan
  • aplikasi
  • pemain

Ini akan membantu anda memilih cara pautan anda digunakan dalam suapan mereka. Sekiranya anda memilih summary_large_imagemisalnya, Twitter akan menunjukkan pautan anda dengan gambar beresolusi tinggi selagi anda memberikannya di dalam og:imagetag.

Berikut adalah beberapa rujukan cepat mengenai dokumentasi cara menggunakan tag grafik terbuka dengan beberapa laman media sosial:

  • Twitter: //developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook: //developers.facebook.com/docs/sharing/webmasters/
  • Pinterest: //developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn: //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Gambar dalam grafik terbuka

Walaupun menambahkan gambar anda sebagaimana og:imagemestinya sudah cukup, kadang-kadang menjadi sukar untuk menjadikan gambar anda muncul dengan betul. Jika anda seolah-olah berjalan ke dalam masalah, standard graf terbuka termasuk beberapa tag imej seperti og:image:urlvs og:image:secure_urlserta og:image:widthdan og:image:height.

Cuba pastikan anda mengikuti semua nota dan contoh dalam dokumentasi grafik terbuka. Selain itu, beberapa rangkaian sosial mempunyai keperluan imej. Twitter misalnya memerlukan nisbah 2: 1 dengan ukuran minimum 300x157 dan ukuran maksimum 4096x4096 yang di bawah 5MB dan format JPG, PNG, WEBP atau GIF.

Sekiranya anda buntu, uji tag anda menggunakan alat rangkaian media sosial untuk melihat apakah anda dapat menemui masalahnya.

Menguji teg grafik terbuka anda

Nasib baik, rangkaian sosial kegemaran kami juga menyediakan alat untuk membantu kami men-debug tag kami. Sebaik sahaja anda memastikan bahawa teg anda benar-benar muncul dalam kod sumber laman web anda, anda akan dapat melihat bagaimana paparan laman web anda dalam suapan.

  • Twitter: //cards-dev.twitter.com/validator
  • Facebook: //developers.facebook.com/tools/debug/
  • Pinterest: //developers.pinterest.com/tools/url-debugger/

Menggali lebih jauh ke tag grafik terbuka

Walaupun sebahagian besarnya merangkumi laman web asas, terdapat beberapa lagi tag yang dapat membantu anda dan perniagaan anda dapat ditemui di seluruh rangkaian sosial.

Sekiranya anda berminat untuk menyelam lebih banyak lagi, dokumentasi memberikan pekerjaan yang baik dalam menyediakan senarai semua tag yang tersedia untuk anda gunakan.

//ogp.me/

Bolehkah saya mendapat contoh?

Sekiranya anda hanya mencari contoh untuk memulakan, inilah yang harus anda dapatkan semasa menyediakan teg untuk catatan blog:

Mencari kaedah lain untuk mengoptimumkan dan menganalisis kandungan anda?

  • Bagaimana Menambah Imej Media Sosial ke Repositori Projek Github Anda
  • Cara Membuat Rasa Analitis Google dan Lalu Lintas ke Laman Web Anda
  • Cara mengatur dan mengesan prestasi Saluran YouTube dengan Analitis Google

Ikuti saya untuk lebih banyak Javascript, UX, dan perkara menarik lain!

  • ? Ikuti saya di Twitter
  • ? ️ Langgan Youtube Saya
  • ✉️ Daftar ke Buletin Saya