Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I have stopped to insert "img" tags for the logo of the page. Because its not an image that is part of the content, its a design element but its still a information I want to have control over. So I just write the title in a "a" element as display: block, overflow: hidden and I push the text out with some padding. I think thats a good solution for SEO because you are keeping control of how important the logo should be on a page.
But now my dilemma is starting. How important is the logo of a page?
"A list apart" puts the logo in a h1 element. But is the logo really that important? On article pages you have two H1 elements (the logo and the title of the article) Most of the sites just use a img balbal /a, but I don't like this solution. Because I just want to use img for images that are part of the content...
Its kinda philosophical question, I hope you can give me some input or some articles to read about that...
Think about it this way: "How should a text-to-speach browser translates the page if a disabled person visit the site?".
Do you want the text-to-speach to mention the logo as an image? If yes: the logo should be an img with a caption providing a textual description. If no: use whatever alternative to no have image as content.
Do you want to emphasize the importance the page title, the article time, and the logo?
I guess I would
use an img for the logo (so that it's also printed, which is not always case if you use background image)
provide a nice caption (with "alt" attribute) that describes the logo and the company
have the page title be "company - page title"
have the main title be h1.
I feel like it should also gives decent SEO results.
For the homepage, the logo is a very important heading.
<h1><img src="/logo" alt="ACME inc."></h1>
…and it is an image that is part of the content, it isn't decorative or part of the background.
For other pages, it isn't.
<div><img src="/logo" alt="ACME inc."></div>
<h1>Products</h1>
Your logo represents your brand identity. It is the ONE thing you want your visitors to remember (if they like your site, that is).
I personally recommend always using a CSS image replacement technique for your logo in an <h1> tag because you want search engines to recognize this as your bread and butter. You want to ensure you rank on the top for your company name. This will help get you there.
h1#logo { height: LOGOHEIGHTpx; width: LOGOWIDTHpx; text-indent: -999em; overflow: hidden; background: transparent url('/path/to/logo.gif') 0 0 no-repeat; }
Q: -How important is the websitelogo on a page?
A: -Very important! :)
I prefer putting the logo in an H1 and hide the name of the website. The logo is a big part of the website's identity but it's also often the "home" link... so it's important enough!
edit: CODE SNIPPET TIME!!
<h1>my company</h1>
with a background image on the link (and displayed block with a set width and height etc.)
Speaking as an old search engine guy, the logo itself is not really what the page is about. I normally put it (img or text) in a styled div. The title of the specific purpose of the page is normally what you want to wrap in an H1. This is usually the same as the TITLE, although I normally tack on a " | SiteName.com" to the title so that the site name shows up clearly in the results listing.
I always do this:
HTML:
<h1 id="logo">Company Name (with tagline, if any)</h1>
CSS:
#logo a {
float:left;
width: ...px;
height: ...px;
text-indent:-1000em;
background: url(/path/to/image) no-repeat;
}
You can replace the H1 with H2, H3 etc.. on the inner pages, but I prefer keeping the header (and other sections) consistent as much as possible.
I believe it is good practice to have your <h1> tags match (or contain) similar text to the <title> of the page. For this reason, I think the following pattern is a good one:
<title>Your Site Name Here</title>
...
<h1 id="logo">Your Site Name Here</h1>
And on other pages:
<title> Article Title Here | Your Site Name Here</title>
...
<div id="logo">Your Site Name Here</div>
...
<h1>Article Title Here</h1>
Having the nested <a> tag in the div#logo allows you to have a different click area than logo display. For instance, if you have a wide drop shadow or other element that doesn't make sense to have clickable, the a could be smaller than the div#logo and help with that.
10 years back when i first visited a new search engine i only saw a textbox and a logo on top that said 'google'.The web page was ordinary didnot have any a lot of html elements infact only a textbox and a logo, but i always remembered the page due to the logo and the excellent search results.
Logo is important man, very important
Take a look at the top of this page. You can't go much of anywhere on this site without seeing the "stack overflow" logo up in the corner.
I'd say at least 90% (probably more!) of web sites I visit on a regular basis have a recurring logo. Marketing is a sick and twisted thing, but if so many web sites are doing it, it's probably not too far wrong.
From a visual standpoint, a logo is crucial -- it is part of the identity of the page, and users will associate it with the content. It's almost an imperceptible thing, but I know if I didn't see a logo at the top of a content page, it'd almost smack of unprofessional design to me! It's a subtle thing. Make sure the users know where they are and what they're looking at; form a psychological association.
Yes, search engine results are important, but that doesn't mean the logo is a throwaway.
I used to do the same image-replacement thing, but I finally realised it was a waste of time. As long as a meaningful alt attribute is present, you should just have the image.
As for the appropriate markup: on the home page I have the logo as h1 as it's the title of the page. On other pages I have it in a p and the actual title of the page is h1.
For example, home page is:
<div id="header">
<h1><img src="logo.jpg" alt="HyperGlobalMegaCorp"></h1>
</div>
<div id="content">
<h2>Welcome to the HyperGlobalMegaCorp website</h2>
</div>
whereas contact page is:
<div id="header">
<p><img src="logo.jpg" alt="HyperGlobalMegaCorp"></p>
</div>
<div id="content">
<h1>Contact HyperGlobalMegaCorp</h1>
</div>
...and that's HTML, not XHTML, before some zealot starts going on about closing the img elements ;-)
I use the both logo image and text for improving SEO on my site
<h1 id="pageheading"><a href="http://mysite.com" title="site description">
<span>Site name</span><img src="mylogo.gif" alt="my brand" />
</a></h1>
then I used css for formatting display so visitor can see only my logo but SE can see the both that make double search result for 2 type of search text and image. The image which use searched is the brand of your site, when visitor see your logo, they thought about your site, your products, services like as HP, IBM, DELL etc.... In other case you can make paragraph tag for more description about your site to focus some keywords in your site.
My language skill is not good but I still want to share to you some knowledge, dont laugh me when I got mistake about grammar please :)
Thank you for your inputs, it helped me a lot. This is my conclusion of all your answers and my thoughts:
It depends on your programming style and personal philosophy how you implement your logo technically. Some are using IMGs inside H tags, some are hiding the content of what ever tag they used and are placing the logo as background image.
But i think i have got my answers:
Consider the website as a book or magazine. On the front cover you want to have the title of the book as most important element and maybe some headlines. But inside the media you gonna implement your book/magazine title into the header and maybe the footer.
In order to make this understandable for a text navigator or a search engine. I would now choose a h1 tag to place my logo on the main/home page. But on the other pages a simple IMG, A or whatever tag but H.
Please share your thoughts about my conclusion.
Related
Typically you only want one H1 per page for screen readers. But I have seen a trend where the site logo in a header has an H1 around it and a separate main headline on a page also has an H1. Is this acceptable or is there a better way to handle this?
WCAG compliance
From a perspective of WCAG and compliance, this is acceptable, you can have multiple h1s on a page, it is still in the HTML5 spec.
Conventions for headings
However, convention and best practices advises there is only one, visible <h1> on a page and that <h1> should accurately describe the current page.
The main reason for this is assistive technology, namely screen readers.
Someone who uses a screen reader is likely to navigate by sections, links or headings using shortcuts. Obviously in this cases headings is the bit we are focusing on.
They use the keys 1-6 to cycle through headings. When landing on a page the first thing they might do is press "1" to get to the main heading on the page.
If pressing "1" instead reads out the site logo it might be confusing and they may think the site structure is wrong and instead start cycling <h2>s with the "2" key. This may take them a little while to realise the page structure is not typical.
It may only take a minute or so before a screen reader user realises the strange structure of your site, so it doesn't make it inaccessible, but in terms of user experience it isn't great.
Convention for company logos as part of the <header>
The convention for a logo is to wrap it in a hyperlink and point it to the home page. Expected behaviour is key for accessibility.
The simplest form of this would be:
<header>
<!-- logo wrapped in anchor pointing to home page -->
<a href="homepage">
<!-- notice the alt text is the purpose of the link so the link has descriptive link text. -->
<img src="yourlogo.jpg" alt="{company name} homepage" />
</a>
<nav>
<!-- ul with all nav items -->
</nav>
</header>
So whoever started that trend needs to stop it, it doesn't even make sense from an SEO perspective so I am not sure why someone started that if it is indeed a trend!
Let's say I have an image like the one below.
According to WCAG, this image is functional because it links the user to another page. It seems like I should put the destination of the link in the alt attribute like alt="comic homepage".
Wouldn't someone with a vision impairment also like to know what the image is showing? Would that user appreciate something like alt="comic that links to the cloudtweaks homepage"? The comic doesn't seem to be purely decorative.
<a href="http:////cloudtweaks.com">
<img src="comic.png" alt=??? />
</a>
This page does something similar (scroll near the bottom of the page).
You have asked this question but not provided enough context. Seeing the surrounding content, the entire page, or the entire site would help.
Is there surrounding text that explains either the image or where the link goes?
Will the image appear on the page after the link, perhaps a more full version of the image (as in, all the panels if this image is one of many)?
Does the site behave similarly to another site or section of this site with which you have confidence users are familiar?
A screen reader is going to announce that it is a link, that it is an image, and then it will announce the image alt text. If you do not feel it necessary to provide some text outside of the image to show users, then you probably do not need to try to force it into the alt text nor into a title attribute (also, do not use a title attribute).
Basically you want to give sighted and non-sighted and low-sighted users the same experience. If you feel it necessary to manage expectations on where the link goes by using the alt then you should just provide it around the link or before the collection of links. Then it helps all users. If you do not think you need to manage the user's expectations, then do not force it on the non-sighted users by jamming extra text down their screen readers.
This situation is documented on the WC3 Website: Image used alone as a linked logo
The WCAG says that you should not describe the image text in this situation but the link function.
When an image is the only content of a link, the text alternative for the image describes the unique function of the link.
If you think that the text within the image should be described to screen readers users, you have to change the structure of your HTML, excluding the image from the link, for instance.
Comics
Image of the day:
<img src="..." alt="If the clouds ever did go down would it be called fog?" />
or adding the description after (note that using aria-describedby the description might be hidden)
<img src="..." alt="Comics" />
<div id="desc" style="display:none">If the clouds ever did go down would it be called fog</div>
But this may be quite perturbing, I would say...
Below is a statement that I have learned from SEO experts:
In subpages of a webpage, there may be several links to homepage. But the first link to homepage should have useful text words within tags, because this link will be the only one a crawler will take care.
Assuming the above is correct, and having the below code:
<div class="topImage">
<img src="url">
</div>
<div class="imageBelow">
Useful SEO Text
</div>
...how can I make the second link (text) appear above the first link (this is an image) in the source code, without affecting the layout of the webpage? Is this possible?
I know what you mean with the whole SEO thing.
And you can do it your way with a little CSS
Option 1:
.imageBelow {
position:absolute;
top:0;
left:0;
z-index:10;
}
.topImage {
z-index:0;
}
But the better way to do this in my opinion is, to give the <a> tag in the div with the class '.topImage' a background image. then you can put all of the seo text in there like the following example, and give it a 'text-indent' with a very high negative value. In that manner the crawlers can see the text and use it for optimisation but you've got less html and no multiple links
Option 2
<!-- HTML PART //-->
<div class="topImage">
IMPORTANT SEO TEXT
</div>
/* CSS PART */
.topImage > a {
background:url(*path to your image*) left top no-repeat;
width:100px;
height:100px;
text-indent:-999em !important;
display:block;
}
You should not care about those socalled experts. Any search engine will ultimately follow and index every link on your page, regardless if the link points to an external or as in your example an internal resource. Unless you actively tell search engines not to index certain pages by for example a robots.txt disallow instruction.
The key point here is not "SEO", but simply building your webpage properly. That is, using the correct HTML tags for your content and take advantage of HTML attributes as they were meant to be used.
With this in mind there is a few simple "tricks" you can use to heavily increase a search engines willingness to follow and index the links in your example.
<div class="topImage">
<img src="url">
</div>
There is nothing here to attract the search engine, and the link is completely useless in a "SEO"-context. It is just an image with a link. You must give the engine some bait through the <a> tags title attribute and the <img> tags title and alt attributes as well. This is very important when having <img>-links only.
<section class="topImage">
<a href="/" title="a description of your page (this link is going to the frontpage, right? Why describe the topImage?">
<img src="url" title="here more details about your page" alt="even more ..">
</a>
</section>
Use a <section> tag instead of a <div> tag, telling the engine that this is an important part of your webpage. In HTML5, the <div> tag should be used for block styling only, not for separating content into logical units. Use the title-attribute everywhere you can, and always remember to be smart using keywords describing your page, also in titles! Like title="Buy cellphones and smartphones, click here". You have about 50 characters in each title tag to improve the overall description of your site. Use them!
<div class="imageBelow">
Useful SEO Text
</div>
Again, take advantage of the very important title tag, and if the link is an important link, wrap it into a header tag, like a <h3>, telling the search engine that this text and this link have significant importance for your webpage.
<section class="imageBelow" title="sections supports the title attribute">
<h3 title="header tags also supports the title attribute as well">
more useful SEO Text
</h3>
</section>
The above advices is very effective for how a search engine see your page. Mingling around with elements in CSS has no effect at all. And replacing <section>'s with <div>'s and so on does not affect the layout.
On the home page, is it best to use <h1> for the blog title or description?
By default Thematic (the theme I'm building my child theme on) uses <h1> for the blog description.
Also, I've replaced the blog title text with an image logo. Is this ok or should I still display the text and use text-indent: -9999px to hide it?
It all depends a bit on how related to your site your site description is.
If it's any important I'd wrap my site title between <h1> tags and my site description between <h2> tags.
If less important I'd wrap my site description between <p> tags.
I'd avoid using display:none to hide stuff, as Google or any other search engine is often confused when doing so.
There's a pretty good alternative though (also used within the WordPress TwentyEleven theme). A good tutorial about this is listed here: http://themeshaper.com/2011/02/17/css-tip-hiding-content-with-clip/
You should have an h1 on your page. It gives the page semantic meaning.
You should not, I think, hide the h1 if you are using an img as a title. This has implications for
search engines (who might think you are hiding content)
users with accessibility issues (screen readers)
yourself, for DOM manipulation if you forget it's there.
As far as SEO is considered, it is better to have your site a heading tags. Heading tags are good for SEO purposes.
Per google, It's not the best practice to hide content of the page. The text that describes your image is an alt tag, and this should be used for that purpose, not hidden h1 tag. Here : http://www.youtube.com/watch?v=GIn5qJKU8VM
http://www.youtube.com/watch?v=fBLvn_WkDJ4
h1 is the heading of your page, like the title of the chapter in a book. Every page on your site might have a h1 to help the reader understand the contents or purpose of that page. If you hide the h1 and replace it with a logo, search engines will still find it.
When I use images to replace H1/H2's (usually it's H2's for descriptions, and only on the home page) I always use text-indent to hide the text.
You want that text there so it can be indexed by search engines, but you want the image so it will look nice. Why settle for one or the other? :)
I also usually put the text inside of a span, then give said span the text-indent property.
I recommend against hiding, that's a tricky technique that can burn you. You very much want the text to be on the page. Thus the simple approach has some merit:
<img id="mybloglogo" src="myblog.jpg" alt="[My blog about great stuff]">
However, there is no perfect answer. See Replacing H1 text with a logo image: best method for SEO and accessibility? and google for this topic to understand the passion behind various views of this issue.
If you don't want to spend hours researching, you have a simpler option. View your page. Now disable CSS and look again. Now disable images and look again. If the page reads and works fine at each stage, you've got it covered for readers both human and robotic.
To turn off CSS in Firefix "View->Page Style->No Style".
The header tag, or the tag in HTML, will usually be the title of a post, or other emphasized text on the page. It will usually be the largest text that stands out.
On the home page, it's best to use the H1 heading to include the main keyphrase that you want to rank for in search engines like Google.
You should edit the Thematic theme to use your desired H1.
I want to do 2 things:
Know that I am SEO friendly and that I inserted correctly the text (so search engines would know that this is "my logo"
Learn how to resize the logo in case the screen is lower than a specific width (assuming that I know how to work with media-queries)
<div id="myLogo">
<a href="#">
<img src="css/img/my_logo.png" alt="My Logo">
</a>
</div><!--End of #myLogo-->
What should I do to achieve them both? What should be my CSS and did I wrote the code correctly?
<h1>
Text that search engines will see but not users
</h1>
And the css
h1{
background-image:url(mylogo.png);
width:100px;
height:100px;
text-indent: -99999px;
}
Edit:
The stack overflow logo uses this technique, use firebug and have a look :p
Edit:
Q: What's the difference between not adding it and it being invisible?
A: Most search engines will read what you put in the alt tag, this will also show for people using text browsers. More complex search engines are said to work differently, though the text-indent trick is currently as far as all my tests go the best way to get search engine readable text into things like logos and menus that use images. It generally comes down to user choice. The alt tag is a valid way of doing it. I've personally just had better seo results from text-indent.
What you have using alt attribute will work for your first requirement. This text is used by search engines and not shown in browsers.
This will also be used when for some reason(e.g. user has disabled image loading) image can not be loaded.
If you use <h1>, than add background-image to <a> not the <h1> itself, like in the older example from "tom at zepsu dot com".
JSFiddle Demo (try the demo with removed "a" selector in CSS code - and you won't be able to click on the logo)
<h1 id="hlogo">
Stack Overflow
</h1>
CSS:
#hlogo a { /*code goes here*/ }