StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POReplacing H1 text with a logo image: best method for SEO and accessibility?
primarykey
Id
665037
data
AcceptedAnswerId
669847
AnswerCount
14
ClosedDate
CommentCount
5
CommunityOwnedDate
CreationDate
2009-03-20T04:57:45.690
FavoriteCount
107
LastActivityDate
2017-10-26T13:47:18.360
LastEditDate
2013-09-17T22:12:26.593
LastEditorUserId
246246
OwnerUserId
48523
ParentId
0
PostTypeId
1
Score
216
ViewCount
200746
LastEditorDisplayName
Andrew
text
Body
<p>It seems like there are a few different techniques out there, so I was hoping to get a "definitive" answer on this...</p> <p>On a website, it's common practice to create a logo that links to the homepage. I want to do the same, while best optimizing for search engines, screen readers, IE 6+, and browsers who have disabled CSS and/or images.</p> <p><strong>Example One:</strong> Doesn't use an h1 tag. Not as good for SEO, right?</p> <pre><code><div id="logo"> <a href=""> <img src="logo.png" alt="Stack Overflow" /> </a> </div> </code></pre> <p><strong>Example Two:</strong> Found this somewhere. The CSS seems a little hacky.</p> <pre><code><h1 id="logo"> <a href="">Stack Overflow</a> </h1> </code></pre> <pre class="lang-css prettyprint-override"><code>/* css */ #logo { padding: 70px 0 0 0; overflow: hidden; background-image: url("logo.png"); background-repeat: no-repeat; height: 0px !important; height /**/:70px; } </code></pre> <p><strong>Example Three:</strong> Same HTML, different approach using text-indent. This is the "Phark" approach to image replacement.</p> <pre><code><h1 id="logo"> <a href="">Stack Overflow</a> </h1> </code></pre> <pre class="lang-css prettyprint-override"><code>/* 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; } </code></pre> <p><strong>Example Four:</strong> <a href="http://alicious.com/2009/new-css-image-replacement-jir/" rel="noreferrer">The Leahy-Langridge-Jefferies method</a>. Displays when images and/or css is turned off.</p> <pre><code><h1 id="logo" class="logo"> <a href="">Stack Overflow</a> </h1> </code></pre> <pre class="lang-css prettyprint-override"><code>/* 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 */ } </code></pre> <p>What method is the best for this sort of thing? Please provide html and css in your answer.</p>
Tags
<css><xhtml><image><seo>
Title
Replacing H1 text with a logo image: best method for SEO and accessibility?
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USanimuson
UserOwnerUserId
1. USAndrew
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
2. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostLinksRelatedPostIdPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
2. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
3. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POReplacing H1 text with a logo image: best method for SEO and accessibility?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  POReplacing H1 text with a logo image: best method for SEO and accessibility?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  POReplacing H1 text with a logo image: best method for SEO and accessibility?
  UserUserId
  USelo80ka
  VoteTypeVoteTypeId
  VTFavorite
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.