web网站接入SEO

网站接入SEO

最近项目需要接入到google，以便于网站的seo优化，以下是详细的接入方式和代码层的注意事项

google search接入

Search Console 中的工具与报告可帮助您衡量您网站的搜索流量和搜索排名情况、解决相关问题以及让您的网站在 Google 搜索结果中脱颖而出，请点击传送门查看。

1. 添加资源 选择网址前缀输入对应的网站

2. 验证所有权
   这里我选择的是HTML 标记，只需要将对应的meta代码片段放到对应网站的head标签中即可,然后点击验证。这个时候已经成功添加了网站

3. 配置站点地图

站点地图功能如下：

1. 加速页面索引
   • 作用：提交站点地图帮助 Google 更快地找到并索引你网站上的页面，尤其是对于新网站、更新内容频繁的网站或大型网站。
   • 如何帮助：如果你的网站有很多页面，Google 可能没有时间或没有足够的链接从其他页面中发现所有页面。站点地图通过提供页面的结构，让 Google 更容易找到并抓取所有页面，减少漏抓的可能。

2. 优化抓取效率
   • 作用：站点地图告诉 Google 哪些页面是重要的，以及它们如何相互链接。Google 可以优先抓取这些重要页面，从而提高抓取效率。
   • 如何帮助：站点地图中的每个 URL 都会提供给 Google 需要抓取的信息，包括页面的更新时间、优先级、频繁更新的时间间隔等。这些信息可以帮助 Google 更好地管理抓取资源，避免抓取过时的或不重要的内容。

3. 帮助 Google 发现新页面或更新页面
   • 作用：通过站点地图，Google 可以更轻松地发现新发布的页面或已更新的页面，即使这些页面没有足够的外部链接或内部链接也能被抓取。
   • 如何帮助：当你发布新的文章或更新旧页面时，站点地图可以向 Google 提供这些页面的 URL，从而帮助搜索引擎尽快抓取和索引它们。

站点地图为XML文件，示例代码如下：

  <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
      <loc>https://www.example.com/</loc>
      <lastmod>2025-02-20T18:00:00+00:00</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
  </url>
  <url>
      <loc>https://www.example.com/about</loc>
      <lastmod>2025-02-19T18:00:00+00:00</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
  </url>
</urlset>

- [ ]	loc: 页面 URL
- [ ]	lastmod: 最后更新时间
- [ ]	changefreq: 更新频率（如：daily、weekly、monthly 等）
- [ ]	priority: 页面优先级（1.0 为最高

但是我们的网站会有很多页面，比如商品的详情页有很多，所以我们需要一个工具来生成这个文件,我这里基于node写了一个js，来实现自动创建XML文件，具体代码如下：

import fs from 'fs'
import axios from 'axios'
import https from 'https'
import path from 'path'
import { SitemapStream } from 'sitemap'

// 获取当前文件的目录路径
const __dirname = path.dirname(new URL(import.meta.url).pathname)

// 创建自定义的 httpsAgent，禁用 keepAlive
const agent = new https.Agent({
	keepAlive: false, // 禁用 keepAlive
})

const host = 'https://www.demo.com/' // 网站域名
const apiEndpoint = 'https://api' // 获取数据的接口
const floderName = 'sitemap.xml' // 存放的文件名
const floderPath = 'public' // 需要存放的目录

// 模拟浏览器请求头
const headers = {
	Accept: 'application/json, text/plain, */*',
	'Accept-Encoding': 'gzip, deflate, br',
	Connection: 'keep-alive',
	'Content-Type': 'application/json',
}

console.log('Sitemap generation started')

// 生成站点地图并保存到 public 目录
async function generateSitemap() {
	try {
		// 从接口获取数据
		const response = await axios.get(apiEndpoint, {
			timeout: 10000, // 设置超时时间，单位是毫秒
			headers,
			httpsAgent: agent,
		})

		let data = response.data.data
		// 创建 SitemapStream 实例
		const smStream = new SitemapStream({ hostname: host })

		// 确保 目录存在
		const publicDir = path.resolve(__dirname, floderPath)
		if (!fs.existsSync(publicDir)) {
			fs.mkdirSync(publicDir)
		}

		// 使用绝对路径
		const xmlPath = path.resolve(publicDir,floderName)
		const xmlWriter = fs.createWriteStream(xmlPath)
		smStream.pipe(xmlWriter)

		// 向 SitemapStream 中写入每个 URL
		smStream.write({ url: '/', changefreq: 'daily', priority: 1.0 })
		console.log('data', data)
		data.forEach((art) => {
			smStream.write({
				url: `/detail?category_name=全部商品&id=${art.originalId}`,
				changefreq: 'daily',
				lastmod: new Date(art.createTime).toISOString(),
			})
		})
		// 结束流
		smStream.end()

		// 确保文件写入完成
		await new Promise((resolve) => {
			xmlWriter.on('finish', resolve)
		})

		console.log('Sitemap generated and saved to public/sitemap.xml')
		process.exit(0) // 成功时退出程序
	} catch (error) {
		console.error('Error generating sitemap:', error)
		if (error.code === 'ECONNRESET') {
			console.error('Connection reset by peer')
		} else {
			console.error('Request failed:', error)
		}
		process.exit(1)
	}
}

generateSitemap()

使用方法：node sitemap.js则会自动创建到public目录下sitemap.xml,具体的名称和文件路径可以自行配置。
接下来需要将生成xml文件放到网站的根目录下，并且确保可以通过http://www.demo.com/sitemap.xml访问到这个文件。
配置好以上回到google search页面，将对应的xml地址配置到站点地图中，然后提交即可，在下方我们可以看到通过xml一发现的网页数量，这样就成功了。

代理层注意事项

seo主要是根据页面上head中的title、keywords、description来优化页面的，所以需要确保页面上这些数据是正确填写的。
当然如果我们是spa项目时，比如vue，html文件只有一个index.html,那我们需要动态配置详情页中的head，我这里简单封装了一个js来实现进入详情页时动态修改head，具体代码如下：

export const updateMetaTags = (name) => {
	// 更新 <title> 标签
	document.title = name

	// 更新 <meta name="title">
	let titleMeta = document.querySelector('meta[name="title"]')
	if (titleMeta) {
		titleMeta.setAttribute('content', name)
	} else {
		titleMeta = document.createElement('meta')
		titleMeta.setAttribute('name', 'title')
		titleMeta.setAttribute('content', name)
		document.head.appendChild(titleMeta)
	}

	// 更新 <meta name="description">
	let descriptionMeta = document.querySelector('meta[name="description"]')
	if (descriptionMeta) {
		descriptionMeta.setAttribute('content', name)
	} else {
		descriptionMeta = document.createElement('meta')
		descriptionMeta.setAttribute('name', 'description')
		descriptionMeta.setAttribute('content', name)
		document.head.appendChild(descriptionMeta)
	}

	// 更新 <meta name="keywords">
	let keywordsMeta = document.querySelector('meta[name="keywords"]')
	if (keywordsMeta) {
		keywordsMeta.setAttribute('content', name)
	} else {
		keywordsMeta = document.createElement('meta')
		keywordsMeta.setAttribute('name', 'keywords')
		keywordsMeta.setAttribute('content', name)
		document.head.appendChild(keywordsMeta)
	}

	// 更新 Open Graph 元数据（可选）
	let ogTitleMeta = document.querySelector('meta[property="og:title"]')
	if (ogTitleMeta) {
		ogTitleMeta.setAttribute('content', name)
	} else {
		ogTitleMeta = document.createElement('meta')
		ogTitleMeta.setAttribute('property', 'og:title')
		ogTitleMeta.setAttribute('content', name)
		document.head.appendChild(ogTitleMeta)
	}

	let ogDescriptionMeta = document.querySelector(
		'meta[property="og:description"]',
	)
	if (ogDescriptionMeta) {
		ogDescriptionMeta.setAttribute('content', name)
	} else {
		ogDescriptionMeta = document.createElement('meta')
		ogDescriptionMeta.setAttribute('property', 'og:description')
		ogDescriptionMeta.setAttribute('content', name)
		document.head.appendChild(ogDescriptionMeta)
	}
}

如果你的页面是纯html开发的，那head上的标签都固定写死就行

  <title>测试关键词</title>
  <meta name="title" content="测试关键词">
  <meta name="description" content="测试关键词">
  <meta name="keywords" content="测试关键词">

以上就是关于google seo优化-google接入的简单介绍，希望对大家有所帮助。后续会讲下如何接入google事件，进行google数据和事件分析。如有疑问，欢迎一起讨论。