前端SEO优化技术汇总

article/2025/4/20 7:57:54

一、title、alt、h1

title: 网站头部标签<head>下的title,网站名称
备注:这里为什么不说标签中的title属性,,虽然鼠标上移可以显示图片名字,但是它跟SEO没一丝联系所以我们不关注它。

例如:<img title="图片名称"/> 

alt: 当网络速度很慢,或者图片地址失效的时候,它可以在图片展示的位置上显示该图片的名称,同时也能让用户知道该位置是什么商品。同时为图片设置高度和宽度,可提高页面的加载速度。

<img src="一张图片.jpg" alt="一张图片">

h1:h1标签自带权重“蜘蛛” 认为它最重要,一个页面有且最多只能有一个h1标签,放在该页面最重要的标题上面,如首页的logo上可以加H1标签。副标题用 标签, 而其它地方不应该随便乱用 h 标题标签。

 <h1 class="logo" alt="网易云音乐" title="网易云音乐"></h1>

二、meta标签

①、property属性

1、og描述:og是一种新的HTTP头部标记,即Open Graph Protocol,这种协议可以让网页成为一个“富媒体对象”。
2、OG主要标签属性
og:title 网站名称
og:type (website)
og:image (logo图)
og:url 网站地址(例如:https://music.163.com/)
og:site_name 页面所在网站名(例如:网易云音乐)
3、作用:使用Meta Property=og标签,就代表同意了网页内容可以被其他社会化网站引用,对于谷歌seo有一定的帮助。

 <meta property="og:title" content="网易云音乐">

②、name属性

作用: 因为它给搜索引擎传递重要的信息,搜索引擎通过阅读它来了解网页的大意,并且时常引用它来作为搜索结果中的“网页摘抄”提供给搜索者。

1、keywords:向搜索引擎说明你的网页的关键词

<meta name='keywords' content="网易云音乐,音乐,播放器,网易,下载,播放,DJ,免费,明星,精选,歌单,识别音乐,收藏,分享音乐,音乐互动,高音质,320K,音乐社交,官网,music.163.com">

2、description:告诉搜索引擎你的站点的主要内容

<meta name='description' content="网易云音乐是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。">

3、网站作者:

<meta name="author" content="网易云音乐" />

4、优先打开edge和chrome浏览器

<meta http-equiv="X-UA-Compatible" content="IE = edge, chrome = 1" />

5、禁用移动端缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

三、text-indent css优化

1、作用:用css将h1标签行内缩进到页面看不见(隐藏起来),隐式新增网站关键字,一般这种标签加在logo里。sohu和阿里巴巴就是这种方法.

<div class="logo" alt="网易云音乐"><h1 style="text-indent: -9999px;">网易云音乐</h1>
</div>

四、页面文章添加链接到自家的子网站(也有人称之为友链)

同时给关键字加上字体颜色和下划线,诱导用户点击跳转,子链接被点击多了该子网站排名也靠前了,后面只要一搜关键字很容易就查到当前子链接的网站。

<p><a href="https://juejin.cn/news/">掘金文章</a>是一个帮助开发者成长的社区,是给开发者用的 Hacker News</p>

五、HTML5新增的语义化标签

1.header:标签定义“网页”或“section”的页眉。
2.nav:定义导航链接的部分。
3.footer标签:代表“网页”或“section”的页脚。
4.section标签:定义文档中含有标题和段落的区域。(强调分段或分块)
5.article:代表独立、完整、可独自被外部引用的内容(博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容);(强调的是独立性!可含有完整的标题、内容、脚注)
6. aside标签:表示当前页面或文章的附属信息部分,可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。(用于article标签之内,此时表示的是该独立内容的附属信息部分);

示例:<header><nav>导航一</nav></header>
作用:让爬虫知道这一块内容是属于什么的。

六、百度搜索资源平台

网址: https://ziyuan.baidu.com/site/index#/
进入后点击页面顶部导航栏 用户中心 -> 左侧站点管理 -> 添加网站 -> 按流程操作到后面网站验证成功。
验证成功后点击页面顶部导航栏 搜索服务 -> 左侧搜索展现 -> 站点属性 -> 都给设置上(例如:上传公司logo,还有关联主体(你所在公司)。这个关联主体需要上传公司的相关隐私信息)。
以上搞好后就可以进行查看已添加的网站周期性的展现量了。

题外话:其实在 "搜索服务"模块里还有很多可以增加网站收录的方法,感兴趣的同学可以查查其他作者的资料研究下哈。搜狐和百家号以及其他网站也是可以像百度资源平台一样的,几个资源平台多管齐下更容易让我们的网站更容易被爬虫爬到,提升网站搜索排名。

在这里插入图片描述

图1
在这里插入图片描述

图2

七、SEO测试工具,浏览器自带的

Edge和Chrome都有自带的:这个工具可以帮你检测出网站还有哪些需要优化的地方,性能、SEO等,免费又实用。

在这里插入图片描述
图3
在这里插入图片描述
图4

八、总结

以上这些seo优化有利于搜索引擎爬虫的获取,让网站更容易被用户搜索到,点击量多了网站搜索权重自然就上去了同时排名也靠前了。(注意: 有效点击会增加搜索权重,无效点击不会,无效点击同一个IP多次点击)。还有一点:关键字越多越容易被爬虫检索到。

九、后话

如果框架用的是vue建议用Nuxt框架进行优化,以上是前段时间公司官网(老框架jQuery)需要优化特地研究了一下seo相关知识,当然seo肯定不止这些,感兴趣的小伙伴可以继续查查其他作者的seo方案😁。


http://chatgpt.dhexx.cn/article/QqPdQi8A.shtml

相关文章

⛳前端进阶:SEO 全方位解决方案

&#x1f33b; 前言 SEO 代表搜寻引擎最佳化/搜寻引擎优化(英文全名Search Engine Optimization&#xff0c;简称SEO)&#xff0c;是指通过了解搜寻引擎的自然排名的算法逻辑&#xff0c;以提高目标网站在有关搜寻引擎内排名的方式。 网站的 SEO 至关重要&#xff0c;它可以让…

苹果内存其他怎么清理_手机内存不足怎么清理才有效?

手机使用时间长了&#xff0c;特别是使用微信、在线看电影、小视频等&#xff0c;会产生很多缓存数据保存在手机内&#xff0c;不能自动消失&#xff0c;时间久了就形成了很多垃圾。其次&#xff0c;软件安装过多&#xff0c;也会占用很多内存&#xff0c;造成手机内存不足&…

苹果运行内存比较_iPhone手机的内存,为什么这几年一直没有像安卓这样升级

iPhone12系列刚刚发布,手机还没有到用户手中,关于下一代iPhone13的消息初见端倪,不过大部分消息都是捕风捉影,很难有事实依据作为支撑。也有一些消息可靠性比较高,比如苹果依旧没有放弃Touch ID相关研究,有可能在下一代回归。 iPhone 5s,运行内存1G,同时期安卓2G(2013)…

苹果iPhone手机升级系统内存空间变小不够如何解决?

iMazing 是一款 Windows、macOS 平台的 iPhone、iPad 管理工具&#xff0c;可以进行文件、音乐、视频传输&#xff0c;备份与还原数据&#xff0c;并且可以管理已安装应用&#xff0c;比如重新安装那些已下架的应用&#xff0c;是「史上最烂」iTunes 的优秀替代品。 如果我们手…

iPhone内存比Android手机小,iPhone内存为什么一直这么小

近年来&#xff0c;和国产安卓手机的“慷慨”相比&#xff0c;iPhone的内存始终相当“吝啬”&#xff0c;最新发布的iPhone 11系列也不过4GB内存&#xff0c;甚至不如国产千元机。不过由于iOS的流畅度有口皆碑&#xff0c;曾经2GB iPhone干法6GB甚至8GB安卓手机是常有的事儿。 …

iPhone内存管理详细解说(一)

iPhone内存管理详细解说系列转载来源&#xff1a;http://keywind.me/blog/2011/05/07/iphonenei-cun-guan-li-xiang-xi-jie-shuo-yi/ 感谢这位作者 做iPhone开发内存管理是避免不了的问题,而且Apple不对iOS进行垃圾回收机制肯定有他的原因.要想清楚了解内存管理,官方文档是最好…

​iPhone内存满了,变成白苹果了,怎么解决?

iPhone内存不足导致我们手机变成白苹果&#xff0c;开机之后还是白苹果&#xff0c;如何解决问题&#xff1f;分享几个方法给大家&#xff1a; 重启 iPhone强制重启&#xff0c;也许能帮我们退出暂时的白苹果界面。手机各型号强制重启的方法如下&#xff1a; 强制重新启动 i…

怎么清理iPhone12中内存里的“其他”

你手机的空间占用和下图类似吗? 打开「iPhone存储空间」选项&#xff0c;会发现占据空间最多的往往不是「微信」、不是「照片」&#xff0c;而是神秘的「其他」。根据苹果的描述&#xff0c;「其他」包括「缓存、日志和系统当前使用的其他资源。此数值将随着系统要求浮动」&am…

iPhone如何查看剩余内存容量 从哪里能看

如今现在的很多主流手机都没有了SD卡拓展功能&#xff0c;这在iPhone很久以前就取消了&#xff0c;对于一些经常使用但不了解内存的朋友;来说&#xff0c;如何查看内存使用情况是个问题&#xff0c;那么&#xff0c;iPhone如何查看剩余内存容量? 从哪里能看?以前来看看吧。 …

iPhone 手机内存,

iPhone,iPhone 3G:128MB内存&#xff0c; iPhone 3GS和iPad:256MB内存。 iPhone 4&#xff08;4s&#xff09;&#xff1a;512MB内存&#xff0c;800MHZ, iPhone5s :1G内存 16Gb,的存储 网络模式&#xff1a;HSPA&#xff0c;联通3G&#xff08;WCDMA&#xff09;&#xff0c;联…

iphone开发--内存管理

内存管理是iphone开发中很重要的一个环节&#xff0c;没有处理好会是系统出现很多问题&#xff0c; 很严重的一个就是直接导致程序闪退。因此&#xff0c;内存管理是很让新手头疼的&#xff0c;也是新手晋 级为菜鸟必走的一个环节。今天讨论的主题就是内存管理。 内存管理包括…

开源超融合私有云神器proxmox VE

Prxomox VE由位于奥地利维也纳的Proxmox Server Solutions GmbH开发&#xff0c;这让人有点意外。其实欧洲在IT技术方面&#xff0c;还是很强的&#xff0c;比如大名鼎鼎的mysql&#xff0c;出自瑞典&#xff1b;分布式文件系统moosefs&#xff0c;出自波兰。Proxmox主打产品有…

超融合基础架构

以软件为中心&#xff0c;替代传统架构 超融合基础架构是一种融合的、统一的 IT 基础架构&#xff0c;它包含了传统数据中心常见的元素: 计算、存储、网络以及管理工具。超融合基础架构解决方案是以软件为中心&#xff0c;结合 x86 或 ARM 架构的硬件替代传统架构中昂贵的专用硬…

VSAN超融合笔记

VMware VSAN VMware vSAN是一款软件定义的企业存储解决方案&#xff0c;支持超融合基础架构&#xff08;Hyper-Converged Infrastructure,HCI&#xff09;系统。VSAN使用软件定义的方法为虚拟机创建共享存储。可以虚拟化ESXI主机的本地物理存储资源&#xff0c;并将这些资源转…

浅谈——服务器虚拟化超融合存储

目录 一、服务器虚拟化&#xff1a; 二、服务器虚拟化技术优点&#xff1a; 三、基于虚拟服务器的双机热备&#xff08;VM漂移技术&#xff09; 四、服务器的超融合技术 五、服务器的存储&#xff1a; ①FC存储&#xff1a; ②FCOE技术存储 ③iSCSI存储 六.服务的分类: 一…

超融合和虚拟化区别-学习笔记

前沿,传统数据中心的特点。 传统的数据中心可以归为三层架构(虚拟化、服务器)、网络设备、存储设备。主要缺点为: ① 性能方面:程序放在SERVERS上,与这些程序相关的数据存在SAN,NETWORKING(IP/FC网络)成为瓶颈。 ② 可扩展方面:扩展业务,不能在此架构下淘汰更换SAN…

超融合相关知识整理

一、基本概念 HCI是一种横向扩展&#xff0c;软件集成的基础架构&#xff0c;它采用模块化方法来计算&#xff0c;网络和存储容量。HCI没有使用专用硬件&#xff0c;而是利用了分布式&#xff0c;水平的商品硬件块&#xff0c;并提供了一个用于报告和管理的单窗格仪表板。外形…

虚拟化、云计算与超融合的简单总结

一、概述 近期研究了一下超融合的内容&#xff0c;简单做了下学习总结。 虚拟化是一种基本思想&#xff0c;是云计算、超融合的基础&#xff0c;在信息系统的各层都有不同的应用&#xff0c;举例来说&#xff1a; 存储虚拟化&#xff0c;存储阵列就是将若干集中部署的磁盘先汇总…

超融合之VMware vSAN企业级超融合解决方案

一、什么是VMware vSAN&#xff1f; 软件定义的存储&#xff08;vSAN&#xff09;是软件定义的数据中心的基本组件&#xff0c;可对存储资源进行抽象化处理&#xff0c;以支持存储的池化、复制和按需分发。这使存储层与虚拟化计算层非常相似&#xff1a;都具有聚合、灵活、高效…

深信服超融合技术架构(重点介绍主要模块)

目录 超融合架构定义系统总体架构 1.aSV 计算机虚拟化平台1.1 概述1.2 aSV 技术原理1.2.1 Hypervisor 分类(1)裸金属型(2)宿主型(3) aSV 的 Hypervisor 实现 1.3 aSV 技术特性1.3.1 内存 NUMA 技术1.3.2 SR-IOV1.3.3 Faik-raid1.3.4 虚拟机生命周期管理1.3.5 虚拟机热迁移 1.4 …