最佳化搜尋引擎：在 Nuxt.js 商店中為靜態和動態內容實作元標記

在我的網路筆記中查看這篇文章！

只是想提醒一下，您可以在這裡查看我們正在構建的演示，以及這裡的源代碼。

在這篇文章中，我們來談談 SEO（搜尋引擎優化）。為什麼 SEO 對於我們的電子商務商店很重要？很簡單，我們希望我們的商店不僅僅是產品目錄，而且我們還希望用戶可以透過網路輕鬆找到我們的產品。為此，我們需要我們的電子商務商店獲得比可能的競爭對手更高的排名，為了實現這一目標，我們需要為每個頁面（靜態頁面和動態頁面）添加一些元標記。

搜尋引擎優化 (SEO) 是優化網站和網頁以提高其在搜尋引擎結果頁面 (SERP) 中的可見性和排名的做法。它涉及多種技術的組合，包括頁面優化、技術搜尋引擎優化和頁外策略，以使網站更容易被搜尋引擎和用戶發現且用戶友好。

元標記是描述頁面內容的文字片段，使用者在網頁本身上看不到它們。搜尋引擎使用元標記來理解網頁的主題、相關性和其他屬性，這可以影響其在搜尋結果中的排名和可見性。雖然元標籤本身並不是決定搜尋排名的唯一因素，但它們在優化網頁以實現更好的 SEO 方面發揮著至關重要的作用。

以下是 5 個常見元標記以及每個元標記的簡要說明：

1. 標題標籤： 此標籤指定網頁的標題，該標題顯示在瀏覽器標籤中並作為搜尋結果中的可點擊標題。它應該要準確、簡潔地描述頁面的內容。
2. 元描述標籤： 此標籤提供頁面內容的簡短摘要，可能會在搜尋結果中顯示為片段。寫得好的元描述可以吸引使用者點擊進入頁面。
3. 元關鍵字標籤：雖然不像以前那麼重要，但此標籤允許您為頁面指定相關關鍵字，這可能有助於搜尋引擎理解頁面的主題。
4. 元機器人標籤：此標籤向搜尋引擎爬蟲提供有關如何處理頁面的說明，例如是否對其進行索引、追蹤連結或應用其他指令。
5. 開放圖譜與 Twitter 卡標籤： 這些是用於社群媒體分享的元標籤，可讓您控制在 Facebook、Twitter 等平台上分享時頁面內容的顯示方式。

如果您需要了解有關在 Nuxt.js 專案中實現元標記的更多信息，您可以查看“簡單元標記”文章。

太好了，現在我們可以開始將這些肉類標籤應用到我們的 Nuxt.js 電子商務商店。

1.在Nuxt.js中為靜態頁面設定meta標籤

這是最簡單的部分，因為我們知道每個特定頁面上將呈現什麼，並且我們可以定義這些標籤。

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」標籤來定義我們的頁面在社交網路中的視圖。

您必須將所有這些資料修改到您的特定網站，並對每個靜態頁面（例如「商店」或「關於我們」頁面）執行相同的步驟。讓我們繼續前進！

2.根據頁面內容產生動態元標籤

我們將為每個產品動態產生頁面，並且我們無法單獨為每個頁面定義元標籤，這就是為什麼我們需要配置我們的「產品」頁面，以便它可以在這些標籤中產生某種資料每一頁。讓我們開始吧！

像以前一樣，我們將添加一個“defineNuxtComponent”函數作為組件包裝器，然後像以前一樣創建一個頭函數，並添加“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中文網其他相關文章！