Nuxt-SEO优化总结-持续更新我们在采用 Nuxt3做 web官网，然后需要定期查看搜索引擎是否正确收录了我们的网

我们在采用 Nuxt3做 web官网，然后需要定期查看搜索引擎是否正确收录了我们的网页，这个很关键

SEO 优化，是持续的操作，并不是一次就ok了

前提条件

google 搜索引擎优化，需要能访问外网才行。做国内的，就关注百度，必应等即可。

常见问题

1. 怎么判断页面是否被google 搜索引擎收录了？

google搜索，例如：输入

site:www.baidu.com

没有收录的情况

或者登录 google search console 后台查看

问题分析：

假设你已经正确部署了你的站点， google 还是没有收录，排查方向

有没有正确向 google 提交站点地图 sitemap.xml

手动在上面的 google search console 中使用 url 网址检查，提交一下
检查原因

更新日期： 2024-07-22

2. 结构化数据

给网站添加结构化数据，帮助爬虫更好的熟悉我们的网站, 主要还是参照 google 给出的指导

结构化数据标记的运作方式简介 | Google 搜索中心 | 文档 | Google for Developers

主要使用script 标签编写
是一个json
schema org 规范，内容很多，比较难全部掌握，但是可以借助GPT 实现自动编写。

主要长这样。

案例数据来源： pixlr.com/image-gener… 可能需要翻墙

网站评分

<script type="application/ld+json">
[
    {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "AI Image Generator Online Free",
        "description": "Free online AI Image Generator, do Text-to-Image directly in the browser, lots of setting and styles.",
        "applicationCategory": "MultimediaApplication",
        "operatingSystem": "Windows 7+, OSX 10.6+, Android, iOS",
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.89",
            "ratingCount": "22332"
        },
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        }
    }
]
</script>

GPT 解释含义：

这段结构化数据使用了Schema.org的词汇来描述一个软件应用——"AI Image Generator Online Free"，它是一个免费的在线图像生成器，允许用户直接在浏览器中将文本转换为图像，并提供了多种设置和风格选项。下面是各部分的详细解释：

@context: 指定了使用的JSON-LD上下文，这里是Schema.org的标准。
@type: 定义了实体类型，这里是一个“SoftwareApplication”，即软件应用。
name: 软件应用的名称，这里是“AI Image Generator Online Free”。
description: 对软件应用的简要描述，说明其功能是免费在线生成图像，可在浏览器中直接操作，并提供多样化的设置和风格。
applicationCategory: 应用程序的类别，这里是“MultimediaApplication”，即多媒体应用。
operatingSystem: 支持的操作系统，包括Windows 7及以上版本、OSX 10.6及以上版本、Android和iOS。
aggregateRating: 综合评分信息，包含：
- ratingValue: 平均评分，这里是4.89分（满分为5分）。
- ratingCount: 参与评分的人数，这里是22,332人。
offers: 提供的报价或价格详情，表明这是一个免费服务：
- @type: 定义了“Offer”类型。
- price: 价格，这里是0美元。
- priceCurrency: 使用的货币单位，这里是美元（USD）。

整体来看，这段结构化数据提供了关于这个AI图像生成器的基本信息，包括它的功能、兼容性、用户评价以及定价策略。这种格式的数据有助于搜索引擎理解和索引网页内容，从而改善搜索结果中的可见性和准确性。

ok, 我们已经大致知道了结构化数据是什么，长什么样子

怎么编写结构化数据？上GPT

网站图片

eg: 我有一个图片类网站，我希望将首页的图片写进结构化数据，需要怎么编写, 希望提供 application/ld+json 的格式

当你希望使用application/ld+json格式来嵌入结构化数据时，你需要将数据放在一个<script>标签内，并设置type属性为application/ld+json。以下是使用application/ld+json格式来描述首页上的一张或多张图片的示例：

单张图片示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "ImageObject",
    "url": "https://example.com/path/to/your/image.jpg",
    "contentUrl": "https://example.com/path/to/your/image.jpg",
    "name": "Example Image Title",
    "description": "This is a detailed description of the image.",
    "width": 800,
    "height": 600
}
</script>

多张图片示例

如果你需要描述多张图片，可以将它们放在同一个数组对象中：

<script type="application/ld+json">
[
    {
        "@context": "https://schema.org",
        "@type": "ImageObject",
        "url": "https://example.com/path/to/your/image.jpg",
        "contentUrl": "https://example.com/path/to/your/image.jpg",
        "name": "Example Image Title",
        "description": "This is a detailed description of the image.",
        "width": 800,
        "height": 600
    },
    {
        "@context": "https://schema.org",
        "@type": "ImageObject",
        "url": "https://example.com/path/to/your/image222.jpg",
        "contentUrl": "https://example.com/path/to/your/image222.jpg",
        "name": "Example Image Title",
        "description": "This is a detailed description of the image.",
        "width": 800,
        "height": 600
    }
]
</script>

这些示例展示了如何使用application/ld+json格式来描述一张或多张图片。

上面我们是用 GPT 编写了结构化数据，但是不一定是对的, 我们需要使用工具进行验证

可以使用这2个工具都行

但是第一个感觉是支持的更全面，细致，能明确告知我们错误在哪里；

第二个是google 官方的，只能支持 google 搜索引擎关注的参数。

技巧： 编写以后，好本地测试一下，把字符串copy到测试工具中即可，避免反复发版。

validator.schema.org.png 截图

google 富媒体搜索结果-截图.png

使用在线网址运行-截图.png

FAQ - 结构化数据

另外，可以把网站的 FAQ 场景问题也写入到结构化数据，每个页面都是自己的FAQ, 所以在 Nuxt3 里面，最好不要写到 Layout 中

代码示例：

<script type="application/ld+json">
   {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "What is a AI Image Generator",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "AI Image Generator is an innovative tool using advanced AI techniques to generate image from a text prompt, just write what you want to generate and our AI will create it."
            }
        },
        {
            "@type": "Question",
            "name": "How does AI Generate Images?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "AI Image Generator creates images with vibrant colors and high quality right out of the box. Our machine learning model scans millions of internet images and associated text, enabling the AI to predict and create images tailored to your provided text. Experience next-level content creation with our AI Image Generation technology."
            }
        },
        {
            "@type": "Question",
            "name": "Does the Image Generator Create Unique Images?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Absolutely! Each image produced by the AI image generator is one-of-a-kind. Save time by skipping the design process—simply input your description, and witness your vision come to life in vibrant images. The only limit to generating images is your own imagination!"
            }
        },
        {
            "@type": "Question",
            "name": "Is the Image Generator Free?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Yes, Pixlr AI image generator provides a complimentary tier for you to explore our exceptional text-to-image tool. As a new user, enjoy the freedom of generating 20 images using 20 credits. Additionally, take advantage of our free trial to experience 250 credits free of charge. Bring your imagination to life swiftly. If you require assistance, simply reach out to us."
            }
        },
        {
            "@type": "Question",
            "name": "Can I use Generated AI images for commercial purposes？",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Yes you can, Pixlr do not retain any copyright from the text-to-image generations, but make sure you do follow the T&C and our guidlines"
            }
        },
        {
            "@type": "Question",
            "name": "Who owns the copyright of the AI Generated images?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "This remains an open question for the global community, with no definitive answer at present. Pixlr currently refrains from asserting any copyright claims over the content generated by users. Moreover, Pixlr lacks the capability to license or grant usage rights for the output content to users. It's important to be aware that this scenario may evolve with the development of copyright laws in different jurisdictions."
            }
        },
        {
            "@type": "Question",
            "name": "Is AI Image Generator legal?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "While AI-generated artwork itself cannot be copyrighted or attributed to a specific individual, it's important to note that the artwork used to train the generator algorithms is often copyrighted, owned, or credited to human artists and creators. Consequently, there is a potential for copyright infringements when producing AI-generated art."
            }
        },
        {
            "@type": "Question",
            "name": "What’s the best AI Image Generator?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "The best AI Image Generator and text-to-image conversion without the use of complicated software is here. Just describe your vision, and watch it instantly transform into stunning AI images for your blog or social media. Unleash your creativity effortlessly with our free Text to Image generator, available on both web and mobile."
            }
        },
        {
            "@type": "Question",
            "name": "Why use a AI Image Generator?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "There are plenty of benefits to using an AI Text to Image generator. Bring your ideas to life instantly without having to spend time designing from scratch. No more creative blocks as you start inspired and easily create stunning visuals. Use your AI-generated photos as eye-catching web content, quirky social media posts, or winning design proposals. Convert text to image using an AI generator—it's fun, fast, and free!"
            }
        },
        {
            "@type": "Question",
            "name": "Is it safe to us the Image Generator?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Our free AI art generator will kickstart your concepts and let artful inspiration flow. To help you use Text to Image safely and responsibly, we’ve put layers of safety measures in place, including automated reviews of input prompts for terms that might generate inappropriate content. If you do come across unsafe content, let us know: you can report it right in Pixlr. "
            }
        }
    ]
}
</script>

一般，copy上面的，只需要改一下， name 和 text 就可以了

上面仅仅是结构化数据的冰山一角。

结构化数据，在一个 html 文件可以有多个，也可以都写在一个script中； Nuxt3 写多个，默认是合并成一个，没有影响
Nuxt3 一般是接入 Install Nuxt Schema.org · Nuxt SEO 插件
结构化数据比较大，为了代码比较清晰，间隙抽离为 hooks

demo:

/hoos/index-schema.ts

import { useI18n } from 'vue-i18n'

const imageList = [
  "https://www.xxx/images/remove-background/case/01-1.webp",
  "https://www.kxxx/images/remove-background/case/01-2.webp",
  "https://www.xxsss/_ipx/f_webp&q_50/images/remove-background/explore-01.webp"
]

const genSchemaImage = () => {
  return imageList.map(p => {
    return {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": p
    }
  })

}

/**
 * 结构化数据
 */

export default () => {
  const { t } = useI18n()

  // 网站结构化数据
  useSchemaOrg([
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": t('removeBg.qa[0].title'),
          "acceptedAnswer": {
            "@type": "Answer",
            "text": t('removeBg.qa[0].list[0]')
          }
        },
        {
          "@type": "Question",
          "name": t('emoveBg.qa[1].title'),
          "acceptedAnswer": {
            "@type": "Answer",
            "text": t('removeBg.qa[1].list[0]')
          }
        },
        {
          "@type": "Question",
          "name": t('removeBg.qa[2].title'),
          "acceptedAnswer": {
            "@type": "Answer",
            "text": t('removeBg.qa[2].list[0]')
          }
        },
        {
          "@type": "Question",
          "name": t('removeBg.qa[3].title'),
          "acceptedAnswer": {
            "@type": "Answer",
            "text": t('removeBg.qa[3].list[0]')
          }
        },
      ]
    }
  ])

  useSchemaOrg(genSchemaImage())
}

上面将结构化数据抽离，方便维护迭代；
上面案例使用了多语言，所以这里使用了 vue-i18n

页面使用

<script setup>
    import useIndexSchema from '~/hooks/index-schema'
    useIndexSchema()
</script>

除了上面这样写，其实还可以按照 Nuxt3 如下写法; 本质就是塞入一个 script


<script setup>
import {useI18n} from 'vue-i18n'

const { t } = useI18n()

let qa1 = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
       "name": t('step9.qaList[0].title'),
       "acceptedAnswer": {
         "@type": "Answer",
         "text": t('step9.qaList[0].list[0]')
       }
    },
    {
      "@type": "Question",
       "name": t('step9.qaList[1].title'),
       "acceptedAnswer": {
         "@type": "Answer",
         "text": t('step9.qaList[1].list[0]')
       }
    },
    {
      "@type": "Question",
       "name": t('step9.qaList[2].title'),
       "acceptedAnswer": {
         "@type": "Answer",
         "text": t('step9.qaList[2].list[0]')
       }
    }
  ]
}

useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify(qa1)
    }
  ]
})

</script>

更新日期：2024-07-25

持续更新中...

Nuxt-SEO优化总结-持续更新