DiscuzQ的SEO方案

DiscuzQ与之前的Discuz都不同，前端采用Vue开发，通过api异步获取内容，搜索引擎抓取到的页面只是一个div元素和一堆js代码，并不能解析成我们在浏览器上看到的内容。

虽说DiscuzQ官方正在完善vue+nuxt的服务端渲染方案，但是它也存在严重的短板——不能随便更换模板，开发的模板要专门做服务端适配，而且使用起来门槛较高，需要掌握一定的IT技术。

另一种SEO方案在我看来是比较好的，即旁路渲染方案。
简单来说，就是写一个解析vue前端为静态html的服务，然后把搜索引擎的爬虫重定向到这个服务，这就是旁路渲染。

nginx配置：

location ~* \.(jpe?g|png|gif|ico|svg|webp|mp4|mp3|js|css|txt|)$ {
	try_files $uri $uri/;
}

location ^~ /api {
	try_files $uri /index.php$is_args$query_string;
}

location / {
	error_page 418 =200 @proxy;
	if ($http_user_agent ~* (bot|[Ss]pider)) {
		return 417;
	}
    try_files $uri /pc.html;
}

location @proxy {
	proxy_pass http://localhost:8081;
	proxy_set_header Source $scheme://$http_host$request_uri;
	proxy_set_header Scheme $scheme;
    proxy_set_header X-Real-Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

golang服务：

package main

import "C"
import (
	"fmt"
	"github.com/gin-gonic/gin"
	"github.com/go-rod/rod"
	"github.com/go-rod/rod/lib/utils"
	"net/http"
)

func main() {
	r := gin.Default()
	r.NoRoute(func(c *gin.Context) {
		for k, v := range c.Request.Header {
			fmt.Println(k, v)
		}
		page := rod.New().MustConnect().MustPage(c.Request.Header.Get("Source")).MustWaitLoad()

		page.MustScreenshot("index.png")
		body := page.MustElement("html").MustHTML()
		_ = utils.OutputFile("index.html", body)
		c.String(http.StatusOK, body)
	})
	r.Run(":8081")
}

用户访问时，返回正常的页面，搜索引擎访问时，返回纯静态html文件。

之后我会实现一个傻瓜式的服务，dzq站长们简单修改一下网站配置就可以实现静态SEO。
欢迎DiscuzQ的开发者与使用者加入QQ群：群满了，看下面
群满了，可以加weixin拉群：tianshuapp

标签：
DiscuzQ SEO, dzq seo, vue seo, react seo