用徽标图像replaceH1文本：search引擎优化和可访问性的最佳方法？
看起来好像有几种不同的技术，所以我希望能得到一个“明确的”答案…
在网站上，通常会创build一个链接到主页的徽标。 我也想做同样的事情，同时针对search引擎，屏幕阅读器，IE 6+以及禁用了CSS和/或图片的浏览器进行了最佳优化。
示例一：不使用h1标签。 不如SEO好，对不对？
<div id="logo"> <a href=""> <img src="logo.png" alt="Stack Overflow" /> </a> </div> 例二：在某个地方find了。 CSS看起来有些黑客。
<h1 id="logo"> <a href="">Stack Overflow</a> </h1>
/* css */ #logo { padding: 70px 0 0 0; overflow: hidden; background-image: url("logo.png"); background-repeat: no-repeat; height: 0px !important; height /**/:70px; }
示例三：相同的HTML，使用文本缩进的不同方法。 这是图像replace的“Phark”方法。
<h1 id="logo"> <a href="">Stack Overflow</a> </h1>
/* css */ #logo { background: transparent url("logo.png") no-repeat scroll 0% 0%; width: 250px; height: 70px; text-indent: -3333px; border: 0; margin: 0; } #logo a { display: block; width: 280px; /* larger than actual image? */ height: 120px; text-decoration: none; border: 0; }
例四： Leahy-Langridge-Jefferies方法 。 当图像和/或cssclosures时显示。
<h1 id="logo" class="logo"> <a href="">Stack Overflow</a> </h1>
/* css */ h1.logo { margin-top: 15px; /* for this particular site, set this as you like */ position: relative; /* allows child element to be placed positioned wrt this one */ overflow:hidden; /* don't let content leak beyond the header - not needed as height of anchor will cover whole header */ padding: 0; /* needed to counter the reset/default styles */ } h1.logo a { position: absolute; /* defaults to top:0, left:0 and so these can be left out */ height: 0; /* hiding text, prevent it peaking out */ width: 100%; /* 686px; fill the parent element */ background-position: left top; background-repeat: no-repeat; } h1#logo { height: 60px; /* height of replacement image */ } h1#logo a { padding-top: 60px; /* height of the replacement image */ background-image: url("logo.png"); /* the replacement image */ }
什么方法是最好的这种事情？ 请在您的答案中提供html和css。
您错过了选项：
<h1> <a href="http://stackoverflow.com"> <img src="logo.png" alt="Stack Overflow" /> </a> </h1>
在href和img到h1的标题是非常非常重要的！
我主要是像上面这样做的，但为了便于使用，我需要支持在浏览器中禁用图片的可能性。 所以，我不是从页面的链接中缩进文本，而是通过将<span>完全放置到<a>的全部宽度和高度，并使用z-index将它放在堆叠中的链接文本的上方订购。
价格是一个空的<span> ，但我愿意在那里有一个像<h1>一样重要的东西。
<h1 id="logo> <a href="">Stack Overflow<span></span></a> </h1>
#logo a { position:relative; display:block; width:[image width]; height:[image height]; } #logo a span { display:block; position:absolute; width:100%; height:100%; background:#ffffff url(image.png) no-repeat left top; z-index:100; /* Places <span> on top of <a> text */ }
如果可访问性的原因是重要的，那么使用第一个变体（当客户想看到没有样式的图像时）
<div id="logo"> <a href=""> <img src="logo.png" alt="Stack Overflow" /> </a> </div>
没有必要符合虚构的search引擎优化要求，因为上面的HTML代码有正确的结构，只有你应该决定这是否适合你的访问者。
您也可以使用较less的HTML代码的变种
<h1 id="logo"> <a href=""><span>Stack Overflow</span></a> </h1>
/* position code, it may be absolute position or normal - depends on other parts of your site */ #logo { ... } #logo a { display:block; width: actual_image_width; height: actual_image_height; background: url(image.png) no-repeat left top; } /* for accessibility reasons - without styles variant*/ #logo a span {display: none}
请注意，我删除了所有其他的CSS样式和黑客，因为它们不符合任务。 它们在特定情况下可能是有用的。
我想你会对H1的辩论感兴趣。 这是关于是否将h1元素用于页面标题或徽标的争论。
就我个人而言，我会按照你的第一个build议去做：
<div id="header"> <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a> </div> <!-- or alternatively (with css in a stylesheet ofc--> <div id="header"> <div id="logo" style="background: url('logo.png'); display: block; float: left; width: 100px; height: 50px;"> <a href="#" style="display: block; height: 50px; width: 100px;"> <span style="visibility: hidden;">Homepage</span> </a> </div> <!-- with css in a stylesheet: --> <div id="logo"><a href="#"><span>Homepage</span></a></div> </div> <div id="body"> <h1>About Us</h1> <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p> </div>
当然，这取决于你的devise是否使用页面标题，但这是我在这个问题上的立场。
您错过了<a>元素的标题。
<h1 id="logo"> <a href="#" title="..."><span>Stack Overflow</span></a> </h1>
我build议把标题放在<a>元素中，因为客户想知道这个图像的含义是什么。 因为您已经为<h1>的testing设置了text-indent ，所以前端用户可以在hover在标志上时获得主要标志的信息。
在这里迟了一点，却忍不住。
你的问题有一半是有缺陷的。 让我解释：
你的问题的前半部分，图像replace，是一个有效的问题，我的意见是，一个标志，一个简单的图像; 一个alt属性; 而CSS的定位就足够了。
您的问题的后半部分，对于徽标H1的“SEO价值”，是决定哪些元素用于不同types的内容的错误方法。
一个标志不是一个主标题，甚至是一个标题，使用H1元素在网站的每个页面上标记标识将会对你的排名造成（稍微）更多的伤害。 在语义上，标题（H1 – H6）适用于：内容的标题和小标题。
在HTML5中，每页允许多个标题，但徽标不值得其中之一。 您的徽标可能是一个模糊的绿色小部件，而某些文本是由于某种原因而位于标题侧面的图像中 – 这是一种“印记”，而不是构成内容的分层元素。 第一个（不pipe你使用更多的取决于你的标题层次结构）你网站的每个页面的H1应标题标题。 您的索引页面的主要标题可能是“纽约模糊绿色小部件的最佳来源”。 另一个页面上的主标题可能是“运输我们的模糊小部件的详细信息”。 在另一页上，可能是“关于伯特的模糊小工具公司”。 你明白了。
注意：听起来不可思议的是，不要看Google所拥有的networking媒体资源的来源，以find正确的标记。 这本身就是一个完整的篇章。
为了让HTML及其元素获得最多的“SEO价值”，请查看HTML5规范 ，并在search引擎之前根据（HTML）语义和对用户的价值做出标记决定，您将获得更好的成功search引擎优化。
<h1> <a href="http://stackoverflow.com"> Stack Overflow<img src="logo.png" alt="Stack Overflow" /> </a> </h1>
这是search引擎优化的好select，因为search引擎优化H1标签高优先级，在h1标签应该是你的网站名称。 如果您在search引擎优化中search网站名称，使用这种方法它也会显示您的网站标志。
你想隐藏网站名称或文本，请使用负值的文本缩进。 前
h1 a { text-indent: -99999px; }
有一点没有人触及到的事实是，h1属性应该是特定于每个页面的，并且使用站点徽标将有效地在站点的每个页面上复制H1。
我喜欢使用az索引隐藏H1每页作为最好的search引擎优化H1通常不是最好的销售或审美价值。
我想例子一是绰绰有余，因为如果图像被禁用，则会显示替代文字。 这也将有助于search引擎了解您的网站。
更新：看起来我错了。 检查这篇文章 。
我不知道，但这是已经使用的格式…
<h1> <span id="site-logo" title="xxx" href="#" target="_self"> <img src="http://www.xxx.comhttp://img.dovov.comxxx.png" alt="xxx" width="xxx" height="xxx" /> <a style="display:none"> <strong>xxx</strong> </a> </span> </h1>
简单，它并没有做我的网站任何伤害，据我所知。 你可以css，但我没有看到它加载更快。
一个新的（凯勒）方法应该是提高速度超过-9999px方法：
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
这里推荐： http : //www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
<h1><a href="/" title="Some title">Name</a></h1>
h1 a{ width: {logo width}; height: {logo height}; display:block; text-indent:-9999px; background:url({ logo url}); }
<div class="logo"> <h1><a href="index.html"><span>Insert Website Name</span></a></h1> <p>Insert Slogan Here</p> </div>
#header .logo h1 { background: red; /* replace with image of logo */ display:block; height:40px; /* image height */ width:220px; /* image width */ } #header .logo h1 a { display:block; height:40px; /* image height */ width:220px; /* image width */ } #header .logo h1 a span { display:none; }
对于SEO的原因：
<div itemscope itemtype="https://schema.org/Organization"> <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p> </div> <h1>Your awesome title</h1>
