石家庄网站建设 > 博客教程 > seo优化教程 >

石家庄网站优化怎么做网站优化的

发布时间:2020-12-08

(来自盲人摄影师Flickr集团的HLW的标题照片“ Kenzie” 。)
搜索引擎优化(SEO)由搜索引擎发展而来,它创建了算法来自动对网站进行分类和排名,而SEO操纵了这些算法中的漏洞。
 
另一方面,可访问性源于对包容性的渴望。通过辅助技术(AT)将人类与信息联系起来。
 
当我们将两个行业划分为机器正在读取网页的位置时,就会出现一些重叠。这就是我们在本系列文章中要探讨的内容。如果您正在针对搜索引擎进行优化,那么还将影响使用屏幕阅读器和辅助技术的人们访问您网站的方式。
 
在今天有关可访问性+ SEO的帖子中,我们正在深入探讨页面方面的内容,包括格式化文本,颜色,链接和我们看不到但机器可以看到的内容。上一篇文章介绍的结构重叠,我们将在本篇文章之后的最后一篇文章中介绍图像,视频和非文本元素。
 
隐藏文字
有时,页面上可以看到的内容提供了机器人或屏幕阅读器无法读取的信息或上下文,例如信息图图像。文本,图形和整体上下文都在图像中,因此,在这种情况下,您需要提供屏幕阅读器和漫游器可用于显示信息和上下文的文本-可见或隐藏。
 
您可能还有其他原因要主动隐藏所有可见显示中的文本,而不是机器人或屏幕阅读器中的文本。一个示例可能是一段段落,仅当单击插入符号时,该段落才会展开以显示更多文本。在这种情况下,默认情况下,从视觉体验中隐藏文本,但是您要确保屏幕阅读器和漫游器可以获取文本。
 
带有插入符号的网站上的四个问题的屏幕快照,用于打开问题以查看答案。 关闭三个,打开三个以显示答案文本。
下表显示了有视力的用户,屏幕阅读器和搜索引擎如何感知这些隐藏内容的不同方法。我不是辅助功能专家,因此,如果您知道其他不同之处或其他内容,请共享。
 
隐藏文字方法
 
谁可以看到每种方法的默认内容?
 
视线访客
 
屏幕阅读器
 
Google * 
(链接是Google缓存此方法的示例)
 
可见性:隐藏
 
没有
 
没有
 
 
显示:无
 
没有
 
没有
 
 
文字缩进: -10000
 
没有
 
 
 
CSS剪辑
 
没有
 
 
 
在CSS中 定位屏幕外
 
没有
 
 
 
隐藏HTML 5
 
没有
 
没有
 
 
隐藏的ARIA =“ true”
 
 
一些
 
 
*我强烈建议您不要仅将这些隐藏文本技术用于垃圾邮件,因为Google可能会为隐藏文本编制索引,但不会赋予隐藏文本同非隐藏文本相同的权重或排名效果,并且如果滥用,必须手动检查,您可能会遇到麻烦。
 
关于这一点,让我们研究两个实际的常见示例:一个主要内容位于图像中,因此我们需要使隐藏内容可供屏幕阅读器和机器人使用,第二个默认情况下对用户隐藏主要内容,并且我们需要确保屏幕阅读器和漫游器能够找到它。
 
为信息图提供文本
这是一个SEO会喜欢图表的示例,我们希望向屏幕阅读器和搜索引擎提供图表信息和上下文。像本示例一样,简单的方法是将文本添加到信息图下方的页面。
 
但是Ted Drake是一个可访问性天才(在本系列文章的帮助下以及我对a11y的总体兴趣中,他发挥了不可估量的作用-谢谢Ted),并且还向我们展示了一种为屏幕阅读器和机器人提供信息的选项。看不见的用户看不到。信息图通过iFrame被拉到一个页面中(或易于共享),并且,除了信息图图像外,iFrame HTML还在剪辑内容中包含了所有描述性文字,对于通过该信息图读取相同内容的目击用户而言,它们是不可见的,但对于看不懂信息图表的屏幕阅读器和漫游器来说,它是完全清晰易懂且具有交互性的。
 
自己检查一下。此页面出现在Google搜索结果中的信息图文字“日子虽然更长,但您仍然找不到时间计划那些急需的度假。” 该文本实际上并没有直观地显示在页面上。
 
旁注:请注意,在我上面提供的示例中,页面上带有文本的文本对我来说排名高于可见文本。
 
Google搜索结果显示带有隐藏文本的信息图页面,这是继带有公开文本和pdf信息图页面之后的第三搜索结果 
在此隐藏的文本示例中,信息图本身是在单独的HTML页面上提供的图像,其文本信息位于1px CSS剪辑中,并通过iFrame拖入搜索结果中的该页面。
 
乍看之下,单独的HTML页面看起来只有一个图像,但是您会在代码中看到,在“视觉隐藏”的CSS类中还隐藏了用于剪切内容的文本,并且该文本具有语义标记,允许屏幕阅读器用户浏览,复制文本等内容,从而使其成为在页面上正确放置文本的高度可用的交互式替代方法。
 
iframe页面的屏幕截图,其中在代码旁边显示了信息图表,而该页面在代码中显示了格式化的描述性文本。
可以在此处使用VoiceOver屏幕阅读器进行操作:
 
因为我知道这会在阅读这篇垃圾邮件的SEO中引起很多兴奋,所以我还要提到那些控制Google垃圾邮件举报的人也知道这种方法,甚至是这个特定示例。尽管他们确信专门针对隐藏文本垃圾邮件的过程非常强大,但我只能以良心方式展示此示例,并说“不要垃圾邮件”。Google正在观看。一定要考虑这种方法的可访问性,尤其是与文本内容一起共享图表时。
 
隐藏辅助文字
有时候,您想向有视力的用户显示一些文本,但是如果他们选择(或略过该内容,然后移至页面上的其他内容),则让他们单击诸如插入号之类的内容以扩展更多文本内容。
 
我已经对有功能的站点进行了现场审核(针对有视力的用户),但是由于内容的编码方式,因此未对内容建立索引。您可以将display:none用于隐藏的默认内容,这将使屏幕阅读器和视线不佳的用户在页面中浏览时隐藏多余的内容,但是如果其中一个用户单击了插入符号或链接,则允许访问该内容。
 
这是一个示例,其中Netflix帮助页面向视力不佳的访问者和屏幕阅读器隐藏内容,除非访问者选择扩展和访问内容。它在CSS中使用display:none。屏幕阅读器和有视力的访问者可以访问它,并且插入符的内容由搜索引擎索引。双赢。
 
 
 
隐藏的文字有无:
不要将隐藏的文本用于垃圾邮件。如果您想保持SEO的鼻子整洁,建议不要将隐藏的关键字填充到页面中,这对于屏幕阅读器访问者来说可能是一种糟糕的体验。
请考虑有视力和无视力的观众:如果您需要隐藏文本,请根据您是希望屏幕阅读器看不到它还是让视力不佳的用户不要看,还是您希望所有访问者都不看,来考虑哪种方法最适合使用。
关键字填充
关键字填充是一种老式的搜索引擎优化实践,至今仍然存在。在网站上图像非常繁重的页面,旧的Flash页面上,甚至在内容正常的页面上,但开发人员希望页面上使用更多基于文本的关键字时,它非常受欢迎。这只是针对搜索引擎完成的,所以为什么我们要关心屏幕阅读器以外的访客是否会遇到它呢?
 
幸运的是,如今很难找到好的关键字填充示例,因此@Joeartdotcom向我发送了一个完美的2007年Patagonia主页存档示例,该示例具有较大的图像,最少的内容和一堆“搜索索引页面描述”文本。通过屏幕阅读器(例如适用于Chrome的ChromeVox或适用于Firefox的Fangs)收听。如果您想一起阅读或只是听这段视频,有视力的读者可以在此Wayback Machine页面上看到文本。
 
希望关键字填充不会像2007年那样成为一个大问题,但仍然是一个选择,它很可能会惹恼您的屏幕阅读器用户。
 
关键字填充的注意事项
构建时一定要提前考虑:避免使用关键字填充来吸引搜索引擎,而是使用相关的可索引文本信息构建可访问页面。
不要自然写。所有人都可以使用,这可以使用关键字来完成,但不能滥用关键字。
文字的大小和颜色对比
人们通常只是为了页面美观而使用小字体和低对比度文本。SEO有时会使用低对比度的小字体文本在页面上添加更多关键字,而不会分散其余内容的注意力。
 
这不是我要详细介绍的内容,但是搜索引擎可以考虑字体大小和颜色。他们知道我们都在做什么。
 
这是SEO以外可能会出现问题的地方。色盲或有色觉障碍的读者可能无法区分某些颜色,或者只能看到黑白或灰色阴影的东西,这些缺陷可能是轻度或严重的。
 
该视频显示了一些色彩对比示例,即使没有色彩缺陷的读者也很难理解。
 
 
此外,低视力阅读器可能是老年阅读器,或者患有会影响其视力的疾病,例如青光眼或黄斑变性,并且难以感知内容太小,无法缩放或对比度低的内容。这是一些很棒的低视力例子。
 
为了更好地了解辅助技术在这些情况下如何提供帮助,请查看非常酷的ZoomText屏幕放大镜的演示,该演示还可以更改颜色对比度,在鼠标指针上创建十字准线或大圆圈并突出显示光标焦点或活动区域焦点。
 
 
某些人,例如合法失明的学生Kim Russell,正在使用放大倍数12–14的ZoomText来浏览您的网站。好大
 
在设计页面时和/或在考虑超小的,低对比度的文本时,要记住很多字体和颜色。在参考资料部分中可以找到更多有趣的工具和详细信息,除了此处列出的“需要注意的事项”。
 
文字大小和颜色的正确与不正确
请勿将文字用作图片。尽可能使用实际文本而不是文本图形来避免这些文本图像放大时的像素化。
不要仅仅依靠颜色来描绘信息。如果删除所有颜色,则用户应该能够理解内容。如果仅通过红色表示链接文本,则对红色敏感的色盲用户可能看不到链接。无论链接颜色如何,链接上的下划线都更加明显。
要使文本的对比度最大化。如果可能,这包括徽标文字和图像中的文字。使用颜色对比工具查找小文本至少4.5:1,大文本至少3:1的良好的背景对比度。例如,#757575是可在白色背景上访问的最浅的灰色。
不要使用相对字体大小还是绝对字体。与通过像素或点的绝对大小相比,按相对百分比或em大小调整字体大小可以提供更好的大小调整。
请使用可读字体:尽量避免使用草书,幻想(装饰性)和等宽字体(例如Courier),并尽量贴近本机衬线和sans-serif家族字体,并尽可能少地使用不同的字体来保证连续性。
链接和锚文本
屏幕阅读器用户经常在页面上切换以通过页面链接浏览页面。链接锚文本在每个实例处都会声明,同时还会与锚文本一起宣布“链接”,并且用户可以按Enter键以关注任何链接。
 
描述性和信息性链接
具有描述性锚文本的链接对于搜索引擎和屏幕阅读器来说是一个胜利。当链接描述其指向的内容时,它会同时为两者提供上下文,告诉屏幕阅读器用户通过链接查看链接指向的内容,对于SEO,它提供有关目标页面内容的上下文,并可能帮助该目标页面排名该短语或主题。
 
提供带有链接的上下文对屏幕阅读器也有帮助。观看下面的视频,该视频导航该网页示例,显示其可访问性很差。第一个徽标链接非常有趣,但还请注意[image description]链接,MORE >>链接,这些链接不提供任何上下文并且未连接到页面上直观连接的文章,并且臭名昭著的“单击此处”和“阅读更多”链接,这是SEO熟悉的唐纳德。

网站建设
Website
客户案例
Customer case
关于展为
About ZHANWEI
展为致力于网站建设与网络营销,微信营销,专业领域包括网站建设、网站seo优化推广、移动互联网营销、三网合一网站建设,微信营销小程序开发,与其他网站建设及系统开发公司不同,我们的整合解决方案结合了展为网络建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供一体化全方位的互联网品牌整合方案!

扫码咨询

Copyright © 石家庄展为网络有限公司. 冀ICP备14018173号-6 Copyright 2010-2020版权所有
展为网络
网站建设
客户案例