驻马店专业网站建设/今天的新闻主要内容

添加 favicon 图标和 TDK（标题、描述、关键词）

1. nuxt.config.ts 添加配置：

export default defineNuxtConfig({  app: {    title:'Dream Site',    meta: [      { name: 'keywords', content: 'Nuxt.js,导航,网站' },      { name: 'description', content: '致力于打造程序员的梦中情站' }    ],    link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],    style: [],    script: [],    noscript: []  }})

2. 使用 useHead

<script setup lang="ts">  useHead({   title:'Dream Site',   link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],   meta: [     { name: 'keywords', content: 'Nuxt.js,导航,网站' },     { name: 'description', content: '致力于打造程序员的梦中情站' }   ]  })</script>

3. 使用 useSeoMeta 组合函数

<script setup lang="ts"> useSeoMeta({ title: 'Dream Site', ogTitle: 'Dream Site', description: '致力于打造程序员的梦中情站', ogDescription: '致力于打造程序员的梦中情站', ogImage: 'https://example.com/image.png', twitterCard: 'summary_large_image', })</script>

4. /pages/ 目录中可以使用 definePageMeta 来根据当前路由设置元数据

<script setup lang="ts"> definePageMeta({   title: 'Dream Site' })</script>

5. 动态标题

<script setup lang="ts">useHead({ // 作为字符串， // 其中`%s`会被标题替换 titleTemplate: '%s - Dream Site', // ... 或者作为一个函数 titleTemplate: (productCategory) => {   return productCategory     ? `${productCategory} - Dream Site`     : 'Dream Site' }})</script>

官方文档：SEO和Meta

安装 @nuxtjs/seo 模块

我们需要安装 @nuxtjs/seo 插件，@nuxtjs/seo 是一个模块集合，它覆盖了搜索引擎中常用的模块：

• @nuxtjs/sitemap：网站地图
• nuxt-simple-robots：蜘蛛爬虫协议
• nuxt-schema-org：网页标准
• nuxt-seo-experiments：实验性 SEO 元特征
• nuxt-og-image：生成动态的社交分享图片
• nuxt-link-checker：检查失效链接

具体使用方式：

1. @nuxtjs/seo 插件：

npx nuxi@latest module add seo

2. nuxt.config.ts 中根据实际情况添加配置：

 export default defineNuxtConfig({   // SEO 配置   site: {     url: 'https://dream-site.cn',     name: 'Dream Site',     description: '致力于打造程序员的梦中情站',     defaultLocale: 'zh-cn',     exclude: ['/admin/_components/**'], // 过滤不需要的 url     cacheMaxAgeSeconds: 24 * 3600, // 缓存时间一天     autoLastmod: true, // 自动检测每个 URL 的 lastmod 日期   },   routeRules: {     // Don't add any /secret/** URLs to the sitemap.xml     '/admin/_components/**': { robots: false },   } })

现在你就能打开 sitemap.xml 和 robots.txt 了，其他更加详细的配置可以参考官方文档：nuxt-seo

Robots

1. 禁用网站索引

export default defineNuxtConfig({  site: { indexable: false }})

2. 禁用页面索引

<script lang="ts" setup>defineRouteRules({  robots: false,})</script>

3. 如果需要更精细的编程控制，可以使用 nuxt.config.ts 配置该模块

export default defineNuxtConfig({  robots: {    disallow: ['/secret', '/admin'],  }})

更加详细的配置可以参考官方文档：Robots

Sitemap

1. 禁用 URL 模式的索引

export default defineNuxtConfig({ routeRules: {   // Don't add any /secret/** URLs to the sitemap.xml   '/secret/**': { robots: false }, }})

2. 对于所有其他情况，您可以使用 include 和 exclude 模块选项来过滤 url

export default defineNuxtConfig({ sitemap: {   // exclude all URLs that start with /secret   exclude: ['/secret/**'],   // include all URLs that start with /public   include: ['/public/**'], }})

3. 设置 Lastmod、changefreq、priority

<script setup>useSeoMeta({  // will be inferred as the lastmod value in the sitemap  articleModifiedTime: '2023-01-01'})defineRouteRules({  sitemap: {    changefreq: 'daily',    priority: 0.3  }})</script>

4. 缓存时间

export default defineNuxtConfig({  sitemap: {   cacheMaxAgeSeconds: 3600 // 1 hour  }})

5. 自定义样式

export default defineNuxtConfig({ sitemap: {   xslColumns: [     { label: 'URL', width: '50%' },     { label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },     { label: 'Priority', select: 'sitemap:priority', width: '12.5%' },     { label: 'Change Frequency', select: 'sitemap:changefreq', width: '12.5%' },   ], },})

更加详细的配置可以参考官方文档：Sitemap

OG Image

1. 使用可组合 defineOgImageComponent 来定义主页的 og:image

<script lang="ts" setup> defineOgImageComponent('NuxtSeo')</script>

2. 在浏览器中访问主页并打开 Nuxt DevTools (Shift + Alt + D)
   

3. 自定义模板

<script lang="ts" setup>defineOgImageComponent('NuxtSeo', { title: 'Hello OG Image 👋', description: 'Look what at me in dark mode', theme: '#ff0000', colorMode: 'dark',})</script>

更加详细的配置可以参考官方文档：OG Image

Schema.org

1. 配置默认值

<script lang="ts" setup>useSchemaOrg([ defineWebPage({   name: 'My Page' }), defineWebSite({   name: 'My Site' })])</script>

2. 如果你不想使用默认值

export default defineNuxtConfig({ schemaOrg: {   default: false }})

3. 设置身份类型

export default defineNuxtConfig({ schemaOrg: {   identity: {     type: 'Organization', // or 'Person'     name: 'My Company',     url: 'https://example.com',     logo: 'https://example.com/logo.png'   } }})

4. 自定义节点

<script lang="ts" setup>useSchemaOrg([ {   '@type': 'DefinedTerm',   'name': 'Nuxt Schema.org',   'description': 'Nuxt Schema.org is a Nuxt module for adding Schema.org to your Nuxt app.',   'inDefinedTermSet': {     '@type': 'DefinedTermSet',     'name': 'Nuxt Modules',   }, }])</script>

更加详细的配置可以参考官方文档：Schema.org

添加 Google Analytics 统计代码

1. 安装 nuxt-gtag：

npx nuxi@latest module add gtag

2. nuxt.config.ts 添加配置：

export default defineNuxtConfig({  modules: ['nuxt-gtag'],  gtag: {    id: 'G-XXXXXXXXXX'  }})

3. 或者在环境变量中添加 NUXT_PUBLIC_GTAG_ID ：

NUXT_PUBLIC_GTAG_ID = G-XXXXXXXXXX

添加 Microsoft Clarity 统计代码

1. 安装 nuxt-clarity-analytics：

pnpm add -D nuxt-clarity-analytics

2. nuxt.config.ts 添加依赖：

export default defineNuxtConfig({  modules: [    'nuxt-clarity-analytics'  ]})

3. 在环境变量中添加：

MICROSOFT_CLARITY_ID = 'clarity ID'

添加 Umami 统计代码

1. 安装 nuxt-umami：

pnpm add nuxt-umami

2. nuxt.config.ts 添加配置：

defineNuxtConfig({  extends: ['github:ijkml/nuxt-umami']});

3. app.config.ts 添加配置：

export default defineAppConfig({  umami: {   id: '95653e90-7b8b-4541-b6de-ea5e544d8c2d',   host: 'https://umami.baiwumm.com',   useDirective: true,   version: 2,   domains: ['dream-site.cn'],   ignoreLocalhost: true }});

4. 跟踪事件

<button v-umami="'Event-Name'">  Event Button</button><button v-umami="{name: 'Event-Name'}">  as object</button><button v-umami="{name: 'Event-Name', position: 'left', ...others}">  with event details</button>

详细文档：nuxt-umami

总结

Nuxt3 集成了很多 SEO Modules，使开发者能够更加高效便捷地做好搜索引擎方面的优化。

好了，这篇文章就到这了，希望对你有所帮助！