Cara menggunakan amp dengan wordpress

mata teras

Google dipercepatkan halaman mudah alih (amp) adalah alat utama untuk meningkatkan kelajuan laman web dan pengalaman pengguna pada peranti mudah alih tanpa menjejaskan pendapatan pengiklanan.
amp boleh meningkatkan kedudukan SEO kerana Google menganggap kelajuan pemuatan apabila laman web ranking. Jika halaman amp mempunyai kadar klik yang lebih tinggi dan kadar lantunan yang lebih rendah kerana beban yang lebih cepat, mereka akan berpangkat lebih tinggi.
Untuk melaksanakan AMP, pemaju perlu membuat dua versi laman web: satu versi asal untuk pengguna desktop dan satu versi amp untuk pengguna mudah alih. AMP tidak membenarkan elemen bentuk dan JavaScript pihak ketiga, jadi ciri-ciri tertentu mungkin tidak tersedia untuk versi AMP, seperti borang hubungan atau komen dalam halaman.
Google Analytics boleh diintegrasikan dengan AMP untuk menjejaki prestasi laman web. Untuk mengelakkan pelbagai pelacak analisis daripada menyebabkan titisan kelajuan, Google menggunakan prinsip "satu pengukuran, pelbagai laporan".
Plugin AMP rasmi yang dibangunkan menggunakan automatik/WordPress dengan mudah boleh mengintegrasikan AMP ke laman web WordPress. Walau bagaimanapun, pastikan anda mengesahkan setiap halaman dan ubah suai plugin untuk memastikan penandaan skema yang betul dan integrasi Google Analytics.

Projek Mudah Alih Mudah Alih Google (AMP) dilancarkan pada 24 Februari 2016. Dengan pelancaran ini, beribu -ribu pemaju menjadi peserta aktif dalam projek itu. Laman web yang tak terhitung jumlahnya kini mempunyai halaman versi amp, dan banyak pemaju belajar menggunakan amp - dalam kes ini, belajar cara menggunakan amp di WordPress.

Google melekat pada amp. Ia juga merupakan salah satu kriteria ranking enjin carian mereka. Dengan cara ini, Google membuat amp keperluan untuk banyak laman web. Dalam artikel ini, saya akan memberikan anda maklumat terperinci mengenai projek halaman mudah alih yang dipercepatkan Google. Ini termasuk langkah -langkah untuk memanggilnya di laman WordPress anda.

Apa itu amp?

Beberapa pemaju mungkin tidak biasa dengan amp. Ia adalah rangka kerja mesra mudah alih yang cepat memuatkan laman web anda pada pelayar mudah alih. Ia adalah teknologi sumber terbuka yang direka untuk membolehkan penerbit laman web untuk meningkatkan kelajuan dan pengalaman pengguna untuk memuatkan halaman kandungan pada peranti mudah alih. Semua peningkatan ini tidak akan menjejaskan pendapatan pengiklanan.

Jika anda seorang pemaju yang berpengalaman, anda boleh mencapai peningkatan yang sama dengan pengoptimuman pemuatan halaman yang komprehensif. Walau bagaimanapun, mempercepatkan halaman mudah alih menjadikan pengoptimuman ini sangat mudah dilakukan tanpa menghabiskan terlalu banyak masa dan usaha pada susun atur mudah alih.

Bagi laman web yang telah menggandakan kedudukan SEO mereka, ini pasti akan menambah lebih banyak tugas pada senarai tugasan mereka, kerana halaman AMP juga dapat meningkatkan kedudukan SEO laman web anda. Ini mungkin sebab utama mengapa syarikat besar juga mengadopsi amp.

Projek amp

amp mengandungi tiga komponen utama:

• amp html
• amp JS
• amp cache

amp html

Ia adalah subset HTML dengan banyak batasan, tag tersuai, dan sifat tersuai. Jika anda sudah biasa dengan HTML, ia tidak rumit untuk menyesuaikan diri dengan ini. Walau bagaimanapun, jika anda mendapati sebarang kesukaran, saya cadangkan anda melawat pautan ini untuk mengetahui lebih lanjut mengenai cara membuat halaman HTML AMP anda.

amp JS

amp menyediakan bilangan JavaScript yang terhad untuk laman web mudah alih. Sekarang, satu perkara penting untuk diingat tentang JS di amp ialah amp tidak membenarkan JavaScript pihak ketiga.

amp cache

Google Amp Cache adalah CDN yang digunakan untuk menyampaikan halaman amp. Anda semua tahu ciri -ciri teras rangkaian penghantaran kandungan - mereka mengedarkan sumber kepada pelayan lebih dekat dengan penonton laman web anda. Untuk halaman AMP, CDN ini akan membolehkan masa beban minimum kerana kemungkinan kelewatan jarak.

Korelasi logo amp pada seo

Kembali pada tahun 2016, ketika Google melancarkan amp, Adage.com menerbitkan wawancara dengan Richard Gingras, pengarah kanan Google News dan Produk Sosial. Dalam wawancara itu, beliau berkata bahawa penggunaan AMP tidak akan langsung berkaitan dengan kedudukan carian anda kerana ia bukan faktor langsung. Dia kemudian menambah: "Semua yang lain (kedudukan enjin carian) isyarat juga perlu dipenuhi."

Walau bagaimanapun, selepas penjelasan ini, semuanya menjadi lebih jelas. Beliau berkata: "Jika kita mempunyai dua artikel, dari sudut pandang isyarat, skor yang sama pada semua ciri lain (kecuali kelajuan), maka ya, kita akan memberi tumpuan kepada yang terpantas, kerana itu pengguna menemui sesuatu mata -catching. "

Malah Google tidak menafikan kaitan laman web AMP kepada SEO. Kelajuan sentiasa menjadi faktor yang mempengaruhi dalam pengoptimuman enjin carian. Jika halaman AMP mendapatkan lebih banyak klik dan kadar lantunan yang lebih rendah kerana pemuatan lebih cepat, Google pasti akan meletakkan laman web lebih tinggi untuk pengalaman pengguna yang lebih baik.

Bagaimana cara amp laman web anda?

Anda mesti mengekalkan dua versi halaman artikel di laman web. Halaman artikel asal, untuk pengguna web lalai, dan versi amp, untuk pengguna mudah alih yang berpotensi. Juga ambil perhatian bahawa amp tidak membenarkan elemen bentuk dan JavaScript pihak ketiga. Ini bermakna anda tidak boleh meletakkan borang hubungan atau komen dalam halaman dalam pelaksanaan standard, kerana AMP digunakan terutamanya untuk penghantaran kandungan.

• Saya cadangkan menulis semula keseluruhan template laman web untuk menangani batasan -batasan ini. Sebagai contoh, CSS halaman AMP mesti digariskan dengan saiz halaman kurang daripada 50 kb. Di samping itu, disebabkan pemuatan fon cepat, mereka harus dimuatkan dengan bantuan pelanjutan amp-font untuk memuatkan halaman dengan cekap.
• Adalah disyorkan agar multimedia dikendalikan dengan berhati -hati. Untuk imej, anda perlu menggunakan elemen itu bersama -sama dengan lebar dan ketinggian yang tepat. Juga, jika imej anda adalah GIF, anda perlu menggunakan komponen lanjutan AMP-Anim yang berasingan.
• Untuk video, terdapat dua pilihan. Terdapat tag tersuai untuk membenamkan video, yang dipanggil amp-video. Walau bagaimanapun, jika anda ingin membenamkan video YouTube, anda mempunyai tag khusus yang dipanggil AMP-Youtube.
• Untuk slaid tertanam, anda boleh menggunakan amp-karusel. Selain itu, jika anda ingin menambah kotak cahaya imej, anda boleh menggunakan amp-image-lightbox.
• Untuk platform media sosial tertanam seperti Twitter, Facebook, Instagram, Pinterest, dan Vine, anda boleh menggunakan setiap komponen yang sepadan.
• Ini sangat penting. Sekarang, sebaik sahaja semuanya disediakan, anda boleh menggunakan halaman amp anda dan anda perlu memberitahu Google mengenai laman web AMP anda. Anda mesti menambah tag mengenai halaman amp anda ke halaman pos utama anda dan tag kanonik mengenai halaman utama anda pada halaman amp.
Anda boleh mengetahui lebih lanjut mengenai tag amp dan metadata skema.org di sini. Skema.org metadata "adalah keperluan untuk memenuhi syarat kandungan anda untuk muncul di Google Search News Carousel Demo". Jadi jika anda ingin berjaya dengan Google amp, anda mesti menyediakan skema anda dengan betul.

Adakah Google Analytics sesuai untuk amp?

Ya, tentu saja, analisis berfungsi untuk amp. Malah, analisis pada amp juga pintar. Untuk mengelakkan laman web daripada melambatkan kerana pelbagai pelacak analisis, mereka berdasarkan falsafah teras "satu pengukuran, pelbagai laporan". Umumnya, terdapat dua cara untuk membolehkan analisis untuk amp di laman web anda.

elemen amp-pixel: Ia adalah tag mudah yang boleh menggunakan permintaan mendapatkan untuk mengira paparan halaman (serupa dengan piksel penjejakan).

• Komponen Pelanjutan AMP-Anayltik: Komponen ini lebih maju daripada AMP-Pixel. Anda boleh menggunakannya untuk mengukur sebarang aktiviti pada halaman amp anda. Ia membolehkan anda menentukan konfigurasi JSON yang memberikan maklumat terperinci tentang apa yang hendak diukur dan di mana laporan dihantar.

Bagaimana menggunakan amp di laman web WordPress?

Malah, salah satu cara paling mudah untuk menggunakan amp adalah untuk melaksanakannya di laman web WordPress anda. Anda boleh menggunakan pemalam rasmi yang dibangunkan oleh Automattic/WordPress.

Langkah 1: Pasang plugin WordPress

mari mula memasang! Muat turun plugin dari pautan di atas dan pasang plugin di laman web WordPress anda. Selepas pemasangan, anda hanya perlu melampirkan "/amp/" ke halaman artikel. Sekiranya anda tidak mengaktifkan permalink yang bagus, anda boleh mencuba? Amp = 1.

Langkah 2: Sahkan dan laraskan

Konsol Carian Google akan mendapat versi amp halaman artikel dari tag meta, yang akan dilampirkan oleh plugin. Walau bagaimanapun, masalahnya adalah bahawa ia biasanya mengambil masa beberapa hari untuk mengesan perubahan tersebut.

Jadi, apa yang harus saya buat sekarang? Untuk mengendalikan situasi yang rumit ini, saya cadangkan menggunakan gabungan proses pengesahan krom dan konsol carian. Untuk menggunakan proses pengesahan Chrome, sila lawati mana -mana halaman amp anda di Chrome. Kemudian tambah #pembangunan = 1 pada akhir URL. Sekarang tekan Control Shift I untuk membuka alat pemaju Chrome.

menyegarkan halaman dan ia akan memaparkan "pengesahan amp berjaya" atau memberikan senarai terperinci mengenai isu -isu yang perlu diperbaiki.

Anda dapat melihat bahawa pemasangan plugin tidak mencukupi. Anda mesti mengesahkan setiap data dengan mengakses halaman dan mengulangi langkah -langkah di atas untuk mendapat manfaat daripada mempercepatkan halaman mudah alih.

Langkah 3: Sahkan tag skema

Anda telah mengetahui bahawa mengesahkan tag skema adalah penting untuk halaman amp anda. Saya cadangkan menggunakan alat ujian data berstruktur Google untuk menguji jika halaman anda mempunyai tag skema yang sah. Walau bagaimanapun, saya mendapati bahawa WordPress mempunyai beberapa masalah dengan memaparkan logo. Jadi saya membuat beberapa pengubahsuaian untuk mengatasinya.

pergi ke pemalam, klik Editor, dan pilih amp. Tukar baris ini dalam editor untuk mengubah suai plugin.

<code>if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}</code>

to:

<code>$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);</code>

Pastikan untuk menentukan lokasi logo dalam URL dan tentukan ketinggian dan lebar dengan sewajarnya.

Langkah 4: Mengintegrasikan Google Analytics dengan plugin AMP WordPress.

Sekarang, anda hampir selesai. Walau bagaimanapun, saya lebih suka menggunakan Google Analytics untuk mengesan statistik. Plugin AMP WordPress tidak aktif mengaktifkan AMP-analitik, tetapi sangat mudah untuk dilaksanakan.

Untuk membolehkan plugin AMP WordPress berfungsi dengan Google Analytics, pergi ke plugin -& gt; editor -& gt; pilih "amp" dan tambahkan kod berikut hingga akhir.

<code>add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
     async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">>
    <?php }

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics> type="googleanalytics" id="analytics1"></amp-analytics>
     type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    >
    >
    <?php }
</code>

Pastikan untuk menukar nilai UA-XXXXX-Y ke ID Property Google Analytics anda sendiri!

Selepas membuat perubahan ini, hormati halaman amp anda dan halaman amp anda akan dilacak.

Kesimpulan pada projek amp Google

Google berharap projek AMP akan memberikan pengguna pengalaman yang baik. Namun, persoalannya ialah sama ada AMP boleh membuat semuanya sangat cepat. Jawapan untuk soalan ini agak terbuka. Jika anda tidak mengoptimumkan laman web anda dengan baik, amp akan membawa beberapa penambahbaikan yang ketara.

Walau bagaimanapun, mempercepatkan halaman mudah alih bukan peluru sihir. Teknologi untuk meningkatkan kelajuan laman web disediakan dari awal. AMP hanya cuba menggabungkan dan menghapuskan semua faktor pemuatan perlahan utama dan memberikan pengguna penyelesaian yang lebih baik.

Apa pendapat anda mengenai projek amp? Sila kongsi pandangan anda di bahagian komen di bawah!

Soalan Lazim Mengenai Menggunakan AMP di WordPress (FAQ)

Apakah faedah utama menggunakan amp dan WordPress?

Manfaat utama menggunakan amp (halaman mudah alih dipercepatkan) dengan WordPress adalah peningkatan pengalaman pelayaran mudah alih. AMP adalah projek yang disokong Google yang direka untuk membuat halaman web lebih cepat pada peranti mudah alih. Ia melakukan ini dengan menyelaraskan HTML dan menggunakan versi CSS nipis. Ini mengakibatkan peningkatan ketara dalam kelajuan pemuatan halaman, yang boleh meningkatkan penglibatan pengguna, pengekalan dan meningkatkan SEO mudah alih.

bagaimana amp mempengaruhi SEO?

amp dapat meningkatkan SEO anda dengan ketara kerana kelajuan pemuatan halaman adalah faktor ranking dalam algoritma Google. Dengan membuat halaman web anda lebih cepat, AMP dapat membantu meningkatkan keterlihatan anda dalam hasil enjin carian, terutama di kalangan pengguna mudah alih. Di samping itu, Google biasanya menyoroti halaman amp dalam karusel yang diserlahkan dalam hasil carian, memberikan penglihatan selanjutnya.

Bolehkah saya menggunakan amp di laman web WordPress saya yang ada?

Ya, anda boleh menggunakan amp di laman web WordPress anda yang sedia ada. Terdapat beberapa plugin yang boleh membantu anda melaksanakan AMP di laman web WordPress anda. Plugin ini membantu menukar jawatan dan halaman sedia ada anda ke dalam versi serasi amp.

Adakah amp akan mempengaruhi fungsi laman web WordPress saya?

amp menghadkan unsur -unsur HTML, CSS, dan JavaScript tertentu untuk memastikan masa pemuatan halaman yang cepat. Ini bermakna beberapa ciri laman web WordPress anda mungkin tidak berfungsi seperti yang diharapkan pada versi amp laman web anda. Walau bagaimanapun, kebanyakan plugin AMP menawarkan pilihan yang boleh ditambah kembali ke fungsi dengan masih mematuhi piawaian AMP.

Bagaimana untuk menyesuaikan penampilan halaman amp?

CSS boleh digunakan untuk menyesuaikan penampilan halaman amp. Walau bagaimanapun, kerana AMP mengehadkan penggunaan sifat CSS tertentu untuk memastikan masa beban halaman yang cepat, anda mungkin mahu menggunakan pendekatan yang lebih diperkemas untuk gaya IT. Sesetengah plugin WordPress AMP menawarkan pilihan penyesuaian terbina dalam.

Bagaimana untuk memeriksa sama ada pelaksanaan amp saya berjaya?

Anda boleh menggunakan alat ujian AMP yang disediakan oleh Google untuk memeriksa sama ada pelaksanaan AMP anda berjaya. Alat ini akan menganalisis halaman AMP anda dan melaporkan sebarang kesilapan yang boleh menghalangnya daripada disediakan sebagai halaman AMP dalam hasil carian Google.

Bolehkah saya menggunakan amp tanpa menggunakan plugin di WordPress?

Ya, anda boleh melaksanakan amp tanpa menggunakan plugin di WordPress, tetapi ini memerlukan pemahaman yang baik tentang pembangunan web dan piawaian amp. Anda perlu membuat versi dan halaman anda secara manual secara manual dan secara manual menambah tag HTML AMP yang diperlukan.

Adakah AMP menyokong pengiklanan dan analisis?

Ya, AMP menyokong kedua -dua pengiklanan dan analisis. Walau bagaimanapun, kerana AMP menyekat unsur-unsur HTML, CSS, dan JavaScript tertentu, anda mungkin perlu menggunakan tag dan skrip khusus AMP untuk pengiklanan dan analisis.

Bolehkah saya melumpuhkan amp untuk pos atau halaman tertentu?

Ya, kebanyakan plugin AMP WordPress menawarkan pilihan untuk melumpuhkan amp untuk pos atau halaman tertentu. Ini sangat berguna jika anda mempunyai sesuatu yang tidak berfungsi dengan baik dengan sekatan AMP.

Adakah amp pengganti untuk reka bentuk responsif?

Tidak, amp bukan pengganti reka bentuk responsif. Walaupun AMP dapat meningkatkan pengalaman melayari mudah alih dengan membuat halaman beban lebih cepat, ia tidak menggantikan keperluan untuk menyesuaikan diri dengan reka bentuk laman web saiz skrin yang berbeza. Adalah lebih baik menggunakan AMP bersempena dengan reka bentuk responsif untuk pengalaman pengguna mudah alih yang terbaik.

Atas ialah kandungan terperinci Cara menggunakan amp dengan wordpress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!