Cara Publikasikan Konten Dengan Artikel Instan Facebook
Kinerja penting, dan pemain besar di web menangani kinerja dengan cara mereka sendiri. Jawaban Google datang dalam bentuk AMP yang kontroversial ; sebuah format penerbitan yang menawarkan pengalaman yang mulus untuk hasil pencarian mobile mereka. Google bahkan daftar peringkat yang menerapkan AMP lebih baik.
Facebook, juga, telah merancang inisiatif sendiri dengan Instant Articles yang memungkinkannya menyajikan konten web bersama di aplikasi mobile-nya langsung dengan pengalaman native-mobile. Konten yang telah divalidasi sebagai Instant Article akan ditandai dengan emblem petir saat dibagikan di manapun di Facebook feed.
Dalam tutorial ini kita akan mempelajari apa itu "Artikel Instan" dan bagaimana Anda dapat memasarkan konten Anda sendiri ke alat penerbitan cepat ini. Lets go
1. Mendaftar
Pertama, Anda perlu memiliki akses admin atau editor ke Halaman Facebook yang dipublikasikan.
Pada saat dimulainya, Artikel Instan hanya tersedia untuk penerbit besar atau menengah yang Facebook Page memiliki setidaknya seratus ribu pengikut, atau suka, dengan pemirsa aktif; tidak mengherankan bahwa halaman saya tidak memenuhi syarat untuk mendaftar ke Instant Articles saat itu juga! Saat ini, Facebook telah membuka Artikel Instan untuk semua penerbit dengan segala ukuran, Anda hanya perlu mendaftar .
Lalu, pilih halamannya.
2. Verifikasi Situs Anda
Anda perlu memverifikasi bahwa Anda memiliki situs web yang dimaksud dengan menambahkan 
fb:pages meta tag di dalamnya head. Jangan lupa tambahkan URL dan tekan Claim URL untuk menyelesaikan verifikasi. Anda dapat memverifikasi beberapa URL jika situs Anda terdiri dari sejumlah saluran atau subdomain, seperti Medium and Tuts + ( seokevin.tk )3. Format Markup
Sebelum Anda dapat menerbitkan Artikel Instan secara teratur, Anda harus mengirimkan setidaknya lima artikel untuk ditinjau. Artikel ini harus menggunakan pemformatan Article Article compliant, misalnya:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <!doctype html><head> <meta charset="utf-8"> <meta property="op:markup_version" content="v1.0"> <meta property="fb:article_style" content="acme-style"/></head><body> <article> <header> <h1>Title</h1> <h2>Subtitle</h2> <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time> <time class="op-modified" datetime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time> <address> Zuck is the CEO of Facebook. </address> <figure> <figcaption>Cool cover header</figcaption> </figure> <h3 class="op-kicker">Web Design</h3> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque doloribus quia quasi soluta atque veniam harum! Voluptatum facilis placeat soluta molestias, dolore quasi quos pariatur minus corporis, consequatur amet facere.</p> <figure data-mode="fullscreen"> </figure> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. Quo!</p> <figure data-feedback="fb:likes, fb:comments"> <figcaption class="op-vertical-center"> <h1>Image Caption</h1> </figcaption> </figure> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. Quo!</p> </article></body></html> |
Seperti yang bisa Anda lihat di atas, format Instant Articles adalah struktur HTML semantik polos dengan kelas dan atribut khusus. Gambar, misalnya, memiliki
data-mode atribut yang disetel fullscreen yang akan membuat layar penuh gambar. Pada gambar lainnya, kami memiliki kumpulan data-feedback atribut yang memungkinkan pengguna memberi "Suka" dan melampirkan komentar langsung ke gambar.
Beberapa tag meta khusus juga ditambahkan dalam
head tag seperti fb:article_style tag yang mendefinisikan gaya konten. Selain itu, canonicaltag meta harus mengarah ke artikel aslinya; sebuah faktor yang membuat banyak penerbit memilih Artikel Instan Facebook melalui Google AMP. Google AMP jauh lebih samar tentang lokasi karya orisinil.4. Kirimkan Konten Anda
Setelah Anda siap, kirimkan konten ke Facebook.
Ada dua cara untuk mengirimkan konten Anda. Pertama, Anda bisa mempostingnya langsung melalui akun Facebook Anda. Di layar Alat Penerbitan , Anda harus menemukan tombol + Buat yang akan mengarahkan Anda ke formulir untuk mengeposkan kode HTML.
Pendekatan kedua melibatkan penyediaan URL Feed yang berisi konten. Pendekatan ini mungkin memerlukan beberapa saat untuk mengaturnya tergantung pada platform yang dibangun situs web Anda. Untungnya, plugin tersedia untuk platform populer seperti WordPress dan Drupal yang membuatnya sedikit lebih mudah untuk mengubah konten Anda menjadi format XML yang sesuai
Meskipun demikian, mengirimkan konten secara manual adalah cara tercepat untuk menerbitkan konten Anda sebagai Artikel Instan, terutama selama tahap awal ini.
5. Pratinjau Artikel
Untuk melihat pratinjau konten yang telah Anda kirimkan, Anda harus menginstal aplikasi mobile Facebook Page Manager. Artikel Instan dapat diakses di menu Settings pada halaman Toolbar.
6. Sesuaikan Gaya Konten
Styling Artikel Instan benar-benar mudah, namun juga membatasi. Facebook menyediakan antarmuka untuk mengubah beberapa komponen artikel seperti keluarga font, warna font, logo, dll. Jika Anda telah membuat gaya kustom, pastikan nama gaya disesuaikan dengan nilai yang ditetapkan dalam
fb:article_style meta tag.
7. Menunggu Hasil Proses Review
Proses peninjauan mungkin memakan waktu hingga tiga hari - dan kiriman Anda mungkin tidak segera diterima. Mungkin ada kesalahan kode atau masalah styling yang mencegah publikasi. Saya pernah harus mengatur ulang posisi header gambar pada sebuah artikel sehingga terlihat lebih mirip dengan yang ada di website.
Namun, setelah Anda disetujui, Anda dapat melanjutkan untuk menambahkan URL Feed untuk secara otomatis mendorong konten ke Artikel Instan.
Membungkus
Artikel Instan Facebook menimbulkan beberapa keterbatasan yang bisa menjadi batu sandungan bagi beberapa situs web. Misalnya, ini tidak mendukung
pre elemen yang merupakan tag umum yang digunakan pada blog pengembangan untuk membuat cuplikan kode. Artikel yang berisi tag ini tidak berlaku sesuai standar Artikel Instan. Untuk alasan ini saja Anda mungkin tidak melihat situs seperti Envato Tuts + atau Smashing Magazine on Instant Articles.
Ini bahkan tidak membahas "harus" dalam semua ini. Seperti yang John Gruber nyatakan, khususnya saat membahas Google AMP:
"Jika Anda adalah penerbit dan halaman web Anda tidak memuat dengan cepat, solusi waras adalah memperbaiki situs web f *** king Anda sehingga halaman dapat memuat dengan cepat, bukan untuk mengangkat tangan ke udara dan menerapkan AMP." - John Gruber
Pekerjaan kami sebagai pengembang web semakin menjadi masalah untuk menjaga konten agar kompatibel di berbagai platform seperti AMP, Instant Articles, dan jika Anda beruntung, juga Apple News (belum lagi bagaimana alur kerja front-end telah berubah secara drastis hanya dengan beberapa tahun dengan munculnya alat baru seperti Webpack, React, Vue, dll.)
Baru-baru ini, pengembang datang dengan inisiatif baru yang diciptakan Progressive Web App (PWA) . Untuk situs yang tidak dapat menerapkan Artikel Instan atau AMP, PWA mungkin merupakan alternatif yang hebat. Kita akan melihat ke dalamnya dalam tutorial berikutnya, saya akan melihat Anda di sana!