怎么嵌入到网站的html源代码中_怎么用好结构化数据标记,手把手教你做schema markup code...

news/2024/5/10 1:21:56/文章来源:https://blog.csdn.net/weixin_39654619/article/details/110799898

0bf182ac9a47c4dd383537f82009045e.png

什么是结构化数据(schema markup)?

Schema Markup( https://schema.org/)是一种代码形式用来帮助你的网页和搜索引擎进行友好的沟通,告诉搜索引擎更多关于你的信息,比如说有时候我们看到搜索结果页面有评价分数,事件日期等。包括我们有时所见的搜索结果页面右侧栏的详细信息,也属于数据结构化的成果。

简单来说,就是你可以在你的内容(页面)中,加入一些特殊的标签进行标注。当搜索引擎准确读取这些信息之后,就可以成功的读取你的内容、并且更好的给你网站打分(权重)。同时,搜索引擎还会针对你的特殊结构的内容进行特殊展现。

大多数SEO优化师都熟悉使用HTML标签,去优化H1,TITLE, META和图片,这是为了告诉搜索引擎抓取重点信息。但是HTML标签并不能展示更多的信息,至少关于网站内容是缺乏整体的理解的。这可能会不利于搜索引擎更智能地理解和向客户展示相关内容。

三种方法添加schema代码段,方法从易到难。

另外,有三种结构化数据格式:

MicroData(基于HTML)

RFDa(基于HTML)

JSON-LD(基于Java脚本)

此教程均用JSON-LD。因为,从编码的角度来看,JSON的侵入性较小。其次,Google可以读取从Javascript代码和嵌入式小部件动态注入的JSON-LD数据。

如何添加结构化数据?

1. 使用wordpress 插件

推荐1:Schema App Structured Data.这个插件的优势在于,可以自动全站添加schema code. 可以通过默认设置(例如,帖子可以默认为NewsArticle)以及通过直接编辑每个页面生成的JSON-LD来完成页面和帖子模式标记的自定义。

它可以自动创建的标记如下:

§ 页面:http://http://schema.org/Article

§ 发布:http://http://schema.org/BlogPosting

§ 搜索:http://http://search.org/SearchResultsPage

§ 作者:http://http://schema.org/ProfilePage

§ 类别:http://http://schema.org/CollectionPage

§ 标签:http://http://schema.org/CollectionPage

§ 博客:http://http://schema.org/Blog

§ BreadcrumbList:http://http://schema.org/BreadcrumbList

§ 网站:http://http://schema.org/WebSite

Step1:直接在你的后台install和active插件就好了

e8b56a86c07fc6c6229655d50ea51932.png

在setting那里找到schema APP设置默认的数据结构,也就是会显示在你的每一个页面post的默认设置。

4f86152e0b142c47c921f51eb108c6c2.png

根据自己网站的情况进行填写默认设置。以及勾选相关的选项。

然后,你在后台打开任意的页面,就可以看到插件为你默认设置的一段schemaup code.

684c01dc6ed178dd7bd7d98b1e7db522.png

完了之后点击TEST WITH GOOGLE https://search.google.com/structured-data/testing-tool/u/0/ 进行运行测试。

到这里你就会发现,这个插件好像貌似有bug,他的面包屑list里面item项无连接入口,所以在谷歌结构化数据测试工具检测为error。我查了开发者论坛,发现这个问题确实存在。

f12b2f63c262bd234c98da71e8a74678.png

有位大佬给出两个方案,我贴在下面了。在意的可以尝试一下:

<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%"><span itemprop="name">%htitle%</span></a><meta itemprop="position" content="%position%"></span>

最后提交站点地图,让谷歌进行爬取。

推荐插件2:WP SEO SCHEMA

这款插件的好处就是,可以在每个编辑页面里自由选择schemacode 的类型和你想要展示的信息,更加灵活。但是需要你自己手动输入这些信息。

直接在WP后台安装这款插件即可。https://wordpress.org/plugins/wp-seo-structured-data-schema/也可以下载后上传。

75ae647069cccb5a73807241cf36c39f.png

此插件可以简单的添加一下模式:

§ 组织

§ 本地企业

§ 新闻文章

§ 博客发布

§ 活动

§ 制品

§ 影片

§ 服务

§ 评测

§ 综合评级

§ 餐馆

还可以实现rich snippet富文本。

就是是你经常在搜索结果中看到的额外信息,例如:

§ 星级评分

§ 活动和活动时间

§ 嵌入式网站搜索框

§ 影片

§ 面包屑

以下为一个简单的教程:

Step 1:安装并激活插件

Step 2:这个插件和上一个插件一样,有一个默认设置,让你填好网站链接,logo,公司名,价格,地址,电话,等信息

191dd11720bf22784fc75cc68aa409ea.png

Step 3:在你需要编辑的页面,下方有一个文本框,你可以选择合适的类型,然后添加相关信息。

6afc06e5355009eec7bffff5c70eaebf.png

编辑完后点击test,看看再谷歌数据结构测试里面是否有错误。

9461f0184b8e4ae5143e29516a71a560.png

2. 使用Google的结构化数据标记助手。

如果你的网站不使用WordPress,那么以下是另一种添加结构化数据的方法。使用Google提供的结构化数据标记助手(https://www.google.com/webmasters/markup-helper/u/0/)

Step 1:打开上面这个连接,你就会看到这个界面,选择合适的类型,输入网址,或者粘贴HTML.

Step 2:标记数据

左侧的窗格是你的内容(页面或HTML代码),右侧的窗格是架构标记工具。

f7bcf9889d75925535af9b76d0330d2d.png

要标记某些内容,就高亮这个部分

例如,要标记文章的标题,请通过左键单击并拖动要突出显示的文本来突出显示该文章的标题。你会看到一个弹出的框,它会为您提供不同标记标记的选项:选择合适的选项,就会自动被添加到右侧数据框中

step 3:如上一步相同的操作,标记所有重要的要素。我太懒了,就不截图啦。

Step 4:点击右上角的创建HTML,选择JASON-LD.

ab7baf54cea0de39991f2d1e75dcdacc.png

Step 5:复制粘贴此代码

33ae20d38e2653537b8052267761a869.png

Step 6:将上面的代码放到源代码中。点击下载按钮。进入此特定页面的源代码。删除当前代码并将此新代码粘贴到其位置。

ef566b2642d5de3f9eb853e628c826cc.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_827821.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

seo管理php源码_网站建设之常用CMS系统的SEO优化功能分析

大家好&#xff01;我是小熊优化的SEOER&#xff0c;在seo优化这个行业已经从业7年多了&#xff0c;优化过不少的个人和企业网站&#xff0c;根据多年的经验也总结出了不少的优化经验&#xff0c;现在大部分的网站&#xff0c;尤其是单位性质的网站基本都是采用CMS系统来做的&a…

推荐一个学习基础编程技术的网站

推荐一个学习基础编程技术的网站 RUNOOB-菜鸟教程 该网站简介&#xff1a; ----------------------------------------------------------------------------------------------------------------------------------------------------- 关于我们 菜鸟教程提供了最全的基础…

如何免费领取 Pluralsight 等各大学习网站会员?

步骤 首先你需要一个微软账号&#xff0c;如果你没有的话可以去注册一个&#xff0c;点击 注册 。 点击网址 微软 Visual Studio 福利 并登陆你微软账号&#xff0c;这时你会看到下面有很多激活码可以领取。 激活 点击Activate&#xff0c;根据操作步骤,在Pluralsight页面输入…

请检查网站服务器是否正常.,请检查服务器地址是否正确

请检查服务器地址是否正确 内容精选换一换网站的访问与云服务器的网络配置、端口通信、防火墙配置、安全组配置等多个环节相关联。任意一个环节出现问题&#xff0c;都会导致网站无法访问。本节操作介绍网站无法访问时的排查思路。网站无法访问怎么办&#xff1f;如果打开网站有…

实现WorkPress网站文章代码高亮显示

首先需要在WorkPress中下载WP Githuber MD&#xff0c;下载方法如下&#xff1a;插件—>安装插件—>右上角搜索框输入WP Githuber MD—>下载该插件。 有了插件后&#xff0c;在插件—>已安装插件中找到WP Githuber MD—>设置WP Githuber MD的属性。选中模组&am…

CTF_Crypto_MD5【BUUCTF网站题库】

题目 MD5 解压 解题 工具 MD5 解码工具 https://www.somd5.com/ 答案 最后 在flag输入 flag{admin1} 成功&#xff01;&#xff01;&#xff01; 小结 MD5简介 MD5是一种常见的加密方式&#xff0c;但准确来说&#xff0c;它只是一种编码方式&#xff0c;它将任意有限…

CTF_Crypto_Url编码[BUUCTF网站]

题目 Url编码 由此可以看出是url编码和解码操作 即 encode and decode 题目 具体的url编码后的格式 解题 url编码–拓展 浏览器打包表单输入的格式 url编码是一种浏览器用来打包表单输入的格式。浏览器从表单中获取所有的name和其中的值 &#xff0c;将它们以name/value…

【Ubuntu】}Ubuntu镜像网站

Ubuntu镜像下载 镜像下载 阿里云镜像站-aliyun mirrors 镜像网址&#xff1a; ** 浙江大学&#xff1b;&#xff08;易进&#xff09;xjtU(西安交通大学)华为云tsinghua&#xff08;清华大学&#xff09;Beijing University of Posts and Telecommunications(北邮大)&#x…

程序员必备网站和工具

程序员必备网站和工具 思维工具&#xff1a;XmindPPT模板&#xff1a;办公资源、站长素材、笨鸟网、PPTStone、六图网、欧酷PPT招聘软件&#xff1a;前程无忧、智联招聘、BOSS直聘Maven仓库&#xff1a;https://mvnrepository.com/清华大学开源软件镜像站&#xff1a;https://…

HttpClient4登陆有验证码的网站

其实就这个问题,本来是很简单的,我自己花了近两个下午才搞定,现在记录一下。也希望能帮助后来的朋友。先说httpclient 操蛋的httpclent!为什么说操蛋呢,因为从httpclient3到httpclient4,有很大的变化,而且我自己水平也不够,在jar包上出了很多问题(例如我不知道还有个httpcore…

大型网站技术架构 读书笔记4 高可用架构

说句掏心窝的话,高可用甚至比高性能更重要。为什么? 因为你把系统的性能优化10倍,你的老板可能会说:小董呀,干的不错。 可是,如果你负责的模块,三天两头就宕掉了,嘿嘿,你懂得。 可用性度量 99%-----网站年度不可用时间小于88个小时 99.9%---网站年度不可用时间小于9个小时 99.…

大型网站技术架构 读书笔记3 高性能架构

很明显,这一章是说性能优化的,那么在说性能之前,我们得先了解性能的具体定义,也就是说如何评定一个系统性能是好还是不好。因此,我们就先说说性能测试,然后分别是前端性能,应用服务器的性能以及存储性能的优化。性能测试 1 不同的人对性能的认识是不一样的对用户来说,他们认为的…

大型网站技术架构 读书笔记2 大型网站核心架构要素

通常情况下,一个网站的架构出来功能性需求外,还应该考量以下五个方面:性能可用性伸缩性扩展性安全性性能 性能的官方解释,我就不说了。对用户来说,就是系统的反应速度是否快。对网站来说,性能问题是无处不在的,继而,我们优化性能的手段也有很多。我们从前到后一个一个来说在浏览…

大型网站技术架构 读书笔记1 大型网站架构模式

架构&#xff0c;又名软件架构&#xff0c;是有关软件整体结构与组件的抽象描述&#xff0c;用于指导大型软件系统各个方面的设计。 关于什么是模式&#xff0c;这个来自建筑学的词汇是这样定义的&#xff1a;“每一个模式描述了一个在我们周围不断重复发生的问题及该问题解决方…

大型网站架构之大型网站的演变过程

大型网站的演变过程 现在网站面临的问题&#xff1a; 1.企业在网站技术上的进行了大量的投入&#xff0c;但总是在关键的时刻频繁宕机&#xff08;高性能&#xff09;&#xff1b; 2.工程师夜以继日的加班工作&#xff0c;网站缺总是故障频繁、新功能上线缓慢&#xff08;扩展…

大型网站架构之大型网站架构模式

大型网站架构模式 什么是模式呢&#xff1f;(模式就是针对特定问题目前行业的解决方案) 模式描述了一个在我们周围不断重复发生的问题以及该问题解决方案的核心。借助模式我们可以减少很多重复的工作。 大型互联网公司在实践过程中提出了很多的解决方案&#xff0c;以实现网站…

大型网站架构之大型网站核心架构要素

大型网站核心架构要素 软件架构指的是&#xff0c;有关软件整体结构与组件的抽象描述&#xff0c;用于指导大型软件系统各方面的设计。 1.性能 在浏览器端 a.通过浏览器缓存、使用页面压缩、合理布局页面、减少Cookie传输等手段改善性能&#xff1b; b.可以使用CDN&#xff0c…

大型网站架构之性能篇

网站的高性能架构&#xff08;性能&#xff09; 不同视角下的网站性能有着不同的标准&#xff0c;也有不同的优化手段。 1.用户视角的网站性能优化 通过优化页面HTML样式、利用浏览器端的并发和异步特性&#xff08;即用户不用等待结果&#xff09;、调整浏览器缓存策略、使用…

大型网站之高可用篇

网站的高可用架构&#xff08;高可用&#xff09; 由于种种情况&#xff0c;在业务中硬件故障是常态&#xff0c;所以网站的高可用架构设计的主要目的就是保证服务器硬件故障时服务依然可用、数据依然保持并能够并访问。 高可用的主要手段&#xff1a;数据和服务的冗余备份及失…

大型网站之伸缩篇

网站的伸缩性架构&#xff08;伸缩性&#xff09; 绝大数网站都是渐进式成长的&#xff0c;在这个过程中最重要的技术是就是使用服务器集群&#xff0c;通过不断地向集群中添加服务器来增加整个集群的处理能力。 网站架构的伸缩性设计 网站的伸缩性设计分为两大类 根据功能进…