Why SFC is bad for SEO
As shown in the figure, there is no content in the html document returned by directly visiting the SFC website, because the content is rendered by Vue, and the search engine cannot obtain the content.
The following is returned by nuxt
Therefore, the reason why nuxt is beneficial to seo is that direct access to the url can return the content of the page. Compared with the element html, nuxt directly requests the link, which is equivalent to clicking the 首屏渲染(整体)link on the page 路由切换（部分）. Nuxt not only ensures the optimization of search engines, but also retains the efficiency of routing switching.
seo
The SEO issues that need to be dealt with in the front end include the following aspects
- Page title, keywords, description
- page content
- Add title and alt to page resources
- Use semantic tags h1, article, section
The processing method of next3
nuxt's seo syntax is very flexible, I only give a part, click the link for details
// nuxt.config.ts
export default defineNuxtConfig({
// 页面路由
pages: true,
// app
app: {
// 网站标题、关键字、描述
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
meta: [
{
name:'keywords',content:'关键词1|关键词2|关键词3' },
{
name: 'description', content: '这里写网站的描述信息' }
],
},
},
})
// app.vue
// 网站导航模板
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${
titleChunk} - 网站标题` : '网站标题';
}
})
// /pages/about.vue
// 关于我们页面的标题
useHead({
title: "关于我们",
})
After setting, when accessing index, the title is displayed 网站标题when visiting/about is displayed as关于我们-网站标题