2025-12-23 2025-12-26 【SEO优化】语义化优化&元数据提取

1. 语义化优化 (Semantic Optimization)

将布局组件中的通用 div 标签替换为更具语义的 HTML5 标签，提升页面结构的可读性和 SEO 友好度。header、footer、main 标签。

2. 元数据提取 (Metadata Extraction)

利用 @vueuse/head 为应用添加了全局和页面级的元数据配置，优化搜索引擎抓取和社交分享效果。

useHead({
  title: "项目名称",
  titleTemplate: "%s - 项目名称",
  meta: [
    {
      name: "description",
      content: "xxxxx",
    },
    { name: "keywords", content: "key1,key2" },
  ],
  style: [
    {
      children: "html { font-size: 192px; }",
    },
  ],
});

3. meta 配置

• index.html

<!-- SEO Meta Tags -->
<title>xxx - xxx</title>
<meta name="description" content="xxxxxx" />
<meta name="keywords" content="xxx,xxx,xxx" />

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="xxx - xxx" />
<meta property="og:description" content="xxxxxxxxx" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://xxx.xxx.com" />
<meta property="og:image" content="https://xxx.xxx.com/assets/logo.png" />

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="xxx - xxxx" />
<meta name="twitter:description" content="xxxx" />
<meta name="twitter:image" content="https://xxx.xxx.com/assets/logo.png" />