SEO方案记录

295 阅读10分钟

SEO优化方案

短期优化:

  1. keywords关键词数量
    head标签中的keywords关键词数量不能过多,一两个最好。

  2. 标题含关键词
    head标签中的网页标题包含一两个keywords里面的关键词不能过多

  3. 正文含关键词
    网页正文也需要包含keywords里面的关键词,比例在7%-8%

  4. content含关键词
    head标签中的description中包含关键词,与正文内容相关,文字不要超过200字

  5. 正文和标题吻合
    网页正文要与head标签中的网页标题的主题高度吻合,否则会导致当前文章被搜索引擎屏蔽。

  6. img标签加alt做关键词优化
    蜘蛛不能直接识别图片。所以可以使用alt属性,因为alt属性不仅能帮助蜘蛛来识别图片,同时也是蜘蛛识别咱们网页图片的唯一方法。同时合理的使用alt属性,也能提高一下咱们关键词在页面的比例

  7. 在a标签加title做关键词优化

  8. 通过vue-meta-info插件 动态修改详情页面title、keywords、description标签,内容为当前详情的标题信息

后续长期优化:

服务端渲染(ssr)+ 伪静态站点

伪静态

伪静态是相对真实静态来讲的,通常我们为了增强搜索引擎的友好面,都将文章内容生成静态页面,但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。怎么样在两者之间找个中间方法呢,这就产生了伪静态技术。伪静态技术是指展示出来的是以html一类的静态页面形式,但其实是用ASP、JSP一类的动态脚本来处理的。

从URL结构以及页面名称看,伪静态和静态页面是一样的。伪静态的页面后缀可以是html htm 或者是目录格式

伪静态只是改变了URL的表现形式,实际上还是动态页面

静态页面可以节省服务器资源,而伪静态严格说是增加服务器资源消耗的

代码层面:Nuxt.js,将资源详情、试卷详情等权重较高的页面迁移到zw-st-login 项目中,采用服务端渲染这些页面,增强seo

服务器配置层面:采用伪静态,需要拦截.html结尾的请求,否则程序认为你访问的是具体的静态资源

搜索引擎会不收录带问号的网址?因为搜索引擎怕由于问号而进入死循环

修改页面url,将前端路由改为以.html结尾的url链接,搜索引擎对.html结尾的文件收录和爬取更加友好,提高网站的曝光率.。

不足:流量稍大一些使用伪静态就出现CPU使用超负荷,由于伪静态是用正则判断而不是真实地址,分辨到底显示哪个页面的责任也由直接指定转由CPU来判断了,所以CPU占有量的上升,确实是伪静态最大的弊病.

具体实施:

  1. 创建动态路由文件:首先,在 pages 目录下创建一个动态路由文件,用于处理动态详情页的路由。按照惯例,你可以在 pages 目录下创建一个 _id.vue 文件(_id 是动态参数的占位符)。

    <template>
      <div>
        <!-- 动态详情内容 -->
      </div>
    </template>
    
    <script>
    export default {
      async asyncData({ params }) {
        // 根据 params.id 获取动态详情数据
        const detail = await fetchDetail(params.id);
        return { detail };
      },
    };
    </script>
    

    注意,_id.vue 文件中的 asyncData 方法可以在服务端渲染或预渲染时拉取相应的动态详情数据。

  2. 配置动态路由:在 Nuxt.js 的配置文件 nuxt.config.js 中的 router 配置项中,将动态路由添加到 routes 数组中。

    javascript
    export default {
      router: {
        routes: [
          // 配置动态路由
          { path: '/posts/:id', component: '~/pages/_id.vue' },
        ],
      },
    };
    

    上述配置将动态路由 /posts/:id 映射到 pages/_id.vue 文件。

  3. 预渲染(可选):如果你希望生成静态 HTML 文件以实现伪静态页面,可以使用 Nuxt.js 的预渲染功能。在 nuxt.config.js 文件中添加 generate 配置项,并设置预渲染的动态路由。

    export default {
      generate: {
        routes: [
          // 设置预渲染动态路由
          '/posts/1',
          '/posts/2',
          // ...
        ],
      },
    };
    

    预渲染时会根据配置的动态路由生成对应的静态 HTML 文件。

通过以上步骤,你可以在 Nuxt.js 中将动态详情页做成伪静态页面。当访问 /posts/1 或其他对应动态参数的路径时,Nuxt.js 会根据配置的动态路由文件加载相应的内容。如果需要预渲染,还可以生成静态 HTML 文件以实现伪静态效果。

--------------------------------------------------------------------------------------------分割线 2023/08/10--------------------------------------------------------------------------------------------

seo方案,伪静态页面具体如何实施:

  1. 了解伪静态页面的概念:伪静态是指通过对动态生成的页面进行处理,使其看起来像静态页面一样,具有对搜索引擎友好的URL结构和优化的内容展示。
  2. 配置服务器:在服务器上设置URL重写规则,以将请求重定向到对应的动态页面或处理程序。具体配置方法取决于服务器,如Apache、Nginx等。
  3. URL重写规则:创建一个规则集合,定义动态页面的URL重写规则。这些规则将根据特定的URL模式重写请求,将其转发到服务器端处理程序。
  4. 动态页面处理程序:在服务器端编写处理程序,用于根据URL重写规则和请求参数动态生成页面内容。该处理程序可以根据不同的URL参数来生成不同的页面内容。
  5. 优化URL结构:使用伪静态页面的同时,优化URL结构以提高搜索引擎的可读性和友好度。使用有意义的关键词和描述性的URL路径,有助于提高页面的排名和点击率。

需要注意的是,伪静态页面的实施可能因服务器类型、框架或开发语言而有所不同。确保深入研究和理解你使用的服务器和开发环境,并参考相关文档和技术资源,以确保正确地实施伪静态页面。

另外,伪静态页面的实施需要维护和管理URL重写规则,并确保动态页面的内容与伪静态页面的一致性。同时,你也需要确保伪静态页面的性能良好,避免过多的服务器负载或延迟。

这个方案对前端得页面框架没有要求:

伪静态页面方案对前端页面框架没有特定的要求。它主要是通过服务器配置和URL重写规则来实现。

伪静态页面方案主要涉及到服务器的设置和处理程序的编写,用于处理URL重写和生成内容。这意味着不论你使用哪种前端页面框架,如React、Vue.js、Angular等,都可以实施伪静态页面方案。

在实施伪静态页面时,你只需要确保服务器正确配置URL重写规则,并在服务器端编写正确的处理程序来生成页面内容。前端页面框架的使用方式和组件开发则可以独立于伪静态页面的实施。

因此,无论你使用哪种前端框架,伪静态页面方案都可以与其配合使用。你可以选择适合你的前端框架和技术栈,并根据需要进行伪静态页面的实施。

伪静态页面方案需要前端做些什么:

对于伪静态页面方案,前端开发者通常需要完成以下几个步骤:

  1. 将所有的动态URL转换为静态URL:在服务器配置中,将动态页面的URL重写为静态URL,去掉动态参数和后缀,使得页面看起来像是静态页面。
  2. 使用HTML/CSS/JavaScript模板引擎:使用模板引擎可以将动态数据和页面内容分离,使页面的内容动态地渲染出来。
  3. 配置服务器缓存和HTTP头:在服务器上配置缓存策略,包括设置页面的缓存时间、开启Gzip压缩、ETag等,以减少页面加载时间和服务器压力。
  4. 处理404页面:为了避免出现404错误,前端开发者需要设置一个统一的404页面,使用户访问无效页面时能够有一个友好的提示。
  5. 优化加载性能:通过使用CDN加速、压缩文件、合并脚本和样式表等技术来提高页面的加载速度和性能。

请注意,虽然前端开发者在伪静态页面方案中扮演重要的角色,但最终的实现仍然需要在后端服务器上完成相关的配置和操作。

使用nuxt框架之后是不是就不需要服务端得配置了:

使用Nuxt.js框架不一定完全不需要服务端的配置,但它可以简化一些服务器端的配置工作。Nuxt.js是一个基于Vue.js的服务端渲染框架,它提供了预置的服务器端渲染配置和路由配置,可以自动生成基于这些配置的静态页面。

Nuxt.js的优点之一是默认情况下会生成静态页面,这意味着不需要像传统的动态应用程序那样在服务器上进行动态渲染。在构建Nuxt.js项目时,会生成一组静态文件,这些文件可以直接部署到服务器上,无需额外的服务器配置。

然而,对于一些特殊需求,仍然需要涉及服务器端的配置。例如,如果需要使用API路由进行数据获取、设置服务器端路由重定向或使用服务器端插件等,这些都需要一些服务器端的配置。

总的来说,Nuxt.js可以减少一些传统服务器端配置的工作,但对于一些特殊需求,仍然可能需要进行服务器端的配置。

所以nuxt项目做伪静态页面是不是只需要前端做就行:

是的,使用Nuxt.js框架可以用于实现伪静态页面,且减少了对于服务器端的配置需求。由于Nuxt.js具备服务端渲染(SSR)的功能,可以在服务器端生成静态页面,然后将这些静态页面直接部署到服务器上。

在Nuxt.js项目中,通过配置路由和页面组件,可以创建动态路由和动态页面。通过使用asyncData或fetch方法,可以从服务器或接口获取数据,并将数据预渲染到生成的静态页面中,实现伪静态的效果。这样,当用户访问这些静态页面时,会直接展示预渲染好的内容,而无需进行动态页面渲染。

在这个过程中,前端开发者需要负责设置路由和页面的配置、定义页面组件并处理获取数据的方法,以及构建并部署生成的静态页面。

但需要注意的是,对于特定的需求,仍然可能需要进行一些服务器端的设置和配置。例如,处理URL重写、配置缓存策略、使用CDN加速等,这些操作可能需要在服务器端进行。因此,在某些情况下,可能需要前端与后端协作来实现完整的伪静态页面方案。

ps:

  1. SEO收录规则:ziyuan.baidu.com/college/cou…
  2. 普通收录:ziyuan.baidu.com/linksubmit/…,支持主动push
  3. 快速收录:ziyuan.baidu.com/dailysubmit…