H5网站SEO前端处理优化

最新推荐文章于 2024-06-04 16:45:27 发布

逆袭的菜鸟X

最新推荐文章于 2024-06-04 16:45:27 发布

阅读量1.9k

点赞数

分类专栏：我的前端

本文链接：https://blog.csdn.net/weixin_36445197/article/details/108829015

版权

我的前端专栏收录该内容

87 篇文章 5 订阅

订阅专栏

1、TDK优化

新网站一定要提前想好TDK，这将对SEO起到非常重要的左右，因为搜索引擎首先抓取的就是这个。

TDK指的是什么呢？

T：title 网站的标题，包含网站名称和网站的定位关键词，不宜太长。
D：description 网站简介，最好保持在50字以内。
K：keywords 网站关键词，最好保持在2-30字以内。
TDK在页面头部的meta标签，还有一些其他的，比如：author 网站的作者等等。
代码如下：

<head>
    <title>w3h5 - 前端资源网</title>
    <meta name="description" content="w3h5资源网是一个WEB前端资源分享网站，提供技术经验和一些常用的网站工具等。">
    <meta name="keywords" content="WEB前端,前端资源网,w3h5">
</head>

2、习惯使用语义化标签，比如h1、h2…标题标签等。

url采用绝对网址，或者使用网站伪静态，因为搜索引擎是不会抓去动态内容的。

优化HTML、js、css、php等的代码格式。

3、路由跳转优化

使用React或者Vue开发的很多网站都是在click方法里跳转路由,修改为a标签跳转,方便爬虫的进一步抓取

<Link
    target="_blank"
    to={`/resource/roommeet/3?p=${getLocalStorage("ParkID")}`}
    onClick={() => {
    }}
>
</Link>

4、url优化

上一步中a标签的url爬虫会进行抓取,确保你的url可以包含下个页面需要的所有数据

http://localhost:8000/policy?p=1295034796212309&pr=0&pt=1%2C2%2C3

上述链接中就传了下个页面需要的三个参数

数据id
选项标签的选中状态(如下图)

状态标签选中变化url代码如下:

<Link
    key={tag.ID}
    to={changeUrlParams(window.location.search, { pt: this.changeValues(tag.TagValue, selectPolicyTypeValues) })}
    className={"classify" + (this.isContains(tag.TagValue, selectPolicyTypeValues) ? " classify-checked" : "")}
    onClick={() => mtaH5Click(statisticsEvent.policyFiltering)}
>
    {tag.TagName}
</Link>

// 判断多选是否包含
isContains(tagValue, tagValues: any[] = []) {
    if (tagValues.length === 0) return false;
    if (tagValues.indexOf(tagValue) > -1) return true;
    else return false;
}

// 多选Value的更替
changeValues(tagValue, tagValues: any[] = []) {
    const newTagValues = this.isContains(tagValue, tagValues) ? tagValues.filter(t => t !== tagValue) : [...tagValues, tagValue];
    if (newTagValues.length > 0) return newTagValues.join(",");
    else return null;
}

/** 变更Url参数 */
export function changeUrlParams(url: string, params: {}) {

    let index = url.indexOf("?"), isOnlyP = true,
        beforeIndexUrl = index > -1 ? url.substring(0, url.indexOf("?")) : url,
        afterIndexUrl = index > -1 ? url.substring(url.indexOf("?")) : "",
        pIndex = afterIndexUrl.indexOf("p");

    if (pIndex > -1) {
        const afterP = afterIndexUrl.substring(pIndex);
        isOnlyP = afterP.indexOf("&") === -1 ? true : false;
    }

    for (let key in params) {
        if (params.hasOwnProperty(key)) {
            let value = params[key];
            const isValueNull = (typeof (value) === "string" && value.trim() === "") || value === null;
            value = isValueNull ? null : standardEncoding(value);

            if (afterIndexUrl.indexOf("&" + key + "=") > -1 || afterIndexUrl.indexOf("?" + key + "=") > -1) {
                if (isValueNull) {
                    const regex = new RegExp("(&" + key + "=)([^&]*)+", "ig");
                    afterIndexUrl = afterIndexUrl.replace(regex, "");
                } else {
                    const regex = new RegExp("(" + key + "=)([^&]*)+", "ig");
                    afterIndexUrl = afterIndexUrl.replace(regex, function (_matchStr, g1) {
                        return g1 + value;
                    });
                }
            } else {
                if (afterIndexUrl.indexOf("&") === -1) {
                    if (!isValueNull) {
                        const symbol = isOnlyP ? "&" : "?";
                        afterIndexUrl = afterIndexUrl + symbol + key + "=" + value;
                    }
                } else {
                    if (!isValueNull) {
                        afterIndexUrl = afterIndexUrl + "&" + key + "=" + value;
                    }
                }
            }
        }
    }

    url = beforeIndexUrl + afterIndexUrl;
    return url;
}