Mengoptimumkan untuk Enjin Carian: Melaksanakan Meta Tag untuk Kandungan Statik dan Dinamik dalam Kedai Nuxt.js Anda

Semak siaran ini dalam nota web saya!

Dan hanya ingin mengingatkan bahawa anda boleh menyemak demo tentang apa yang kami bina di sini, dan kod sumber di sini.

Dalam artikel ini mari kita bercakap tentang SEO (Search Engine Optimization) serba sedikit. Mengapa SEO penting untuk kedai e-dagang kami? Mudah sahaja, kami mahu kedai kami bukan sahaja katalog produk, tetapi kami juga mahu pengguna boleh mencari produk kami hanya dengan melayari internet. Untuk itu, kami memerlukan kedai e-dagang kami untuk mendapatkan kedudukan yang lebih tinggi daripada pesaing yang mungkin, dan untuk mencapainya, kami perlu menambahkan beberapa teg meta pada setiap halaman, halaman statik dan dinamik juga.

Pengoptimuman Enjin Carian (SEO) ialah amalan mengoptimumkan tapak web dan halaman web untuk meningkatkan keterlihatan dan kedudukannya dalam halaman hasil enjin carian (SERP). Ia melibatkan gabungan teknik, termasuk pengoptimuman pada halaman, SEO teknikal dan strategi luar halaman, untuk menjadikan tapak web lebih mudah ditemui dan mesra pengguna untuk enjin carian dan pengguna.

Teg meta ialah coretan teks yang menerangkan kandungan halaman dan ia tidak kelihatan kepada pengguna pada halaman web itu sendiri. Enjin carian menggunakan tag meta untuk memahami topik, perkaitan dan atribut lain halaman web, yang boleh mempengaruhi kedudukan dan keterlihatannya dalam hasil carian. Walaupun tag meta sahaja bukanlah satu-satunya faktor dalam menentukan kedudukan carian, mereka memainkan peranan penting dalam mengoptimumkan halaman web untuk SEO yang lebih baik.

Berikut ialah 5 teg meta biasa dan penerangan ringkas untuk setiap satu:

1. Teg Tajuk: Teg ini menentukan tajuk halaman web, yang muncul dalam tab penyemak imbas dan sebagai tajuk yang boleh diklik dalam hasil carian. Ia harus menerangkan kandungan halaman dengan tepat dan padat.
2. Teg Perihalan Meta: Teg ini menyediakan ringkasan ringkas kandungan halaman, yang mungkin dipaparkan sebagai coretan dalam hasil carian. Perihalan meta yang ditulis dengan baik boleh menarik pengguna untuk mengklik ke halaman tersebut.
3. Teg Kata Kunci Meta: Walaupun tidak sepenting dahulu, teg ini membolehkan anda menentukan kata kunci yang berkaitan untuk halaman, yang berpotensi membantu enjin carian memahami topik halaman.
4. Teg Robot Meta: Teg ini memberikan arahan kepada perangkak enjin carian tentang cara mengendalikan halaman, seperti sama ada untuk mengindeksnya, mengikuti pautan atau menggunakan arahan lain.
5. Graf Terbuka dan Teg Kad Twitter: Ini ialah teg meta yang digunakan untuk perkongsian media sosial, membolehkan anda mengawal cara kandungan halaman itu muncul apabila dikongsi pada platform seperti Facebook, Twitter dan lain-lain.

Jika anda perlu mendapatkan lebih lanjut tentang melaksanakan teg meta pada projek Nuxt.js, anda boleh menyemak artikel "Teg Meta Mudah".

Bagus, kini kami boleh mula melaksanakan tanda daging tersebut ke dalam kedai e-dagang Nuxt.js kami.

1. Menyediakan teg meta untuk halaman statik dalam Nuxt.js

Ini adalah bahagian yang paling mudah kerana kami tahu perkara yang akan dipaparkan pada setiap halaman tertentu dan kami boleh menentukan teg tersebut.

Nuxt.js membolehkan kami menambah kaedah kepala ke dalam komponen, tetapi sebelum ini kami perlu mengemas kini penciptaan komponen dan menggunakan fungsi "defineNuxtComponent", kemudian kami boleh menambah fungsi "head" yang akan mengembalikan meta, skrip dan pautan.

export default defineNuxtComponent({
    name: "Main",
    head() {
        return {
            title: `TryBuy Store`,
            meta: [
                { name: 'description', content: `Discover the latest fashion trends at TryBuy Store. Our online clothing store offers a wide range of stylish and affordable apparel for men, women, and children. Shop our curated collection of dresses, tops, jeans, accessories, and more from top brands. Find inspiration for your perfect look with our style guides and easy returns policy.` },
                { name: 'keywords', content: `online clothing store, fashion trends, women's apparel, men's apparel, kids clothes, dresses, tops, jeans, accessories, affordable fashion, style guide, easy returns` },
                { property: 'og:title', content: `TryBuy Store` },
                { property: 'og:description', content: `Discover the latest fashion trends at TryBuy Store. Our online clothing store offers a wide range of stylish and affordable apparel for men, women, and children. Shop our curated collection of dresses, tops, jeans, accessories, and more from top brands. Find inspiration for your perfect look with our style guides and easy returns policy.`},
                { property: 'og:url', content: `https://trybuy.com/` },
                { property: 'site_name', content: 'TryBuy Store' },
            ],
            link: [
                { rel: 'canonical', href: `https://trybuy.com/` },
            ],
        }
    },
})

Seperti yang dinyatakan pada permulaan artikel ini, kami mentakrifkan pautan kanonik halaman, perihalan dan kata kunci kami. Selain itu, kami menambah teg "og" yang mentakrifkan paparan halaman kami dalam rangkaian sosial.

Anda perlu mengubah suai semua data ini ke tapak web khusus anda dan melakukan langkah yang sama pada setiap halaman statik anda seperti halaman "kedai" atau "tentang kami". Dan mari teruskan!

2. Menjana teg meta dinamik berdasarkan kandungan halaman

Kami akan mempunyai halaman yang dijana secara dinamik untuk setiap produk dan kami tidak boleh menentukan teg meta untuk setiap halaman secara berasingan, itulah sebabnya kami perlu mengkonfigurasi halaman "produk" kami supaya ia boleh menjana beberapa jenis data ke dalam teg tersebut untuk setiap muka surat. Jom buat!

Seperti sebelum ini, kami akan menambah fungsi "defineNuxtComponent" sebagai pembungkus komponen dan kemudian mencipta fungsi kepala seperti sebelumnya, dan menambah "nuxtApp sebagai parameter. "nuxtApp" ialah objek yang menyediakan akses kepada pelbagai utiliti khusus Nuxt dan konteks contoh apl semasa, dengan bantuannya, kami akan mendapatkan parameter laluan kami dan mengambil data produk Selain itu, kami akan menggunakan kedai produk kami dan menambahkan semua metadata produk ke halaman secara dinamik.

async head(nuxtApp) {
    const productId = nuxtApp.$router.currentRoute._value.params.product;
    const productsStore = useProductsStore();
    productsStore.aGetAllProducts();
    const product = productsStore.gProductsList.find(item => item.id == productId);
    return {
        title: `TryBuy Store | ${product.name}`,
        meta: [
            { name: 'description', content: `${product.description}` },
            { name: 'keywords', content: `${product.description}` },
            { property: 'og:title', content: `TryBuy Store | ${product.name}` },
            { property: 'og:description', content: `${product.description}`},
            { property: 'og:url', content: `https://trybuystore.com/shop/${product.id}` },
            { property: 'site_name', content: 'TryBuy Store' },
        ],
        link: [
            { rel: 'canonical', href: `https://trybuystore.com/shop/${product.id}` },
        ],
    }
},

How it will work under the hood? When we generate our product page nuxt will get the product id, then fetch data about the product and return meta with all information needed. As many product pages we will generate, as many meta tags will be dynamically added. And that is crucial for our SEO.

How can we test it? We will check it in our next articles when we will configure our Nuxt generation process.

In conclusion, implementing proper meta tags is an essential step for optimizing your Nuxt.js e-commerce store for search engines. By setting up meta tags for static pages and generating dynamic meta tags based on product content, you can ensure that your website provides accurate and relevant information to search engines, improving its visibility and ranking in search results. This, in turn, can lead to increased organic traffic and potentially more sales for your online store. While meta tags are just one aspect of SEO, they play a crucial role in helping search engines understand and properly index your website's content.

If you need a source code for this tutorial you can get it here.

Atas ialah kandungan terperinci Mengoptimumkan untuk Enjin Carian: Melaksanakan Meta Tag untuk Kandungan Statik dan Dinamik dalam Kedai Nuxt.js Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!