Cara membuat skrip komentar sederhana. Sistem komentar sederhana menggunakan AJAX. Markup mikro halaman utama

Dalam pelajaran ini saya akan berbicara tentang bagaimana komentar dibuat dalam HTML, CSS, PHP. Komentar adalah teks yang tidak terlihat di halaman web. Mereka digunakan untuk berbagai macam penjelasan, pengingat, dan deskripsi untuk webmaster, yang memungkinkan Anda menyusun dokumen. Komentar sangat diperlukan saat men-debug kode; komentar memungkinkan Anda menavigasi markup halaman web dengan cepat dan menemukan blok yang diinginkan. Komentar sering digunakan untuk men-debug kode HTML. Misalnya, Anda dapat mengomentari sementara blok kode tertentu agar tidak dieksekusi, dan jika perlu, Anda dapat memulihkannya dengan mudah.

Komentar dalam HTML

Dalam HTML, komentar dibentuk menggunakan karakter: . Jadi, teks apa pun di antara karakter-karakter ini adalah komentar. Mari kita lihat sebuah contoh:

Contoh komentar dalam HTML

Komentar di CSS

Komentar di CSS dibuat menggunakan karakter: /* dan */. Untuk membuat komentar, Anda hanya perlu menempatkan kode halaman web di antara karakter berikut:

/* Awal blok dengan gaya untuk Tubuh*/ tubuh ( latar belakang: #efeded; font-family: Verdana, Helvetica, sans-serif; ukuran font: 12px; margin: 0px; padding: 0px; ) /* Akhir dari sebuah blok dengan gaya untuk Tubuh*/Komentar di PHP

Komentar di PHP bisa berupa satu baris atau banyak baris:

1) Komentar satu baris di PHP dibuat menggunakan karakter: //. Cukup letakkan karakter ini di depan baris dan karakter tersebut akan dikomentari. Opsi ini digunakan jika komentar hanya terdiri dari satu baris.

2) Untuk mengimplementasikan komentar multi-baris, digunakan simbol berikut: /* dan */. Opsi ini berguna jika komentar mencakup beberapa baris.

Jadi kami belajar melakukannya

Waktu membaca: 55 menit

Selamat siang semuanya.

Kini telah tiba waktunya untuk materi yang ditunggu-tunggu tentang markup mikro.

Saya akan langsung mengatakan bahwa artikel ini akan cukup sulit untuk dipahami pada awalnya, terutama bagi pemula, karena ada banyak opsi untuk markup mikro dan sulit untuk memahami semuanya sekaligus. Namun saya akan mencoba menggambarkan gambaran keseluruhan dan sekaligus fokus pada hal-hal yang paling penting dan umum.

Materinya cukup banyak, tapi saya harap dapat membantu Anda membuat markup mikro di situs.

Akhir-akhir ini saya memperhatikan banyak orang yang terobsesi dengan mikrodata. Hal ini terjadi setelah berbagai blogger SEO mulai gencar membahasnya. Tapi mari kita cari tahu mengapa ini digunakan dan apakah perlu terlalu memperhatikannya. Apakah game ini layak untuk diperjuangkan?

Apa itu markup mikro dan mengapa diperlukan?

Jika Anda mendengar markup mikro atau markup semantik suatu halaman (situs), ketahuilah bahwa ini berarti menandai halaman menggunakan atribut tambahan (tag), yang memberikan gambaran kepada mesin pencari tentang elemen individual halaman, yang menunjukkan kontennya.

Anda harus memahami bahwa halaman biasa sudah ditandai, tetapi tag dan atribut yang diterima secara umum digunakan. Ini cukup untuk mesin pencari dan banyak situs yang masih eksis dengan cara ini dan berkembang dengan cukup sukses.

Namun, jika kita ingin membantu mesin pencari memahami situs kita, mengarahkan mereka ke area penting halaman, memahami strukturnya, menunjukkan konten dari area tersebut yang pertama-tama perlu diperhatikan, maka perlu diterapkan mikro- markup, yaitu menambahkan tag dan atribut tertentu yang akan menunjukkan segalanya.

Dengan melakukan ini, kami tidak hanya akan membantu mesin pencari, tetapi juga situs kami, karena markup mikro digunakan tidak hanya untuk memahami struktur dan konten situs, tetapi juga untuk membangun hasil pencarian, membentuk cuplikan yang fungsional dan menarik, yang memengaruhi klik- through rate (CTR) situs yang diterbitkan. Dan ini merupakan peningkatan lalu lintas situs secara keseluruhan.

Anda dapat melihat contoh mencolok dari cuplikan tersebut di bawah.

Dalam gambar ini Anda dapat melihat, yang melengkapi dan membuatnya lebih terlihat di antara kumpulan abu-abu situs lain dalam hasil pencarian. Saya juga menggunakan panah untuk menyorot jejak remah roti, yang menunjukkan jalur terstruktur yang jelas ke materi di situs, bukan URL sederhana yang tidak jelas.

Rantai navigasi ini cukup sederhana. Yang harus Anda lakukan adalah menginstalnya di situs.

Berikut ini opsi lain untuk cuplikan kaya.

Opsi yang sama memungkinkan pengunjung untuk segera memahami tentang situs tersebut dan apa yang dapat diberikannya kepadanya. Jika cuplikan dibuat dengan benar dalam hal ini, maka pengguna dapat segera mengambil tindakan yang diperlukan, dan seperti yang kita ketahui, setiap situs harus melakukan tugasnya sendiri (berlangganan, membeli, dll.).

Setuju bahwa cuplikan seperti itu akan lebih terlihat di hasil pencarian daripada deskripsi halaman biasa, karena ukurannya jauh lebih besar. Ya, dan itu terlihat lebih solid.

Sekarang mari kita jawab pertanyaan yang mungkin menjadi perhatian mereka yang berpikir bahwa markup mikro membantu meningkatkan posisi dan merupakan salah satu faktor peringkat.

Apakah markup mikro mempengaruhi peringkat? Haruskah kita mengharapkan peningkatan posisi setelah penerapannya?

Agar tidak menulis alasan kita, mari beralih ke bantuan mesin pencari Yandex. Jadi, apa yang dikatakan Yandex sendiri tentang hal ini? Saya mengutip:

Apakah peringkat situs saya akan lebih baik jika saya menggunakan markup?

Jawaban: Markup dapat membuat situs Anda lebih terlihat di Pencarian Yandex dan dengan demikian menarik lebih banyak pengunjung dari audiens target Anda. Yandex tertarik pada pengguna yang memecahkan masalah mereka menggunakan Pencarian. Salah satu metrik kualitas Penelusuran disebut “kebahagiaan pengguna”. Situs web yang meningkatkan “kebahagiaan” memiliki peringkat lebih tinggi.

Kita dapat menyimpulkan bahwa markup tidak secara langsung mempengaruhi posisi, tetapi hanya secara tidak langsung, karena kita dapat membuat cuplikan yang lebih menarik, yang dengan sendirinya akan mendatangkan lebih banyak pengunjung ke sumber daya. Lalu, ini soal teknik. Lebih banyak pengunjung berarti lebih banyak akumulasi indikator bagus tentang halaman tersebut (jika kontennya berkualitas tinggi) dan posisinya akan meningkat secara bertahap.

Perlu juga dicatat bahwa dengan membantu mesin telusur memahami sifat konten, jenisnya (informasi, rapat, produk, dll.), kami membuat konten lebih relevan dengan kueri penelusuran dan peringkatnya akan lebih tinggi. Mungkin tidak secara langsung, tapi secara tidak langsung - itu sudah pasti. Yandex mengonfirmasi hal ini kepada kami (lihat di atas).

Jadi, mari kita buat daftar singkat tentang manfaat memiliki markup mikro di situs. Inilah poin-poin yang secara tidak langsung atau langsung menunjukkan kualitas situs, meningkatkan posisinya, dan membantu mesin pencari.

  • Pertama, kita dapat menyimpulkan bahwa kepercayaan terhadap situs dari mesin pencari meningkat, karena kita mengarahkan robot pencari ke elemen utama situs, tanpa takut ada yang salah dengan kita dan tanpa berusaha menyembunyikan sesuatu dari robot pencari. Oleh karena itu, masuk akal bagi mesin pencari untuk berpikir bahwa kami membantu mereka dan mengungkapkan kepada mereka “jiwa situs”, yang tentunya akan mempengaruhi kualitas pengindeksan situs, dan pada akhirnya posisinya;
  • Kedua, dengan pengaturan yang tepat, kita dapat menyorot cuplikan kita di hasil pencarian, yang akan menghasilkan peningkatan lalu lintas ke halaman sumber daya secara instan tanpa mengubah posisi. Pada akhirnya, peningkatan lalu lintas akan menyebabkan peningkatan halaman individual dalam hasil pencarian dan situs secara keseluruhan;
  • Ketiga, kami meningkatkan faktor perilaku - RKT dalam hasil pencarian (rasio klik-tayang). Poin ini sangat erat kaitannya dengan poin sebelumnya. Karena semakin banyak orang mengklik situs web kami, itu berarti kami telah membantu pengunjung memahami dengan lebih akurat bahwa halaman kami memiliki kualitas yang lebih tinggi dibandingkan situs lain. Artinya, situs tersebut perlu sedikit ditinggikan di hasil pencarian.
  • Jadi, menurut saya jawaban atas pertanyaan itu telah diberikan.

    Apakah markup diperlukan? - Ya, aku membutuhkannya.

    Tentu saja, jika ada pilihan antara penerapan markup yang menyakitkan di situs dan mengerjakan aspek lainnya, tentu saja Anda tidak boleh hanya fokus pada markup semantik. Lebih baik mengerjakan konten, yang jauh lebih penting daripada beberapa detail teknis di antara ratusan atau ribuan hal lainnya. Selain itu, sekarang Anda dapat menyorot cuplikan Anda di hasil pencarian tanpa memasukkan markup ke dalam template, tetapi hanya dengan menginstal , yang sudah menyediakan markup peringkat.

    Setelah kita mengetahui manfaat utamanya, kita dapat melanjutkan untuk mempertimbangkan jenis utama markup semantik.

    Jenis utama markup mikro

    Semuanya cukup rumit di sini. Pertama, Anda perlu memahami bahwa ada kamus markup mikro dan sintaksisnya.

    Kamus dapat dipahami sebagai bahasa markup mikro yang mencakup sekumpulan kelas dan properti yang menunjukkan esensi konten halaman. Di setiap kamus, setiap elemen situs diidentifikasi menggunakan tag yang berbeda. Misalnya, dalam kamus Schema.org, nama dokumen ditunjukkan menggunakan tag “nama”, tetapi mikroformat menggunakan kelas CSS di dalam blok elemen yang layak diberi markup (Chamomile, di mana fn org adalah judulnya tag dalam kasus ini).

    Setiap kamus dan sintaksis memiliki tag dan atributnya sendiri, yang menjadikan format markup mikro disebut vinaigrette. Sangat sulit untuk memikirkan semuanya.

    Sintaks dipahami sebagai cara penggunaan bahasa tertentu (kamus) markup semantik. Sintaksnya menentukan tag mana yang akan digunakan untuk menunjukkan esensi objek dan propertinya di halaman.

    Dari definisi sebelumnya tentang sintaksis, diperkenalkan konsep esensi. Apa maksudnya hal ini dapat diterapkan pada permasalahan yang ada?

    Entitas - sederhananya, ini adalah jenis informasi (unit konten, informasi) yang kami arahkan ke mesin pencari. Misalnya kita perlu menunjuk pengumuman di halaman utama blog, yaitu menyorot esensi area ini dengan beberapa tag, mendefinisikannya sebagai area pengumuman. Hal yang sama juga perlu dilakukan pada halaman postingan, di mana Anda perlu menunjukkan esensi area tempat konten (artikel) berada, yaitu menyorot teks sebagai area konten.

    Untuk hampir setiap elemen halaman, Anda dapat menentukan esensinya, yaitu menunjukkan apa itu: konten atau peringkat, atau komentar secara umum. Dengan cara ini, entitas dapat ditentukan pada halaman tersebut (saya akan mengambil template blog sederhana seperti milik saya sebagai contoh):

    • Beranda - daftar pengumuman;
    • Halaman postingan - komentar, konten, peringkat (jika tersedia), remah roti;
    • Halaman statis biasa - konten, komentar (jika ada).

    Selain itu, pada setiap jenis halaman Anda dapat menentukan elemen yang sama - header situs, footer (footer), sidebar (kolom samping), menu utama.

    Setiap entitas memiliki propertinya sendiri, misalnya:

    • Area konten pada halaman postingan - judul artikel, teks artikel, deskripsi, nama penulis artikel, tanggal publikasi, kategori, gambar, video dan lain-lain;
    • Area daftar pengumuman pada halaman utama, bagian dan arsip adalah sama;
    • Area komentar - nama komentator, tanggal, teks komentar;
    • Area konten pada halaman statis biasa pada dasarnya sama dengan di postingan;
    • Area header situs - judul, deskripsi;
    • Area peringkat di halaman - peringkat maksimum, peringkat saat ini, jumlah peringkat.
    • Area footer (footer situs) - tahun hak cipta;
    • Area sidebar (kolom samping) - nama widget;
    • Area menu utama - tautan.

    Ada area lain dengan properti, tetapi saya tidak akan mempertimbangkannya, karena di setiap kamus markup ada beberapa lusin properti, dan di markup dari skema.org jumlahnya umumnya ratusan.

    Kami akan melihat tag dan atribut apa yang digunakan untuk menunjukkan entitas dan properti masing-masing di bagian praktis artikel ini.

    Sekarang mari kita beralih ke gagasan utama paragraf dan mempertimbangkan format utama markup semantik. Daftar singkat kosakata dasar dan sintaksisnya dapat dilihat pada peta pikiran di bawah ini.

    Kami tidak akan mempertimbangkan semua kamus dan sintaksis, karena ini tidak ada gunanya. Anda tidak akan membutuhkannya. Mari kita bahas secara singkat format markup utama:

    • Skema.org;
    • Grafik Terbuka;
    • Mikroformat.

    Kami akan membahas beberapa sisanya sedikit.


    Langkah terakhir yang perlu diperhatikan adalah kamus lain yaitu Data Vocabulary yang dikembangkan oleh Google dan kini pengembangannya telah dihentikan. Semua perhatian dialihkan ke Schema.org. Kita dapat mengatakan bahwa semua properti dan entitas yang ada dalam bahasa markup ini menjadi prototipe markup dari skema.org.

    Sejauh yang saya pahami, kamus Kosakata Data dapat bekerja dengan sintaksis: microdata dan bahasa RDF, yang dapat dilihat dengan sangat jelas di bantuan Google pada materi markup mikro remah roti. Ada 2 opsi penandaan:

  • Penandaan Kosakata Data dengan microdata;
  • Markup Kosakata Data dengan RDFa.
  • Aku akan maju sedikit. Pada gambar pertama Anda dapat melihat bahwa mikrodata dari Schema.org digunakan bersama dengan Data Vocabulary. Faktanya adalah remah roti dengan skema belum didukung. Oleh karena itu, opsi gabungan digunakan.

    Format markup mana yang terbaik untuk digunakan?

    Saya rasa Anda sudah mengetahui jawaban atas pertanyaan ini, karena dalam uraian setiap jenis markup saya memberikan argumen yang tidak dapat disangkal bahwa mesin pencari sendiri merekomendasikan kamus markup Schema.org. Inilah yang perlu Anda gunakan. Namun ada banyak opsi untuk mengimplementasikan markup mikro ini, baik dari plugin maupun pengenalan entitas dan properti ke dalam template desain.

    Opsi terakhir adalah yang paling optimal, karena ini adalah pekerjaan satu kali dan markup mikro akan ada di setiap halaman. Semua mesin pencari akan melihatnya, karena akan dimasukkan ke dalam template. Namun pemula mungkin mengalami kesulitan dalam mengimplementasikannya, karena mereka perlu memahami kode template mereka setidaknya pada tingkat dasar minimum dan melihat tag apa yang menampilkan judul artikel, di mana kode untuk menampilkan teks, dan sebagainya. Semua momen ini perlu dibungkus dengan tag markup mikro.

    Poin ini juga mengangkat isu penggabungan kamus yang berbeda dalam satu situs. Hal ini dapat diterima dan dalam beberapa kasus tidak dapat dihindari. Hal ini terlihat jelas pada contoh markup runut tautan, ketika varian markup Kosakata Data dan markup mikrodata dari Schema.org digabungkan. Tidak ada yang salah dengan itu. Yandex sendiri membicarakan hal ini.

    Terserah pada kebijaksanaan Anda. Jika Anda merasa lebih mudah menggunakan mikroformat, lakukanlah. Saya pribadi akan menunjukkan seluruh proses pada markup mikro Schema.org, karena saya sendiri telah mengimplementasikannya dan semuanya bekerja dengan baik tanpa satu kesalahan pun.

    Cara memeriksa keberadaan markup pada suatu website

    Tugas kita pada tahap ini adalah mencari tahu apakah template kita memiliki semacam format markup. Hal ini sangat mungkin terjadi, karena sebagian besar template yang digunakan merupakan tema terjemahan berbahasa Inggris yang sudah memuat semacam format markup semantik. Biasanya, ini adalah markup dalam mikroformat, yang tidak berguna sama sekali bagi kami. Sebaiknya tidak ada pada awalnya, karena ini akan menyelamatkan kita dari sakit kepala saat dilepas.

    Untuk memeriksa keberadaan markup, Anda dapat menggunakan validator markup mikro dari Yandex dan alat verifikasi data terstruktur Google. Saya lebih suka dan sangat menyarankan Anda menggunakan validator Yandex, karena jauh lebih sederhana.

    Setelah masuk ke validator Yandex, kita masukkan alamat halaman dan klik "Periksa".

    Jika tertulis “Markup mikro tidak terdeteksi”, berarti tidak ada markup pihak ketiga di template. Ini sangat bagus, karena Anda tidak perlu membuang-buang tenaga untuk menghapusnya. Namun hati-hati, karena pada satu jenis halaman mungkin tidak ada markup, tetapi pada jenis halaman lain akan ada markup (misalnya pada halaman artikel).

    Jadi, saya menganalisis halaman postingan dan ternyata komentar template ditandai dalam mikroformat (ada vcard). Hal ini dibuktikan dengan kode yang berbeda-beda pada hasil scan.

    Kami tidak memerlukan mikroformat, jadi kami harus menghapusnya. Mungkin saja templat Anda diberi markup dalam format markup lain. Kemudian mereka juga harus disingkirkan. Dan kemungkinan markup dari Schema.org akan segera diterapkan. Ini juga terjadi, tetapi sangat jarang, karena praktis tidak ada template bermanfaat yang tersedia secara gratis. Tapi yang buruk jumlahnya sangat sedikit.

    Sekarang mari kita lihat proses menghapus markup pihak ketiga.

    Menghapus markup pihak ketiga

    Karena dalam kasus saya ternyata markup pihak ketiga menggunakan mikroformat, saya akan menggunakan contohnya untuk menunjukkan proses ini. Jika Anda memiliki markup lain, maka prinsip menghapusnya akan serupa.

    Semuanya bermuara pada menghapus tag dan atributnya dari markup yang Anda miliki. Satu-satunya perbedaan antara mikroformat dan jenis markup mikro lainnya adalah bahwa semua jenis kecuali mikroformat menambahkan tag dan atribut baru. Mikroformat tidak menambahkan apa pun tetapi ditulis di dalam atribut kelas dari elemen templat html tertentu (misalnya, judul artikel), seperti yang saya tulis di paragraf tentang tipe utama.

    Omong-omong, pada poin nomor 6 artikel ini saya memberikan kode markup komentar yang perlu dimasukkan ke dalam file fungsi template function.php. Kode ini seharusnya mengatasi kesalahan ini dari markup mikroformat pihak ketiga. Oleh karena itu, jika Anda mengalami masalah ini, saya sarankan untuk memeriksa dulu kode tersebut pada template Anda. Dia harus membantu. Ini akan menghemat pekerjaan pembuangan manual yang tidak perlu. Jika tidak ada yang berhasil, maka kami melakukan semuanya dengan tangan, seperti yang saya jelaskan di bawah.

    Sekarang mari kita beralih ke proses itu sendiri. Jadi, sebelumnya menjadi jelas bahwa saya memiliki markup tambahan dari mikroformat. Saat memeriksa validator, kami diberi tag vcard, yang menimbulkan kesalahan.

    Sekarang kita perlu membuka folder dengan template untuk melihat semua file-nya dan kemudian kita beralih ke file-file yang bertanggung jawab untuk menampilkan elemen-elemen di mana mikroformat berada. Cara melakukannya, lihat daftar di bawah ini:

    Saya harap saya menjelaskannya dengan cukup sederhana. Meskipun demikian, seorang pemula mungkin memiliki lebih banyak kebingungan di kepalanya.

    Ini adalah tampilan awal potongan kode dengan vcard di file template saya.

    Setelah diubah menjadi seperti ini.

    Saya juga membuat perubahan pada gaya.

    Sekarang tidak ada mikroformat dan desainnya tetap dipertahankan dalam keadaan aslinya.

    Jadi, ketika kita telah menghapus markup standar (jika ada), kita dapat menyematkan markup baru dari Schema.org. Kami memulai proses ini.

    Menerapkan markup mikro Schema.org

    Mari kita mulai dengan sedikit penjelasan dan teori, karena Anda harus selalu mempersiapkan diri sebelum berlatih.

    Pertama, ada baiknya mencari tahu file apa yang perlu kita arahkan ke entitas yang diperlukan dan propertinya. Sekarang saya berbicara tentang file untuk mesin WordPress. Saya tidak akan mengatakan apa pun tentang mesin lain, karena saya tidak mengerjakannya. Prinsip penandaannya tetap sama. Anda hanya perlu menentukan file di mana area yang diperlukan untuk penandaan berada.

    • File single.php (file rekaman): entitas - area konten (artikel), properti - tanggal publikasi, penulis, kategori, judul artikel, gambar;
    • File Functions.php (dalam kasus saya - markup kode komentar): entitas - komentar, properti - teks komentar, tanggal dan nama komentator;
    • File dengan daftar pengumuman index.php, kategori.php, archive.php (masing-masing utama, kategori dan arsip): entitas - daftar pengumuman, properti - tanggal publikasi, penulis, kategori, judul artikel;
    • File page.php (halaman statis biasa - opsional): entitas - area konten, properti - judul teks dan, jika tersedia, tanggal, penulis, dan lainnya;
    • Di file header.php, tandai juga header - entitas akan menjadi header, dan propertinya akan menjadi judul situs + deskripsi;
    • File sidebar.php (sidebar): entitas - seluruh sidebar, properti - judul setiap widget;
    • File footer.php (footer situs): entitas - seluruh footer, properti - tanggal hak cipta + nama situs (saya tidak menandai namanya);
    • File header.php (bagian atas sumber daya): entitas - menu navigasi utama, properti - tautan + jangkarnya.

    Sekarang tentang tag dan atribut yang sesuai dengan setiap jenis entitas dan properti terkaitnya. Pertama tentang entitas.

    /***Daftar pengumuman***/ itemscope itemtype="http://schema.org/BlogPosting" /***Posting konten halaman***/ itemscope itemtype="http://schema.org/Article" / ***Komentar***/ itemprop="comment" itemscope itemtype="http://schema.org/Comment" /***Halaman statis biasa***/ itemscope itemtype="http://schema.org / Artikel" /***Bilah Samping (bilah samping)***/ itemscope itemtype="http://schema.org/WPSideBar"> /***Footer (footer situs)***/ itemscope itemtype="http:/ /schema.org/WPFooter"> /***Navigasi Situs (menu utama)***/ itemscope itemtype="http://schema.org/SiteNavigationElement"> /***Images***/ itemscope="" itemtype="https://schema.org/ImageObject" /***Tautan permanen ke halaman***/ itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" /***Organization * **/ itemscope itemtype="https://schema.org/Organization" /***Address***/ itemscope itemtype="http://schema.org/PostalAddress"

    Sekarang tag properti.

    • Judul halaman (teks) - itemprop="headline"
    • Teks entri - itemprop="articleBody" (juga dapat digunakan untuk deskripsi jika dibentuk sebagai bagian dari teks lengkap)
    • Tanggal publikasi - itemprop="datePublished"
    • Penulis - itemprop="penulis"
    • Kategori artikel - itemprop="articleSection"
    • Gambar - itemprop="gambar"
    • Teks komentar - itemprop="teks"
    • Nama komentator - itemprop="creator"
    • Tanggal komentar - itemprop="datePublished"
    • Tautan (berlaku untuk menu utama dan gambar) - itemprop="url"
    • Tahun hak cipta di footer - itemprop="copyrightYear"
    • Tanggal halaman terakhir diubah - itemprop="dateModified"
    • Alamat - itemprop="alamat"
    • Jalan - itemprop="alamat jalan"
    • Indeks - itemprop="kode pos"
    • Lokasi alamat - itemprop="addressLocality"
    • Telepon - itemprop="telepon"
    • Panjang gambar - itemprop="lebar"
    • Lebar gambar - itemprop="tinggi"
    • Logo - itemprop="logo"

    Ini adalah properti utama yang sekarang akan kita gunakan.

    Langkah selanjutnya untuk menandai template cukup sederhana.

    Setiap area yang perlu mendefinisikan entitas dan properti menggunakan tag yang disediakan di atas dibungkus dalam beberapa jenis tag umum. Ini bisa berupa tag blok div, tag artikel, tag span, header H1, dan lain-lain. Agar lebih mudah dipahami, judul hampir selalu dibungkus dengan tag H1, sebagaimana mestinya. Akan ada 2 tag: pembuka dan penutup. Begitu pula dengan setiap elemen situs, dan bukan hanya headernya saja.

    Idenya adalah bahwa setiap elemen yang diperlukan perlu diberi tag entitas (tentukan tipe konten: artikel atau komentar, atau daftar pengumuman, dll.) dan properti di dalam tag pembukanya.

    Sekarang berlatih. Misalnya ada file single post (artikel) single.php. Mari kita mulai dengan penandaannya.

    Markup mikro pada sebuah postingan (artikel)

    Mari kita mulai dengan mendefinisikan entitas. Template memiliki tag umum yang membungkus seluruh area konten postingan (baik teks artikel maupun judul dan komentar) dan berbeda untuk setiap orang. Bagi sebagian orang, ini mungkin blok div. Saya punya artikel ini. Biasanya, tag ini terbuka di awal, tempat semua konten dimulai, dan berakhir di suatu tempat saat konten berakhir.

    Dan di awal, di dalam tag artikel pembuka, saya perlu memasukkan tag entitas area konten di halaman posting (saya memberikan kodenya sedikit lebih tinggi). Saya akan memberi Anda gambar (dapat diklik) dari markup akhir file rekaman single.php, dan kemudian saya akan menjelaskan apa yang terjadi dan apa yang terjadi pada akhirnya, jika tidak jelas bagi siapa pun. Gambarnya besar, namun dapat diklik, sehingga Anda dapat mengekliknya dan melihatnya dalam ukuran lebih besar, atau membukanya di tab baru dan melihatnya dalam ukuran penuh.

    Awalnya, seluruh area konten postingan dibuka menggunakan tag artikel. Itu seperti ini:

    Dan menjadi seperti ini:

    Seperti yang Anda lihat, tag entitas postingan disertakan di dalam tag artikel pembuka. Sekarang robot pencari akan mengerti bahwa ini adalah area yang berisi konten. Akan menganggap area ini sebagai objek. Ini sangat penting.

    Omong-omong. Banyak orang menetapkan peringkat artikel tanpa plugin, dan setelah memeriksa halaman di validator Yandex atau Google, mereka diberitahu bahwa objek ulasan tidak ditentukan. Hal ini disebabkan oleh fakta bahwa peringkat tersebut diposting sendiri. Anda perlu menempatkannya di dalam area ini, yang selanjutnya harus ditentukan oleh tag markup sebagai area konten (atau objek ulasan). Maka rating tersebut akan menjadi milik objeknya, yaitu artikelnya. Setelah ini tidak akan ada kesalahan.

    Mari kita kembali ke prosesnya. Pertama, kami menempatkan esensi objek (kami membungkus seluruh area utama dengan tag umum), dan kemudian kami menandai propertinya, yaitu data sekunder: tanggal publikasi, penulis, isi artikel (teks itu sendiri) , informasi tentang penerbit (alamat, organisasi, logo), tanggal perubahan halaman terakhir, alamat halaman beranda, dan sebagainya. Semuanya persis sama - di dalam setiap tag pembuka elemen yang diperlukan, kami menunjukkan parameter yang sesuai. Di bawah ini saya berikan penjelasan apa yang terjadi sebelum perubahan dilakukan dan apa yang terjadi setelahnya.

    Awalnya kita copy 2 baris kode tepat setelah tag pembuka yang membungkus seluruh area konten. Bagi saya ini adalah tag artikel dengan entitas di dalamnya yang ditempatkan sebelumnya di teks.

    Tanggal penerbitan. Apakah:

    Konstantin Khmelev

    Konstantin Khmelev

    ".$nama_kategori_saat ini."

    ".$nama_kategori_saat ini."

    Teks artikel. Apakah:

    ini kode pihak ketiga

    ini kode pihak ketiga

    Anda sendiri harus melakukan hal yang hampir sama. Satu-satunya perbedaan adalah pada tag, di dalamnya Anda perlu menempatkan tag entitas dan properti. Urutannya mungkin juga berbeda. Atau bisa juga ada yang tidak ada sama sekali, misalnya tidak ada tanggal publikasi atau link ke kategori tersebut. Kemudian Anda harus menambahkan data ini ke template.

    Di paragraf kedua dari belakang artikel, saya akan memberikan kode yang dapat Anda gunakan jika Anda tiba-tiba melewatkan sesuatu.

    Jadi, sekarang kita harus memeriksa halaman kita di validator Yandex dan Google.

    Di validator Google akan hampir sama. Seharusnya tidak ada kesalahan dalam data ini. Satu-satunya nuansa terkait dengan penandaan mikro pada gambar, yang akan kita lanjutkan.

    Anda dapat menandai setiap gambar secara manual, menggabungkannya dengan inti gambar dan menentukan properti yang diperlukan, tetapi ini cukup merepotkan bila ada beberapa lusin gambar di setiap postingan. Mari gunakan kode berikut.

    Fungsi micro_images_captions ($a , $attr, $content = null)( ekstrak(shortcode_atts(array("id" => "", "align" => "alignnone", "width" => "", "caption" = > ""), $attr)); if (1 > (int) $width || kosong($caption)) mengembalikan $content; $caption = html_entity_decode($caption); ="" .esc_attr($id) . "" "; kembalikan "" .do_shortcode($konten) . "

    " .$caption ."

    ";) fungsi micro_image($isi) ( $ar_mk = "! !si"; $br_mk = " "; $konten = preg_replace($ar_mk, $br_mk, $konten); kembalikan $konten; ) add_filter("the_content", "micro_image"); add_filter("img_caption_shortcode", "micro_images_captions", 10, 3);

    Sekarang Anda tidak perlu menambahkan tag markup gambar ke setiap artikel. Kami pergi ke validator, memeriksa halaman dengan setidaknya satu gambar, dan melihat gambar berikutnya.

    Seharusnya tidak ada kesalahan. Semuanya jelas. Setiap gambar harus dibungkus dengan markup, seperti pada gambar di atas.

    Markup mikro halaman utama

    Di sini Anda perlu menggabungkan kode yang menampilkan daftar pengumuman dengan tag entitas dari daftar pengumuman. Hal ini dilakukan dengan cara yang persis sama. Di dalam tag umum yang membungkus semua kode dalam template, kita tempatkan tag yang diinginkan (inti dari daftar postingan blog adalah blogposting, atau bisa juga dianalogikan dengan halaman postingan -artikel). Lihat gambar (dapat diklik).

    Seperti yang Anda lihat, daftar pengumuman saya ditampilkan menggunakan tag li list, yaitu setiap pengumuman terlampir di dalamnya. Di dalam daftarnya hampir sama dengan di dalam entri itu sendiri - ada tanggal, nama penulis, judul bagian, alamat, logo, penerbit, dan sebagainya. Anda dapat dengan jelas melihat ini di halaman blog. Strukturnya mirip, hanya teks artikelnya yang belum lengkap. Secara umum markupnya sama persis dengan halaman postingan, kecuali tag entitas pengumuman blogposting.

    Anda juga perlu menggunakan kode markup gambar yang sedikit berbeda untuk halaman pengumuman, karena ini tidak hanya menampilkan gambar, tetapi juga thumbnail. Penandaan mikro pada thumbnail akan dilakukan menggunakan kode yang hampir serupa. Jika sebelumnya harus ditandai dengan tangan, kini tidak ada gunanya lagi. Ini kodenya (kami juga menempatkannya di file fungsi.php).

    Fungsi micro_thumbnail($content) ( $ar = "!!si"; $br = ""; $content = preg_replace($ar, $br, $content); return $content; ) add_filter("post_thumbnail_html", "micro_thumbnail ");

    Kami menghubungi validator dan memeriksa halaman beranda. Saya hanya menunjukkan 2 pengumuman, karena... Layar penuh akan menjadi sangat besar.

    Jumlah entri blogposting tersebut sama banyaknya dengan jumlah pengumuman di halaman ini. Jika Anda menggunakan artikel daripada posting blog, maka Anda akan memiliki beberapa artikel tergantung pada jumlah pengumuman.

    Karena halaman utama memiliki struktur yang mirip dengan halaman bagian dan arsip, markup mikronya identik.

    Daftar pengumuman ditampilkan di semua jenis halaman.

    Jadi, komentar. Mari kita sederhanakan tugas dengan memasukkan satu kode ke dalam file function.php dan memodifikasi fungsi yang menampilkan komentar di halaman situs. Pertama, ambil kode berikut dan letakkan di dalam file function.php di awal, tepat sebelum tag pembuka< ?php. Если будет выдавать ошибку, можно попробовать его разместить после закрывающего тега?>di akhir file.

    Ada juga opsi penempatan ketika Anda perlu menghapus pembukaan kode php dalam kode ini di awal (hapus< ?php) и в самом конце его закрытие (удалить?>). Maka Anda perlu menempatkan kode tersebut bukan sebelum atau sesudah tag pembuka (penutup) php, tetapi di dalam tag ini di samping semua fungsi lainnya. Terkadang saya mengalami masalah saat opsi penempatan khusus ini berfungsi.

    Kode ini tidak berfungsi pada semua templat!

    id="komentar-">

    Garis keluaran lengkap dari fungsi ini mungkin berbeda, tetapi esensinya sama. Seharusnya ada comments_number di dalamnya.

    Bagi saya, fungsi ini memiliki bentuk lengkap berikut dengan tag pembungkusnya.

    < ?php comments_number("Комментариев пока нет. Будьте первым!","1 Комментарий","Комментариев: %") ?>

    Bergantung pada templatnya, Anda perlu menemukan lokasi fungsinya. Biasanya, semuanya ada di file comments.php yang sama. Di template saya, fungsi ini terletak di file entri tunggal single.php sebelum menampilkan formulir komentar. Karena fungsi saya dibungkus dengan tag teks span, saya memasukkan properti commentCount di dalamnya.

    Kami menghubungi validator.

    Penting. Anda hanya perlu membungkus sejumlah komentar tanpa ada tulisan atau kata-kata. Markup hanya menerima angka!

    Perhatian: Saya bukan penulis fungsinya. Fungsi untuk menandai komentar dan gambar secara otomatis diambil dari situs http://seo-mayak.com/. Saya baru saja mengubah nama sedikit + mengoreksi sesuatu di suatu tempat.

    Markup mikro dari header situs

    Buka file header.php template desain dan cari tag header pembuka. Kami menempelkan di dalamnya:

    Itemscope itemtype="http://schema.org/WPHeader"

    • Judul - itemprop="judul"
    • Deskripsi - itemprop="deskripsi"

    Ini adalah versi selesai pada gambar.

    Ini akan ditampilkan di validator seperti ini.

    Markup mikro sidebar (kolom samping).

    Semuanya juga sederhana di sini. Buka file yang bertanggung jawab untuk menampilkan kolom samping, biasanya sidebar.php. Kami menemukan blok atau tag yang membungkus seluruh konten dari seluruh kolom samping dan di dalamnya kami menempatkan tag entitas yang sesuai dengan sidebar.

    Register_sidebar(array("name" => __("Area untuk memasukkan widget ke sidebar", "xmarkup"), "id" => "area widget utama", "deskripsi" => __("", " xmarkup"), "before_widget" => "", "after_widget" => "", "before_title" => "", "after_title" => "",));

    Yang menarik adalah 2 baris terakhir (before_title dan after_title), yang masing-masing menentukan apa yang akan ditampilkan sebelum dan sesudah judul widget. Seperti yang Anda lihat, saya telah menunjukkan bahwa akan ada tag teks span sebelum dan sesudah. Anda mungkin memiliki sesuatu yang kosong di sana atau beberapa tag lain, seperti tag blok div. Jika kosong, saya sarankan menambahkan tag span yang mirip dengan versi saya dan menentukan properti nama (itemprop="nama") di dalam tag pembuka (baris sebelum_judul). Anda akan mendapatkan konstruksi berikut:

    Register_sidebar(array("name" => __("Area untuk memasukkan widget ke sidebar", "xmarkup"), "id" => "area widget utama", "deskripsi" => __("", " xmarkup"), "before_widget" => "", "after_widget" => "", "before_title" => "", "after_title" => "",));

    Tergantung pada templatnya, mungkin ada beberapa bagian kode seperti itu. Kemudian semua bagian perlu diselesaikan. Setelah perubahan, kami memeriksa markup sidebar melalui validator Yandex dan gambar berikut akan diperoleh.

    Tergantung pada jumlah widget, jumlah baris yang sesuai akan ditampilkan saat pemeriksaan.

    Penandaan mikro footer (footer).

    Buka file footer.php dan cari blok umum yang membungkus seluruh isi footer, termasuk hak cipta. Di dalam tag pembuka kita menempatkan tag entitas itemscope itemtype="http://schema.org/WPFooter".

    Dan di dalam tag pembuka yang berisi tanggal hak cipta, kita menempatkan tag properti itemprop="copyrightYear".

    Sangat penting bahwa di dalam tag CopyrightYear hanya terdapat tanggal dalam bentuk angka. Tidak ada kata atau simbol asing, jika tidak maka akan menghasilkan kesalahan.

    Dalam kondisi berfungsi, Anda akan melihat yang berikut ini di validator.

    Markup mikro dari menu navigasi utama

    Di sini juga, semuanya sangat sederhana, tetapi opsi ini tidak akan berfungsi untuk semua orang, karena struktur pembuatan dan tampilan menu dalam templat berbeda.

    Kode yang menampilkan menu ada pada file header.php. Kami pergi ke sana dan mencari konten berikut:

    < ?php wp_nav_menu(array("theme_location" =>"header-menu-top","container" => "")); ?>

    Garisnya mungkin sedikit berbeda. Hal utama adalah menemukan baris yang menyertakan wp_nav_menu. Itu akan dibungkus dengan tag. Bagi saya dan sebagian besar topik lainnya, prinsipnya serupa. Tag navigasi digunakan. Di dalam tag nav pembuka kita menyisipkan tag yang menunjukkan inti dari elemen ini, yaitu menu utama:

    Itemscope itemtype="http://schema.org/SiteNavigationElement"

    Selanjutnya, Anda harus memastikan bahwa atribut itemprop="url" ditambahkan ke setiap link di menu, yang akan menunjukkan bahwa ini adalah link. Jika Anda memiliki situs sederhana di mana setiap item menu dibuat dengan tangan, terapkan atribut ini di dalam tag setiap tautan. Jika Anda memiliki situs web di WordPress dan menunya dibentuk dalam file fungsi.php dengan cara standar, Anda harus menempatkan kode berikut dalam file yang sama, yang secara otomatis akan memasukkan atribut ini ke setiap item menu.

    Fungsi navigasi($isi) ( $pola = "

    • Sergei Savenkov

      semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat