Taktik pertumbuhan penerbit untuk musim pilihan raya | WEBINAR
Taktik pertumbuhan penerbit untuk musim pilihan raya | WEBINAR
Selepas membaca panduan ini, anda sepatutnya dapat memahami cara artikel berita sedia ada diubah suai dan dicipta menggunakan reka bentuk susun atur halaman yang meningkatkan keupayaan Google untuk merangkak dan memahami kandungan halaman.
Tempoh Video
15:35
Jawab Kuiz
Ambil kuiz modul semasa
Bahan
Templat sedia untuk digunakan
Sumber
Laporan dan Sumber
2.1.1 Apakah Reka Bentuk dan Susun Atur?
Reka bentuk dan susun atur laman web anda menentukan bagaimana ia kelihatan kepada pengguna akhir. Ini penting kerana Google pada akhirnya didorong oleh falsafah pengguna didahulukan. Laman web yang memenuhi keperluan pengguna dahulu, terpantas dan dengan cara yang paling mudah akan diberi ganjaran dengan kedudukan SERP yang lebih tinggi.
Reka bentuk dan susun atur laman web anda juga menentukan betapa mudahnya perayap web, seperti bot Google, merayapi dan mengindeksnya. Reka bentuk dan susun atur yang ringkas dan dioptimumkan bermaksud perayapan yang pantas dan mudah, yang seterusnya diterjemahkan kepada kedudukan yang lebih baik.
Jadi apa yang menghalang penerbit daripada melaksanakan amalan terbaik reka bentuk dan susun atur? Selalunya, penerbit berhadapan dengan perkara-perkara berikut:
Untuk menjawab soalan ini, kami melakukan carian Google yang mudah dengan memasukkan kata kunci “Charlie Puth News” ke dalam bar carian.
Inilah hasil carian yang dipaparkan:
Di tempat kedua dalam ranking SERP Cerita Teratas, betul-betul di atas sebuah cerita oleh NME, ialah artikel Daily Illini tentang keluaran terbaharu Charlie Puth.
Hakikat bahawa Daily Illini, sebuah akhbar pelajar universiti, mengatasi laman web muzik berdiri sendiri yang terbesar di dunia, menimbulkan beberapa persoalan penting
Bagaimanakah sebuah akhbar pelajar di sebuah bandar dengan kira-kira 40,000 penduduk di bahagian tengah barat Amerika mengatasi laman web berita muzik terbesar di dunia? Tertarik, kami memutuskan untuk mengkaji lebih lanjut.
Mula-mula kami menyemak halaman NME tentang Charlie Puth.
Sejurus selepas itu, perkara pertama yang kami perhatikan ialah video timbul yang cuba dimuatkan di penjuru kanan bawah skrin. Ia jelas tidak melakukan kerja pemuatan yang baik. Video penimbal juga menyembunyikan sebahagian daripada tajuk utama berita dan isinya.
Seterusnya, kita perhatikan bahawa viewport awal kebanyakannya dipenuhi oleh perkara yang tidak berkaitan dengan berita. Terdapat iklan sepanduk besar yang meliputi kira-kira separuh halaman, dan sudah tentu terdapat video.
Malah, apabila menatal ke bawah halaman, kita akan menemui lebih banyak video, lebih banyak imej yang besar dan kaya, lebih banyak iklan timbul dan banyak hiperpautan. Memandangkan halaman tersebut kaya dengan media, tidak hairanlah ia mengambil masa yang agak lama untuk dimuatkan.
Kami seterusnya memeriksa Daily Illini dan inilah yang kami temui.
Halaman ini kemas, bersih dan tidak bersepah. Ia mempunyai iklan tersendiri dan butang Derma yang besar di bahagian atas, tetapi tiada video atau tetingkap timbul yang menutupi paparan atau menghalang tajuk utama berita. Kita dapat melihat tajuk utama dengan segera, dan kemungkinan besar perkara yang sama berlaku untuk perayap web Google.
Secara keseluruhannya, halaman ini ringan, minimalis dan sepantas kilat untuk dimuatkan.
Kami memutuskan untuk mengintip lebih lanjut kod yang mendasarinya. Dengan mengklik kanan pada halaman dan memilih Lihat Sumber (semasa menggunakan Chrome), kita dapat melihat kod halaman tersebut.
Inilah yang kami lihat untuk halaman NME:
Dua perkara menarik perhatian kami di sini:
Ini bukanlah perkara terbaik untuk sesebuah halaman atas dua sebab:
Apabila kami melihat kod untuk halaman Daily Illini, kami melihat ini:
Ini adalah kod HTML yang sangat mudah. Selain itu, tiada skrip yang berjalan dalam<head> bahagian.
Bagaimanakah semua ini menjadikan Daily Illini mengatasi NME?
Mungkin terdapat beberapa faktor yang mempengaruhinya, dan salah satunya ialah reka bentuk dan susun atur. Halaman Daily Illini menggunakan teknik reka bentuk dan susun atur tertentu yang boleh ditiru oleh penerbit kecil sekalipun untuk meningkatkan strategi SEO keseluruhan mereka.
Ini termasuk menggunakan kod HTML yang bersih dan ringkas, mengelakkan skrip di bahagian pengepala, memastikan halaman ringan dan pantas dimuatkan, dan tidak terlalu bergantung pada tetingkap timbul dan iklan pengantara.
Panduan di bawah membincangkan setiap satu secara terperinci, sambil menerangkan beberapa teknik lain yang boleh anda laksanakan untuk meningkatkan kedudukan SERP anda dengan ketara.
Semantik berkaitan dengan makna perkataan. Tag HTML semantik ialah tag yang mentakrifkan maksudnya dengan jelas kepada pembaca dan perayap web.
Contohnya, apabila kita menggunakan tag seperti<header> , kita tahu apa yang terkandung di dalamnya — maklumat tentang pengepala.
Begitu juga<h1> ialah tag semantik yang memberitahu Googlebot bahawa tajuk yang berikut ialah tajuk yang paling penting dalam artikel tersebut.
Sebaliknya, apabila kita menggunakan tag seperti<div> , maksudnya tidak serta-merta jelas. Dalam HTML<div> bermaksud pembahagian, dan ia hanya menyiratkan bahawa bahagian kod baharu telah bermula, tanpa semestinya mendedahkan sebarang maklumat tentang kandungan bahagian ini.
Perayap web seperti Googlebot dibina menggunakan kecerdasan buatan dan algoritma pembelajaran mesin yang cuba mensimulasikan fungsi otak manusia. Ini bermakna ia memahami teks dengan cara yang sama seperti otak manusia.
Kod HTML yang mudah difahami oleh manusia sepatutnya mudah difahami oleh perayap web Google.
Sebagai contoh, pertimbangkan dua keping kod HTML di bawah:
Sumber: https://www.pluralsight.com/guides/semantic-html
Halaman ini menggunakan<div> tag untuk semuanya, daripada pengepala kepada kandungan utama hinggalah ke pengaki. Ia tidak dapat dilihat dengan segera dengan membaca tag apakah kandungannya.
Sebaliknya, halaman di bawah menggunakan penanda semantik. Pengepala diletakkan di dalam<header> tag, pengaki di dalam<footer> tag, dan isi utama artikel berada dalam<main> tag.
Sumber: https://www.pluralsight.com/guides/semantic-html
Memandangkan ini mudah dibaca dan difahami oleh Googlebot, halaman ini mempunyai peluang yang lebih baik untuk berada di kedudukan yang lebih tinggi daripada yang sebelumnya, jika semua perkara lain sama sahaja.
Untuk melihat sama ada halaman anda menggunakan penanda semantik, cuma klik kanan pada halaman tersebut jika anda menggunakan Google Chrome dan klik pada Periksa. Anda akan dapat melihat kod sumber HTML halaman tersebut. Elemen semantik biasa termasuk<author> ,<video> ,<article> ,<form> ,<header> , dsb.
Sekarang kita tahu apa itu Penanda Semantik dan mengapa ia penting. Tetapi bagaimana kita menggunakannya untuk meningkatkan SEO?
Ia mudah — sentiasa gunakan penanda semantik untuk menandakan maklumat penting tentang reka bentuk dan susun atur artikel anda. Ini termasuk maklumat artikel berikut:
Pastikan susun atur halaman anda teratur untuk meningkatkan perayapan
Anda mereka bentuk laman web anda untuk dibaca oleh manusia dan perayap web dan, oleh itu, reka bentuk dan susun atur anda harus mencerminkan fakta ini.
Berikut adalah beberapa petua untuk membantu anda mencapai hasil yang boleh diukur untuk laman web anda.
Anda boleh menggunakan HTML, CSS, Javascript atau mana-mana bahasa frontend lain untuk mencipta halaman yang kaya dan interaktif. Walau bagaimanapun, ingat bahawa semakin maju bahasa tersebut, semakin kompleksnya, dan semakin besar kemungkinan crawler web mungkin sukar untuk membaca, mentafsir dan mengkompilasi.
Apa-apa sahaja yang dikodkan dalam HTML mungkin tidak begitu cantik untuk dilihat, tetapi ia akan dimuatkan dengan lebih pantas dan lebih dioptimumkan untuk enjin carian atas sebab mudah bahawa enjin carian boleh membaca dan memahaminya dengan lebih cepat.
Anggap HTML biasa sebagai rangka asas laman web anda. Anda boleh menambah CSS dan Javascript untuk memperhalusinya dan menjadikannya kelihatan menarik dan dinamik dari segi estetik, tetapi adalah lebih baik untuk mengekalkan kandungan yang paling penting di dalam rangka daripada meletakkannya secara langsung.
Jadi bagaimana kita melaksanakan HTML biasa? Satu cara mudah untuk melakukannya adalah dengan meletakkan isi utama kandungan anda di dalam<article> Tag HTML.
Dengan cara ini, apabila perayap web menghadapi<article> tag, mereka tahu serta-merta bahawa apa yang menyusul adalah kandungan yang paling penting di halaman anda — artikel berita. Ini membantu enjin carian memahami bahawa kandungan yang dibungkus dalam tag ini perlu diberikan pemberat yang lebih besar.
HTML Biasa<article> tag ialah penanda semantik yang kelihatan seperti ini:
Sumber: https://en.wikipedia.org/wiki/Article_element
Soalan seterusnya yang jelas? Jika saya menggunakan CMS seperti WordPress, di manakah saya perlu memasukkan tag ini?
Cara Melakukannya: Jika anda membina laman web tersuai menggunakan HTML, anda boleh menyemak kod sumber untuk memastikan ia menggunakan HTML biasa, terutamanya dalam bidang kritikal. Kami menasihatkan anda bercakap dengan lebih terperinci dengan pembangun untuk memastikan anda tidak menjejaskan fungsi secara tidak sengaja.
Jika anda menggunakan WordPress, sila rujuk panduan ini . Anda juga boleh mendapatkan panduan tentang cara memasukkan HTML ke dalam catatan dan halaman ini sebagai sumber rujukan yang berguna.
Arahan ini adalah untuk WordPress kerana WordPress kekal sebagai CMS paling popular untuk penerbit. Jika anda menggunakan CMS yang berbeza seperti Wix, sila rujuk halaman sokongan atau dokumentasi untuk CMS anda.
Jika anda mempunyai akses kepada pasukan pembangun web, adalah lebih baik jika mereka melakukannya kerana penyuntingan kod HTML boleh memakan masa.
Uji untuk memastikan kandungan anda dipaparkan dengan betul dalam semua pelayar, peranti dan saiz. Yang ini lebih jelas tetapi sering diabaikan. Jika kandungan anda tidak dipaparkan seperti yang anda inginkan merentasi semua pelayar dan peranti, ia akan menjejaskan pengalaman pengguna, dan dalam jangka masa panjang, kedudukan SERP anda.
Cara Melakukannya: Untuk menguji kandungan merentasi platform, anda perlu membuka halaman anda dalam peranti yang berbeza dan dalam pelayar yang berbeza untuk melihat bagaimana ia dipaparkan.
Sekurang-kurangnya, anda harus menguji perkara berikut:
Penanda HTML membantu menyerlahkan elemen berbeza pada halaman anda. Data berstruktur membantu enjin carian membaca apa yang ada di dalam elemen berbeza pada halaman anda dan lebih memahami kandungannya.
Data berstruktur hanyalah satu siri arahan yang ditulis dalam bahasa mudah, seperti JSON-LD, yang boleh dimasukkan ke dalam kod HTML sedia ada pada halaman web anda. Anggapkannya seperti perihalan meta, tetapi untuk setiap kandungan pada halaman anda.
Dalam contoh di bawah, data berstruktur membantu Google mengenal pasti lima atribut tentang halaman dbpedia mengenai John Lennon:
Sumber: https://json-ld.org/
Seperti yang anda lihat, kod tersebut dalam bahasa mudah yang mudah difahami oleh pembaca manusia dan perayap web.
Berikut ialah contoh lain yang menunjukkan bagaimana data berstruktur boleh dimuatkan terus ke dalam kod HTML sedia ada halaman web anda. Arahan data berstruktur diserlahkan dengan warna hijau.
Sumber: developers.google.com
Dalam contoh ini, data berstruktur memberitahu Googlebot bahawa ini ialah halaman resipi tentang kek kopi daripada seseorang bernama Mary Stone.
Menggunakan data berstruktur dalam susun atur laman web anda memberikan hasil yang boleh diukur. Contohnya, menggunakan data berstruktur boleh meningkatkan kadar klik-tayang (CTR) laman web sehingga 30%.
Penggunaan data berstruktur juga membantu kedudukan halaman anda lebih baik pada karusel, coretan pilihan, video dan ciri panel pengetahuan Google.
Untuk SEO Google News, adalah penting untuk memasukkan elemen berikut semasa mencipta data berstruktur untuk memberikan nilai tambahan:
Cara Melakukannya: Anda boleh menambah data/skema berstruktur pada kandungan anda sama ada secara manual atau dengan menggunakan pemalam untuk CMS tertentu anda.
Semua elemen artikel berita anda hendaklah disusun mengikut susunan tertentu untuk membolehkan perayapan yang lebih pantas dan mudah. Susunannya adalah seperti berikut:
Pengalaman halaman ialah ukuran bagaimana pengguna mengalami halaman anda. Google mempunyai satu set parameter untuk mengukur pengalaman halaman. Kami telah mendedikasikan keseluruhan modul kepada faktor pengalaman halaman , jadi kami hanya akan melihat setiap satu secara ringkas di sini.
Cara Melakukannya: Anda boleh menguji pengalaman halaman secara manual dan menggunakan pemalam atau aplikasi pihak ketiga. Contohnya, Page Speed Insights ialah alat berguna yang membantu anda menganalisis prestasi tapak anda berdasarkan CWV dan parameter lain serta memberikan skor berdasarkan analisisnya. Ia juga menguji daya tindak balas mudah alih dan desktop.
Penerbit berita tidak boleh menerbitkan berbilang artikel berita di bawah URL yang sama. Ini akan menghalang Google daripada mengindeksnya. Setiap artikel berita harus mempunyai URL uniknya sendiri.
Tambahan pula, URL ini hendaklah kekal. Ini bermakna berita yang sama hendaklah dipaparkan pada URL tertentu. Jika berita yang dikaitkan dengan URL tertentu kerap berubah, Google tidak akan dapat merangkak dan mengindeksnya. Walau bagaimanapun, penerbit hendaklah mengemas kini berita tersebut sekerap yang diperlukan.
Jika pengalihan perlu digunakan untuk artikel berita, ia harus dilaksanakan mengikut amalan terbaik berikut:
Walaupun item tindakan yang disenaraikan dalam bahagian ini tidak sepenting yang di atas, kami masih mengesyorkan untuk melaksanakan sebanyak mungkin perkara ini setelah perkara kritikal misi yang disenaraikan di atas ditangani.
Yang<head> Elemen halaman mengandungi maklumat penting tentang halaman yang sebenarnya tidak dipaparkan pada halaman tersebut. Apa yang disertakan ialah metadata yang membantu Googlebot mengenal pasti kandungan halaman dan mengklasifikasikannya.
Sebagai peraturan,<head> elemen harus merangkumi hanya tag yang paling penting dan tiada yang lain, supaya siaran boleh dirayapi dan dipaparkan dengan betul. Ini termasuk:
Apa-apa sahaja yang terkandung dalam<head> elemen tersebut berkemungkinan mengelirukan perayap web.
Contohnya, adalah perkara biasa bagi pemula untuk mengelirukan tag tajuk dengan<h1> dan letakkan yang terakhir di dalam<head> elemen. Seperti yang dijelaskan sebelum ini,<head> elemen hanya boleh mengandungi metadata yang tidak dipaparkan pada halaman.
Walaupun tajuk dan<h1> harus mengandungi maklumat yang pada dasarnya sama, yang pertama adalah metadata yang dimaksudkan untuk perayap web dan untuk dipaparkan dalam hasil SERP dan tab pelayar, sementara yang kedua adalah maklumat yang akan dipaparkan pada halaman.
Kod di bawah menunjukkan cara meletakkan tajuk dalam<head> elemen.
Sumber: developer.mozilla.org
Menggunakan elemen halaman yang memudahkan pengimbasan kandungan dan menjadikan navigasi pengalaman yang lancar untuk pengguna juga memberi kesan kepada SEO.
Halaman yang mudah dinavigasi akan mengandungi elemen-elemen ini:
Melainkan anda seorang pembangun web yang berpengalaman, adalah lebih baik untuk berunding dengan pakar tentang cara terbaik untuk melaksanakan UX yang mesra pengguna.
Google mahu penerbit memaparkan iklan tanpa mengganggu pengalaman pengguna. Atas sebab ini, ia mungkin akan mengenakan penalti kepada laman web yang memaparkan terlalu banyak iklan yang mengganggu. Walaupun pengalaman pengguna merupakan metrik subjektif, Google mempunyai garis panduan dan amalan terbaik tertentu berkaitan dengan iklan.
Sebahagian daripadanya berkaitan dengan:
Untuk maklumat lanjut tentang iklan dan tetingkap timbul, rujuk modul terperinci .
Javascript sangat bagus untuk mencipta kandungan yang dinamik dan interaktif tetapi perayap web mungkin mengalami kesukaran untuk memaparkannya.
Ini kerana:
Dengan artikel berita, adalah amalan yang baik untuk mengelakkan gangguan seperti karusel artikel berkaitan atau galeri imej.
Ramai penerbit yang berjaya menjadi bimbang apabila melancarkan semula/mereka bentuk semula laman web mereka, kerana ia memerlukan Google merayapi semula laman web tersebut. Ikuti amalan terbaik ini untuk memastikan peralihan yang lancar kepada normal selepas mereka bentuk semula/melancarkan semula:
Pastikan halaman artikel anda seringan mungkin. Kami telah melihat cara untuk mengelakkan Javascript dalam artikel, tetapi amalan yang baik juga adalah untuk mengelakkan penggunaan kandungan HTML yang berat.
Ini kerana apabila Googlebot merayapi halaman anda, ia hanya boleh memuat turun maksimum 15 MB data halaman dalam perayapan pertama. Bagi kebanyakan halaman, ini bukanlah isu utama kerana item berat seperti video dan imej dirujuk secara berasingan dalam kod yang diindeks oleh Googlebot kemudian, dan oleh itu berada di luar skop had 15 MB ini.
Walau bagaimanapun, ini sekali lagi menunjukkan fakta bahawa semakin cerah halaman anda, semakin mudah Googlebot merangkak dan mengindeksnya.
Petua: Jika anda ingin menyemak saiz halaman anda, pergi ke halaman Alat Pembangun pelayar anda, tukar ke tab Rangkaian, kemudian muat semula halaman tersebut. Ini memaparkan semua permintaan yang dibuat oleh pelayar anda untuk memaparkan halaman sepenuhnya. Permintaan pertama dalam senarai ini menunjukkan saiz halaman anda di bawah lajur Saiz. Bagi kebanyakan halaman di internet, angka ini biasanya dalam kilobait.
Coretan artikel memberi pembaca pratonton kandungan pada halaman sebelum mereka mengkliknya. Google menentukan coretan yang sesuai dengan setiap artikel dengan merangkak teks dalam isi utama artikel betul-betul di bawah tajuk.
Untuk mengelakkan kemungkinan Googlebot memasukkan coretan yang salah, pastikan bahawa:
Kadangkala, Googlebot mungkin gagal mengindeks imej anda atau mengindeks imej yang berbeza daripada yang anda ingin paparkan dengan artikel anda. Untuk mengelakkan perkara ini, ikuti amalan terbaik ini:
Googlebot menggunakan tajuk artikel anda untuk mengenal pasti dan mengindeksnya dengan betul. Gunakan amalan terbaik berikut untuk memastikan ia membaca tajuk anda dengan tepat:
Mari kita lihat dua kajian kes tapak yang telah melaksanakan langkah-langkah yang dibincangkan dalam artikel ini.
Laman web berita moden adalah kompleks dan kaya, dan adalah tidak realistik untuk mengharapkan mereka mematuhi garis panduan ini dengan ketat. Walau bagaimanapun, dalam bahagian ini kami cuba menunjukkan bagaimana mematuhi garis panduan boleh menghasilkan hasil yang boleh diramal dan boleh diukur.
Manly Observer ialah laman web berita hiperlokal yang memenuhi keperluan khalayak di pinggir bandar tepi pantai Sydney, Australia. Berikut ialah rupa artikel berita biasa di laman web ini:
Kita melihat elemen reka bentuk berikut dengan jelas dan nyata pada pandangan pertama:
Melihat seterusnya pada kod HTML halaman, kita dapat melihat penggunaan penanda semantik.
Ini adalah kod yang mudah dibaca oleh manusia. Adalah selamat untuk menganggap bahawa perayap web akan dapat membaca dan mentafsir kod ini dengan mudah.
Laman web ini menggunakan skema https:// dan tiada iklan timbul atau interstisial yang dimuatkan dalam viewport awal.
Usahawan merupakan majalah popular untuk usahawan dan perniagaan. Beginilah rupa laman utamanya.
Laman web ini dimuatkan dengan pantas dan tiada iklan timbul atau video di laman utama itu sendiri. Kebanyakan penempatan iklan berlaku pada artikel berita individu.
Apabila kita klik untuk "lihat sumber", kita akan melihat kod HTML berikut:
Sepintas lalu, kita dapat melihat perkara berikut daripada kod ini:
Semasa kita skrol ke bawah, kita akan melihat elemen kod berikut:
Kita telah membincangkan penggunaan schema.org dan Opengraph (OG) untuk imej. Secara ringkasnya, schema.org dan OG ialah jenis data berstruktur yang membantu perayap web mengenal pasti elemen tertentu kod dengan lebih mudah. Kita melihat schema.org dan OG dilaksanakan di sini.
Lebih jauh ke bawah, kita juga melihat tag data berstruktur seperti yang ditunjukkan di bawah:
Seperti contoh kami sebelum ini, entrepreneur.com juga menggunakan skema https:// dalam pautannya, tidak mempunyai interstisial atau tetingkap timbul yang mengganggu, dan pantas dimuatkan. Artikel berita mengikuti format tajuk, imej, atribusi pengarang, tarikh dan kandungan utama yang ditetapkan. Ini menghasilkan pengalaman halaman yang lebih baik dan seterusnya meningkatkan SEO teknikal.
Selepas mempelajari pelajaran ini, anda sepatutnya dapat menyemak dan mengemas kini halaman berita sedia ada untuk mengoptimumkan reka bentuk dan susun aturnya agar mematuhi amalan terbaik SEO teknikal.
