前端vue项目，单页面应用（SPA）SEO优化可能遇到的问题及解决方案

最新推荐文章于 2025-03-13 22:37:24 发布

耿耿耿

最新推荐文章于 2025-03-13 22:37:24 发布

阅读量898

点赞数

文章标签：前端 vue.js javascript 搜索引擎

本文链接：https://blog.csdn.net/qq_34841115/article/details/131599889

版权

文章讲述了如何解决GoogleSEO中无主题、无描述、无logo的问题，包括在页面head中添加meta标签，以及使用动态渲染修改页面标题。同时，针对社交平台分享和百度搜索的优化，强调了OpenGraph标签的重要性，并指出需在index.html中预设静态meta信息。此外，还提及了网站多语言切换时设置html标签lang属性的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Google SEO 无主题问题

google 搜索网站，无主题，无描述，无logo；如下图

原因及解决办法：

原因：页面head标签里没有设置相应的meta标签，具体标签有如下：

<title>基因志 - 探索未知历史，记录祖先源流</title> //网站标题
<meta name="description" content="基因志 DNAChron 致力于提供高精度、高效率的父系树分析服务。以基因记录历史，探索每个人独一无二的故事。"> //网站描述信息
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> //logo图

解决：因为google搜索引擎支持爬取js动态渲染的页面，所以可以使用动态渲染的方式修改每个页面的title、description信息；title动态修改部分实现代码如下：

router.beforeEach((to, from, next) => {
	//修改标题
	if (to.meta.title) {
		/* 设置页面title */
		documentTitle(to)
	}
})

/**
 * 根据当前语言 document.title 动态设置页面标题
 * curPageObj: 路由到的页面对象
 * extraStr: 额外的标题
 * return {}
 * */
function documentTitle(curPageObj, extraStr = '') {
	extraStr ? extraStr = ' - ' + extraStr : extraStr = ''
	let _LangAndBasePathObj = LangAndBasePathObj();
	if(curPageObj.meta.title) {
		switch(_LangAndBasePathObj.lang) {
			case 'zh':
				document.title = curPageObj.meta.title + extraStr
				break;
			case 'en':
				document.title = curPageObj.meta.title_en + extraStr
				break;
			case 'ar':
				document.title = curPageObj.meta.title_ar + extraStr
				break;
			default:
				document.title = curPageObj.meta.title_en + extraStr
				break;
		}
	}
}

2. 社交平台分享后无描述信息、logo

原因：head标签里没有 Open Graph（OG）标签，用于在社交媒体平台上分享网页时显示的预览信息，如下：

<meta property="og:image" content="https://assets.dnachron.com/media/images/site/og_logo_en.png">
<meta name="og:title" content="基因志 - 探索未知历史，记录祖先源流">
<meta name="og:description" content="基因志 DNAChron 致力于提供高精度、高效率的父系树分析服务。以基因记录历史，探索每个人独一无二的故事。">

解决：因为社交平台分享不支持动态js渲染的内容，所以需要先在index.html页面写静态meta标签，这样就能确保页面渲染之前head里有相应的meta信息，分享时就可以看到全部信息了。

3. 百度搜索引擎SEO优化

问题：由于百度搜索的新版 Baiduspider-render/2.0 可以执行JS程序（仅优质网站才会有该爬虫到访），也就是百度搜索也是和社交平台爬取到的信息是一样的，所以也按照社交平台一样解决。

解决：百度搜索也是和社交平台爬取到的信息是一样都不同爬取js动态渲染的meta信息，所以也按照社交平台一样解决。

4. 网站多语言切换，动态设置网页语言（html 标签 lang属性）

作用：HTML lang 属性是用于指定网页语言的标准属性，对于语言识别、搜索引擎优化和可访问性非常重要。它应该根据网页内容的实际语言来正确设置，以确保最佳的用户体验和网站性能。

实现如下：

// 获取 <html> 元素 设置 lang 属性，英文：en、中文：zh-Hans、阿拉伯文：ar
var htmlElement = document.getElementsByTagName('html')[0];
// 修改 lang 属性值为 "en"
htmlElement.setAttribute('lang', 'zh-Hans');