찾다
웹 프론트엔드H5 튜토리얼如何借助HTML5微数据优化网页?

回复内容:

目前google, yahoo, bing, baidu, yandex都已经支持丰富网页摘要和结构化数据。
关于LZ问题:
1、 itemprop=name 与 h1,title 相同,是否会导致关键词堆栈
没有任何问题。只有 itemprop=name 与 h1是在页面上显示,title只在搜索结果中展现。搜索引擎对关键词密度只统计页面出现次数。再说了, itemprop=name 与 h1只定义一个,要达到堆栈标准应该是,,,,,或者,钱钟书,购买,好看吗,怎么样,哪里有卖等。这样无意义的语句或内容。
2、书籍目录问题,以及书评页面里若不用 itemprop=aggregateRating,只用 itemtype=Review 里的 itemprop=reviewRating 验证后不显示评分星数,是否一定要在书评里添加评分汇总?
书籍目录以及评分问题,请查看 schema.org/Book (新功能)网页下面有代码格式,请自行筛选,并在测试工具里调试。
——————————————————————————————————————————————————————————————————————————————————————
关于丰富网页摘要信息(微数据)和结构化数据的一些个人看法:
1、网站技术走到今天已经非常成熟,虽然搜索引擎技术也一直在进步,但对于数据抓取解读只能使用文字编码进行,因此图片、视频、音频数据只能透过文字定义来识别。随着互联网数据量爆发增长,简单的文本搜索结果展示已经无法满足用户需求。因为信息泛滥导致搜索结果同质化,且用户根本很难透过TITLE+DESCRIPTION来判断网页内容是否为自身想要的内容,结果必然会导致用户搜索体验下降。丰富网页摘要信息(微数据)和结构化数据可以很好的改善以上问题。虽然GOOGLE表示使用微数据展现的搜索结果,并不会对排名起作用,但可能会增加网站点击与流量。那么搜索结果点击率与流量又是搜索结果排名非常重要的指标,也就是说网站搜索展现结果改善虽然不会直接影响搜索排名,但是如果页面点击率与网站流量上升肯定对SEO是起正效益的。
PS:自然搜索结果点击率在数据工具里是没有的,但我相信在算法中,搜索引擎是会对自然搜索结果中的前几页结果做点击率统计的。因此丰富网页摘要信息(微数据)+结构化数据是以后SEOer必须掌握的技能。

2、丰富网页摘要信息(微数据)和结构化数据需要跨部门配合才可以完成。包括:前端、后端、产品、内容生产、市场等部门一起合作。因为微数据在搜索结果中实现,除了在代码中添加之外,还需要考虑内容产生是自身还是用户。所以需要更改网站用户界面、后台界面。当界面改变后还会涉及用户体验问题。国内外很多大网站丰富网页摘要信息(微数据)和结构化数据做的都不是很好,除很多网站都是很早前开发的,没有考虑这概念之外,还有部分是使用RDFa,微格式(RDFa,微格式这两种方式用扩展性和兼容性问题,微数据是目前GOOGLE、YAHOO、BING搞的一个新标准。RDFa,微格式目前同样支持。详细参见:support.google.com/webm
还有一个原因是手机端的流行,所有人都认为移动是未来的战场和唯一,大公司都把资源和重心向移动倾斜,对WEB页面的重视程度下降,或者没有动力去改善。当然SEO在绝大多数公司都是逼格很低的工种,对于有钱的公司来说SEO的流量对比PPC流量来说几乎可以抹掉。于是PPC变成一项高深的技术活,SEO变成一项发外链找资源的活,而且很多公司都把PPC都等同于SEM。我个人的观点是PPC最重要的是数据分析能力,SEO则更需要掌握前端/后端/产品能力,如何把内容、用户浏览体验、搜索结果表现结合在一起去改进网站质量。

费话了这么多说个案例,高逼格网站:豆瓣
X战警:逆转未来 在GOOGLE\BING\BAIDU的搜索结果
GOOGLE
如何借助HTML5微数据优化网页?BING
如何借助HTML5微数据优化网页?BAIDU
如何借助HTML5微数据优化网页? 如何借助HTML5微数据优化网页?X战警 这新片子在BING中微数据的信息最佳,GOOGLE其次,百度根本就没有微数据体现。说明那啥,BAIDU的爬虫抓取能力有点LOW!
BING使用的是页面中的这段代码:
如何借助HTML5微数据优化网页?GOOGLE使用的是页面中的这段代码:
PS:百度未来展现结果也会使用该代码
如何借助HTML5微数据优化网页?从搜索结果和代码使用来看,微软已经针对影片性质的关键词做出改搜索展现结果做了很大改变。GOOGLE只是在TITLE下方增加一栏微数据(使用英文关键词搜索时,GOOGLE已经在右侧将影片详细信息罗列)。只能说GOOGLE目前对中国WEB搜索质量改善并不关注和在意,ANDROID才是重点。
如何借助HTML5微数据优化网页?PS:MB我家大范爷呢?

百度同时也对影片搜索结果做改进,只是将搜索结果链接在自家产品上。
如何借助HTML5微数据优化网页?目前各大公司基本上使用的都是RDFa/微格式,所以GOOGLE/YAHOO/BING统一标准,开始建立微数据格式(百度是否支持,未知)。因此微数据在未来WEB、搜索展现、数据分析上是有很大想像空间的。

另外还有一家案例:大众点评
GOOGLE
如何借助HTML5微数据优化网页?BAIDU
如何借助HTML5微数据优化网页?BING
如何借助HTML5微数据优化网页?代码部分:
如何借助HTML5微数据优化网页?BING的搜索展现结果,依然微数据信息展现最佳,GOOGLE/BAIDU均使用单店的数据信息,原因就是点评没有文本链接形式的商户总页面,而是通过搜索框搜索进入,然后对搜索结果页面做了伪静态处理。因此GOOGLE/BAIDU只能根据页面质量判断抓取,相对BING会深入一点,抓取到总页面,将内容展现结果处理的更完美。说明啥,BING水平高啊,得点赞!(相对于点评的做法,阿里的做法则更符合搜索引擎要求,阿里会将商家和产品两大类分开,如:alibaba.com/supplier/***和alibaba.com/products/***,会了增加自然搜索结果表现还会根据产品增加一个alibaba.com/catalog/***。内容同样都是用户生产与添加,但是透过设计/前端/后端三者将页面生成不同排罗组合,即避开内容重复率过高,又大幅增加页面收录量。相信在ROBOTS.TXT文件里,阿里应该是会有搜索结果所产生的页面剔除的。所以我认为阿里的SEO应该是国内做的最牛逼的,在所有搜索引擎的排名表现结果都很理想,确实很科学,除非有人为干预。SO阿里的SEO去点评,点评现在应该就是团购第一了有木有。哈哈)

3、微数据对网站本身就是很好的数据分类和信息规划,如果做的好其本身不就是大数据的基础吗?丰富网页摘要信息(微数据)和结构化数据规划和实施是非常有必要的,GOOGLE既然做了微数据统一标准,未来肯定会对GOOGLE ANALYTICS做改进,增加数据统计与分析的维度和指标。不就是大家更期待的更接近和了解用户吗?

关于SEO的一些个人看法:
知名的搜索引擎都发出一个强烈的信号,即以内容和用户浏览体验为搜索表现核心。同时流量入口正在改变,智能手机与社交网站崛起,降低了搜索引擎所占网站流量份额,即流量入口正在改变。SEO思维应该从Search Engine Optimization转变为Website Performance Optimization(我自己想的名称,以下简称WPO),也就是不再单一以搜索引擎排名与流量为标准,而是以页面质量与用户浏览体验为标准。事实上GOOGLE从始至终提倡的都是WPO,也就是GOOGLE说的,如果没有搜索引擎你如何去针对你的用户去营销。当然目前外链仍然是网站获得排名结果前靠最直接有效的方法,因为搜索质量的改进需要很长时间。使用WPO的好处还有如果未来人们不再使用搜索引擎获取信息,那么拥有较好页面质量与用户浏览体验度的网站依然会受到用户的青睐。

——————————————————————————————————————————————————————————————————————————————————————
写了这么多,也不知道能不能让LZ满意。各位爷,不满意咱再改进还不行嘛!
有时间再上来补 学习了,谢谢大神 百度现在 支持 不支持 ,我还搞不清。
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
H5 코드 해체 : 태그, 요소 및 속성H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

H5 코드 이해 : HTML5의 기본 사항H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AM

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드 : 웹 개발자를위한 모범 사례H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

H5 : 웹 표준 및 기술의 발전H5 : 웹 표준 및 기술의 발전Apr 15, 2025 am 12:12 AM

웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.

H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다Apr 14, 2025 am 12:05 AM

H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.

H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

H5는 무엇을 언급합니까? 맥락 탐색H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.