Location>code7788 >text

SEO Configuration with useSeoMeta

Popularity：115 ℃/2024-07-30 19:48:35

title: SEO Configuration with useSeoMeta
date: 2024/7/30
updated: 2024/7/30
author: cmdragon

excerpt:
Abstract: This article introduces the useSeoMeta combo function in Nuxt3 for simplifying and optimizing the SEO configuration of a website. With this tool, developers can easily set up page meta tags in Nuxt3 projects, including titles, descriptions, and Open Graph and Twitter Card tags, etc. It supports both static and dynamic metadata configurations to improve the performance of websites on search engines and social media.

categories:

  • front-end development

tags:

  • SEO optimization
  • Nuxt3
  • web development
  • code example
  • meta tags
  • dynamic configuration
  • front-end technology

image
image

scanningtwo-dimensional barcodeFollow or microsoft search:Programming Intelligence Front-End to Full-Stack Communication and Growth

Search Engine Optimization (SEO) is an aspect that cannot be ignored when creating a modern website. A good SEO configuration will not only improve your website's ranking in search engines, but also better showcase your content on social media.Nuxt3
Provides a powerful tooluseSeoMeta to help you achieve this goal.

What is it?useSeoMeta？

useSeoMeta is a composable function provided by Nuxt3 to define SEO meta tags for websites. It can be used to define SEO meta tags for a website by using theuseSeoMeta
You can specify various meta tags in a type-safe manner, including titles, descriptions, Open Graph tags, and so on. This helps to avoid common errors such as misspellings or using the wrong attribute names, while ensuring that your tag configuration is standards-compliant and has the
XSS security.

How to useuseSeoMeta

1. Installation of Nuxt3

First, you need to have a Nuxt3 project. If you don't have a project yet, you can create a new Nuxt3 project using the following command:

npx nuxi@latest init my-nuxt3-app
cd my-nuxt3-app
npm install

2. ConfigurationuseSeoMeta

In Nuxt3 projects, you typically configure SEO meta tags in page components. Here is a simple file example, showing how to use theuseSeoMeta
to set the page's meta tags.

Example 1: Static Meta Tags

In this example, we set up some static SEO meta tags:


<template>
  <div>
    <h1> Welcome to my website</h1>
  </div>
</template>

<script setup lang="ts"> </template> </template>

  useSeoMeta({
    
    ogTitle: 'My amazing website', description: 'This is my amazing website.
    description: 'This is my amazing website, let me tell you everything about it.' ,
    ogDescription: 'This is my amazing website, let me tell you everything about it.' ,
    ogImage: '/',
    twitterCard: 'summary_large_image',
  });
</script>.

In the code above, we useuseSeoMeta to set the following meta tags:

  • title:: Title of the page
  • ogTitle: Open Graph titles for social media sharing
  • description:: Description of the page
  • ogDescription: Description of Open Graph for social media sharing
  • ogImage: Image URLs for Open Graph for social media sharing
  • twitterCard: The type of Twitter card, such assummary_large_image
Example 2: Dynamic Meta Tags

Sometimes, you may need to dynamically generate meta tags based on the state of the component. Here's how to accomplish this using the Compute property:


<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="title" placeholder="Modify the title"/>
  </div>
</template>

<script setup lang="ts">

  const title = ref('My title.');

  useSeoMeta({
    title,
    description: computed(() => `this is ${} descriptions`),
  });
</script>

In this example, we use theref to create a responsive header and pass thecomputed to dynamically generate descriptions. This way, when the title changes, the description is automatically updated as well.

parameter list

useSeoMeta Over 100 parameters are supported for defining various meta tags. Here are some common parameters:

basic meta tag

  • title:: Page title
  • description: Page Description
  • keywords:: Page keywords
  • robots: Instructs search engine crawlers how to process pages (e.g.index, follow,noindex, nofollow）

Open Graph Tags

  • ogTitle: Open Graph Title
  • ogDescription: Open Graph Description
  • ogImage: Open Graph Image URL
  • ogImageAlt: Open Graph Image Replacement Text
  • ogType: Open Graph types (e.g.website,article,profile）
  • ogUrl: URL of the current page
  • ogSiteName:: Website name
  • ogLocale: Open Graph language regions (e.g.en_US）

Twitter Card Hashtag

  • twitterCard: Twitter card types (e.g.summary,summary_large_image,app,player）
  • twitterTitle:: Twitter Headlines
  • twitterDescription: Twitter Description
  • twitterImage: Twitter image URL
  • twitterImageAlt: Twitter Image Replacement Text
  • twitterSite: Twitter account username (usually@(beginning)
  • twitterCreator: the content author's Twitter account username (usually the@(beginning)
  • twitterPlayer: Twitter Player URL (for video cards)

Facebook and other social platform tags

  • fbAppId: Facebook App ID
  • fbPages: Facebook Page URLs (if more than one, use commas to separate them)

Structured data

  • schema: Structured data in JSON-LD format (e.g.(Type)

    • @context: JSON-LD Context
    • @type: Data types (e.g.WebPage,Product,Article）
    • name: Name
    • description: Description
    • url: URL
    • image: Image URL
    • author:: Author information
    • publisher: Publisher information
    • datePublished: Date of release
    • dateModified:: Date of revision

Link Related Tags.

  • canonical: Normalize URLs
  • alternate: Specify URLs for other language versions (e.g.hrefLang）
  • rel:: Linking relationships (e.g.nofollow,noopener）

Viewports and Mobile Devices tab

  • viewport: Viewport settings (e.g.width=device-width, initial-scale=1）
  • appleMobileWebAppTitle:: Title of the iOS app
  • appleMobileWebAppCapable: Whether to allow full-screen mode (yesmaybeno）
  • appleMobileWebAppStatusBarStyle: Status bar style (e.g.black-translucent）

Web site icons and logos

  • favicon: The website icon (usually found in the<link rel="icon">(set in)
  • appleTouchIcon: iOS app icons (<link rel="apple-touch-icon" href="/path/to/">）
  • msapplicationTileImage: Windows 8/10 Touchscreen Icons
  • themeColor: Theme colors for browser toolbars on mobile devices

Security and privacy related tags

  • Content-Security-Policy:: Content security policy
  • X-Content-Type-Options: Prevent MIME type sniffing
  • X-Frame-Options: Prevent clickjacking (e.g.DENY,SAMEORIGIN）
  • X-XSS-Protection: Enable or disable XSS protection

Preloading and pre-rendering

  • preload: Preloaded resources (e.g.<link rel="preload" href="/path/to/resource" as="script">）
  • prefetch: Prefetch resources (e.g.<link rel="prefetch" href="/path/to/resource">）
  • prerender: Pre-rendered pages (e.g.<link rel="prerender" href="/path/to/page">）

Image Optimization

  • imageSrcSet: different resolutions of images (for responsive design)
  • imageSizes: image size (for responsive design)

Customized metadata

  • applicationName: Application name
  • themeColor: Browser theme colors
  • ogVideo: Open Graph Video URL
  • ogVideoType: Open Graph video types (e.g.video/mp4）

More parameters can be found in the official documentation or in the parameter list in the source code.SEO Starter HTML Tags · HTML Tag Collections · zhead

summarize

utilizationuseSeoMeta is a recommended way to set up SEO meta tags in Nuxt3. It not only supports
TypeScript and avoids many common errors with type-safe configuration. Whether it's a static or dynamic meta-tag configuration, theuseSeoMeta All provide clear APIs
to help you accomplish your mission.

For the rest of the article, please click to jump to the personal blog page or scan the code to follow or WeChat search:Programming Intelligence Front-End to Full-Stack Communication and Growth, read full article:SEO Configuration with useSeoMeta | cmdragon's Blog

Past articles are archived:

  • Must Read: Runtime Configuration Made Easy with useRuntimeConfig | cmdragon's Blog
  • Route Management: The useRouter Method and Routing Middleware Applications | cmdragon's Blog
  • UseRoute Function Details and Examples | cmdragon's Blog
  • Accessing a request URL using the useRequestURL combinatorial function | cmdragon's Blog
  • Configuring and Using Environment Variables | cmdragon's Blog
  • Data fetching in server-side rendering: combining useRequestHeaders and useFetch | cmdragon's Blog
  • Accessing Request Events with the useRequestEvent Hook | cmdragon's Blog
  • Efficient Data Acquisition and Management with useNuxtData | cmdragon's Blog
  • Nuxt 3 User Guide: Getting to grips with useNuxtApp and the runtime context | cmdragon's Blog
  • Asynchronous Data Fetching with useLazyFetch | cmdragon's Blog
  • Enhancing the data loading experience with useLazyAsyncData | cmdragon's Blog
  • Using useHydration for Data Hydration and Synchronization | cmdragon's Blog
  • useHeadSafe: Generating HTML Head Elements Safely | cmdragon's Blog
  • Header Magic: Easily Customize Page Meta Information to Improve User Experience | cmdragon's Blog
  • Exploring useFetch: A Guide to Efficient Data Acquisition and Processing | cmdragon's Blog
  • Error Detective: useError Combined Functions | cmdragon's Blog
  • useCookie function: Managing cookies in an SSR environment | cmdragon's Blog
<Previous Next>