検索エンジン向けの最適化: Nuxt.js ストアの静的コンテンツと動的コンテンツのメタタグを実装する

この投稿をウェブノートでチェックしてください!

そして、私たちがここで構築しているもののデモと、ここでソースコードをチェックできることを思い出してください。

この記事では、SEO (検索エンジン最適化) について少しお話しましょう。私たちの e コマース ストアにとって SEO が重要なのはなぜですか?それは簡単です。私たちのストアは製品のカタログだけでなく、ユーザーがインターネットを検索するだけで製品を見つけられるようにしたいと考えています。そのためには、私たちの e コマース ストアが競合他社よりも高いランキングを獲得する必要があり、それを達成するには、各ページ (静的ページと動的ページにも) にいくつかのメタ タグを追加する必要があります。

検索エンジン最適化 (SEO) は、Web サイトと Web ページを最適化して、検索エンジン結果ページ (SERP) での可視性とランキングを向上させる手法です。これには、ウェブサイトを検索エンジンとユーザーの両方にとってより簡単に見つけやすく、使いやすいものにするための、ページ上の最適化、テクニカル SEO、ページ外戦略などの技術の組み合わせが含まれます。

メタ タグ は、ページのコンテンツを説明するテキストの断片であり、Web ページ自体ではユーザーには表示されません。検索エンジンはメタ タグを使用して、Web ページのトピック、関連性、その他の属性を理解します。これらの属性は、検索結果でのランキングや可視性に影響を与える可能性があります。メタ タグだけが検索ランキングを決定する唯一の要素ではありませんが、SEO を向上させるために Web ページを最適化する上で重要な役割を果たします。

ここでは、5 つの一般的なメタ タグとそれぞれの簡単な説明を示します。

1. タイトル タグ: このタグは、ブラウザーのタブに表示され、検索結果のクリック可能な見出しとして表示される Web ページのタイトルを指定します。ページのコンテンツを正確かつ簡潔に説明する必要があります。
2. メタ ディスクリプション タグ: このタグは、ページのコンテンツの簡単な概要を提供し、検索結果にスニペットとして表示される場合があります。メタディスクリプションを適切に作成すると、ユーザーがクリックしてページにアクセスするように誘導できます。
3. メタ キーワード タグ: 以前ほど重要ではありませんが、このタグを使用すると、ページに関連するキーワードを指定できます。これにより、検索エンジンがページのトピックを理解するのに役立つ可能性があります。
4. メタ ロボット タグ: このタグは、インデックスを作成するか、リンクをたどるか、他のディレクティブを適用するかなど、ページの処理方法について検索エンジン クローラーに指示を提供します。
5. Open Graph および Twitter Card タグ: これらはソーシャル メディア共有に使用されるメタ タグであり、Facebook、Twitter などのプラットフォームで共有されるときにページのコンテンツがどのように表示されるかを制御できます。

Nuxt.js プロジェクトへのメタ タグの実装について詳しく知りたい場合は、「単純なメタ タグ」の記事を参照してください。

これで、これらの肉タグを Nuxt.js e コマース ストアに実装できるようになりました。

1. Nuxt.js で静的ページのメタタグを設定する

各特定のページで何がレンダリングされるかがわかっており、それらのタグを定義できるため、これは最も単純な部分です。

Nuxt.js ではコンポーネントに head メソッドを追加できますが、以前はコンポーネントの作成を更新して「defineNuxtComponent」関数を使用する必要がありました。その後、メタ、スクリプト、およびオブジェクトを返す「head」関数を追加できます。リンク。

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/` },
            ],
        }
    },
})

この記事の冒頭で述べたように、ページ、説明、キーワードの正規リンクを定義します。また、ソーシャル ネットワークでのページのビューを定義する「og」タグも追加します。

このすべてのデータを特定の Web サイトに合わせて変更し、「ショップ」ページや「会社概要」ページなどの各静的ページに対して同じ手順を実行する必要があります。そして先に進みましょう!

2. ページコンテンツに基づいて動的メタタグを生成する

製品ごとに動的に生成されるページがあり、各ページのメタ タグを個別に定義することはできません。そのため、これらのタグに何らかのデータを生成できるように「製品」ページを構成する必要があります。各ページ。やってみよう！

前と同様に、コンポーネント ラッパーとして「defineNuxtComponent」関数を追加し、次に前と同じように head 関数を作成し、パラメータとして「nuxtApp」を追加します。「nuxtApp」は、さまざまな Nuxt 固有のユーティリティへのアクセスを提供するオブジェクトであり、現在のアプリ インスタンスのコンテキストを利用して、ルート パラメーターを取得し、製品データを取得します。また、製品ストアを使用して、すべての製品メタデータをページに動的に追加します。

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.

以上が検索エンジン向けの最適化: Nuxt.js ストアの静的コンテンツと動的コンテンツのメタタグを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。