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.
Related
Ok so I'm not sure if this will effect my page seo? What I've done is created a paragraph and put my h1 tags in the middle of it. I'm trying to rank for freelance web design belfast and it's in the middle of the text and because it looks better design wise on the page. On all other pages its the title by it's self except the home page, I'm just interested if this will effect page rank for sacrifice of design.
<span class="meet">Meet Jonny.</span><br/>
<span class="freelance">An award-winning <h1 class="h1-home">freelance web designer based in Belfast, Northern Ireland</h1>, who creates eye-catching responsive websites. Follow him on <a target="_blank" href="">Twitter</a>, flick through his <a target="_blank" href="">Flickr</a>, or just say <a target="_blank" href="">hello.</a></span>
The h1 tags will be recognised as more important keyswords for your page. What will matter more is that the actual content of the website is extensive enough and that it includes a lot of relevant text, about/synonyms of the keywords. Incoming web links will also increase it's importance. I don't think the h1 tags will do THAT much, but they will help google determine the important words on your side.
It makes little or no difference to your sites rankings. If I were you, I would worry more about the design, speed and experience. What you did there may seem inappropriate, but if the page has enough valuable content, on pages and its sub pages and people are hanging around these webpages, they should do just fine in search.
Found this thread. You may find it useful.
http://moz.com/community/q/h1-tag-mandatory
Most of the websites design H1 to indicate what is the content of the page about. They are heading tags generally used to present organized/structured content. IMHO, it looks like you are using H1 for styling and not really as heading of structured content. You can use general css styling for that and they will have pretty much the same effect as stuffing it inside the H1 tag. Theoretically it will not affect SEO ranking, but in my opinion try using a CSS styling for that and use H1 for heading tags. Also make sure you have a (one and only) H1 tag on the page.
http://www.searchenginejournal.com/2014-important-h1-tag-seo/106613/
So I've been trying to make my site as accessible as possible (for non-JavaScript users, web crawlers, screen readers, etc), and I hit a large snag.
The site I'm developing is very image heavy. (I draw stupid stuff in my spare time and the site is a sort of a "showcase".) Each page in the site has a single image (or multiple, if context is needed or the image is several panels) that is usually accompanied by a single caption underneath. So when I got to the point where I had to add accessibility options, I wasn't sure what to do. For example, let's say I had an image of a man eating an apple and the joke was there's a worm in it. So the first thing I did was add a ludicrously descriptive alt text since it was the only way to provide an "equivalent" for screen readers.
<img src="appleeat.png" alt="A man bites into an apple. As it turns out, there's a worm in it!">
This seemed okay at first, but then things went awry really quickly when I suddenly found myself needing to add alt text up to 300 characters (!!!) for the more elaborate jokes and images. Not only that, but apparently alt text isn't for descriptions anyway.
So I'm having these problems:
Alt text is for equivalents, not descriptions. However, the only way to provide an equivalent in this case is to provide a description.
longdesc seems to be more suited for this feat, but longdesc is not supported by any browser (at least, according to W3Schools) even though it does seem to be in the HTML5 specification.
<figcaption> seems to be the way to go, but it ends up displaying text underneath the image in question, which is definitely not very appealing for my site, especially if I want to add additional captions and context in <p> tags or something.
So what do I do? What would I put, and where? I'm totally stumped on this, and frankly I'm not certain that making a site based entirely on images accessible to people who can't see very well is a good idea.
The alt attribute is for alternative text, i.e. textual replacement for an image, so in the example, it is adequate if it reasonably tells the same story as the image. In reality, most images cannot have texts that are full “alternatives” or “replacements”; it’s usually a matter of capturing some of the most essential message, if possible.
An alt text can be of any length. The statement that alt texts should not be descriptions does not mean that it cannot be detailed if needed. The point is that there are too many descriptions that say something about an image without conveying its message (like “big red bullet” or “A man in a canoe”).
The longdesc attribute is supported by some software but highly debated and not part of W3C HTML5 CR but being developed as an independent “extension”.
The figcaption element is for captions presented along with an image. It does not address the issue of alternative text at all. It is meant to be presented to the user, whether he sees the image or not.
If you want to provide complex alternative text (where "complex" could mean: containing lists, tables, audio/video etc.), you could either use an img element with a longdesc attribute, or an object element instead of img.
longdesc
In HTML 4.01, longdesc is part of the specification. In HTML5, it was removed, and is now developed as an HTML5 extension (but it’s currently only a Working Draft from 2013 Update: it became a W3C Recommendation).
Problem: You would either have to include the content on the same page, but then you shouldn’t visually hide it (as not only screen reader users may want to access this content). Or you would have to add separate pages for the content (but then search engines won’t relate this content to the image, i.e., you miss on ranking potential).
object
The object element can be used for any kind of media. Its content is the fallback content, which allows you to use markup for the alternative text.
<object data="appleeat.png" type="image/png">
<!-- the alternative content goes here -->
<p>A man bites into an apple. As it turns out, there's a worm in it!</p>
</object>
Here’s some discussion of alt text that might apply to your situation:
http://webaim.org/techniques/alttext/#context.
Although I agree with #Jukka that long alt text isn’t a problem in itself. It’s true that “alt text isn't for descriptions”, but only because alt text is for equivalent content. If the equivalent content to a particular image is a description of it, then that’s fine.
It’s just that for lots of images used on the web, that’s not true. For example, the best alt text for the Stack Overflow logo at the top of this page wouldn’t be
The Stack Overflow logo: an abstract in-tray overflowing with paper, followed by the word “stack”, and in bold, the word “overflow”
It would just be “Stack Overflow”, because that provides an equivalent experience for a partially-sighted person (i.e. it tells them which website they’re on).
But if your images are cartoons, I guess writing alt text for them is a bit like doing audio descriptions for movies. You need to be more descriptive if you want to provide an equivalent experience. It’s certainly a challenge, especially if you don’t have experience, or partially-sighted users to discuss it with.
Joe Clark, in his book “Building Accessible Websites”, discussed describing images:
http://joeclark.org/book/sashay/serialization/Chapter06.html#h2-2290
And even providing alt text for comic strips, although his example is for dialogue-heavy strips, and I’m not sure what sort of experience it provides in today’s screen readers:
http://joeclark.org/book/sashay/serialization/Chapter06.html#h2-4240
Most people now use a figcaption as a caption under an image in an article, or for a short image description, like so...
<figure aria-labelledby="myimage1" >
<img id="image1" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" />
<figcaption id="myimage1">This is My Image Caption!</cite></figcaption>
</figure>
However....since you are associating a larger description with your image, and it is not needing a caption, try this...
<div role="img" aria-labelledby="myimage2">
<img id="image2" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" />
<p id="myimage2">Larger description of my image...</p>
</div>
This is also compatible with WAI-ARIA accessibility standards, which will read and associate your container "div" and your "p" description with the image. Notice the new attribute, role=img. Since the div, unlike figure, is not normally associated with an image, this helps the screen reader identify the div container as part of the image.
ADDITIONAL
Note that the alt attribute should be a text replacement for an image if the image never appears, a user agent cannot read images, or the image is slow to download. I like to show this info in a grey background image box in case a image breaks and a user needs to know what is missing. Its designed to tell a user what the image represents in a simple, short text string.
The title attribute on images is an important rollover box that gives additional image information, image map feedback, or where it would link to when the image is a clickable hyperlink. Some designers frown on the title attribute but I use it all the time in a lot of my HTML to add rich info to all my interactive and visual elements.
I think adding in descriptive text in a <figcaption> is a good idea. There is of course the problem with browser support, this should be able to be addressed with CSS:
figcaption { display: block; }
You could then hide this text by default figcaption { display: none; } and include a link somewhere that will refresh the page with the captions displayed through an alternative style - figcaption { display: block; }
This option then eliminates the need for javascript solutions and only gives captions to those that specifically request them.
You could maybe set this up with a little bit of php:
<head>
<style type="text/css">
<?php if(isset($_GET['CaptionDisplay']))
{
echo 'figcaption { display: block; }';
}else{
echo 'figcaption { display: none; }';
}
?>
</style>
</head>
HTML Link - Show captions
This is completely off the top of my head :) Let me know if I can better explain anything.
I think "equivalent experience" is kind of subjective, and I can attest from experience that many accessibility guidelines, while well-intentioned, aren't correct. For a screen reader user, just seeing the Stack Overflow alt tag logo wouldn't provide an equivalent experience to a sighted user. You should always describe any alt tags properly. I don't think having a longer alt text is necessarily bad, but if it gets too unwieldy, you could build a separate section in plain text. Thank you for taking the time to make your site accessible. Screen reader users do appreciate inclusive design and the thought-out descriptions.
I'm working on improving SEO on an old website that a terrible developer coded. It consists of a lot of images displaying via CSS background: as well as buttons. I'm wondering if there is anyway to include 'alt / title' text or other SEO options to save this site -- without an entire rebuild.
Also you can use this:
a {
background: url('image.png') no-repeat center center transparent;
display: block;
text-indent: -9999em;
overflow: hidden;
}
And write the HTML as:
Welcome
Since you are putting "Welcome" inside the <a> tag, you can be SEO Friendly.
If the images are not displayed you can not use the traditional 'alt/title' that would be on an image tag.
But you could add a 'title' attribute to the div which is being styled. I'm not sure how much SEO weight that it would carry.
Review your metatags, description and title attributes. Make them more rich
Add alt to every important image and title to every <a>, and as much text as you can. If it's 100% made of images it will be hard to save it.
You'd be better off using true img tags instead of relying on the CSS background-image property. Since I'm sure you already know that, here's some other advice!
Image alt tags are good for SEO, but only as part of a larger strategy. You'd gain a bigger SEO boost through creating valuable content: blogging, posting links on relevant forums and blogs, updating the copy of your site.
A regularly updated blog would do far more for your SEO than an entire site rebuild to add alt and title tags to your images.
You might consider renaming your images to more SEO-friendly names, as well. Something like "flapjack.png" is better than "image_01.png" for example. This wouldn't take much time to do.
In a web page that shows a list of tutors, the current HTML codes:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
Now, for some reasons, the word Tutors which is currently wrapped by h1 needs to be removed in the page. I can think of 3 choices:
Use css to hide it.
Simply remove it, and the page will have h2
without h1.
Remove it, and change all h2 to h1.
Which one is more appropriate?
#3: Remove it, and change all h2 to h1.
For SEO, hiding text is frowned upon because it can be considered black-hat SEO. Unless you're going to replace the header with an image that has the text, "Tutors".
Should I include my logo text using 'alt' or CSS?
Hiding Text with CSS for SEO
If you insist on hiding the text, Accessibility/SEO Friendly CSS Hiding
You cannot have <h2> unless there's an <h1> beforehand.
Headings, heading hierarchy, and document outlines
None of these options are good SEO.
This is risky and a bad practice. Search engines have become very good at figuring out when text is hidden and if they find that a heavily weighted tag like <h1> is hidden it will hurt your rank.
You should never skip a step in the hierarchy of headers (don't have <h3>'s without <h2>'s etc.). In addition they should always appear in decreasing order of importance.
Every page should have exactly one <h1> and it should be the first heading tag. They are on the order of <title> in terms of SEO weight.
Why does this headline need to be hidden in the first place? It seems like a good description of the content of the page.
Depending on the use case for the page, any three of those sound like valid options. That said, here are some things I thought about when considering this question:
SEO: it appears there is some opinion out there that the choice of tag content may affect search engine ranking.
Style-less rendering: if for some reason the page might be rendered without the accompanying css sheets, be aware of the effect of default rendering on the page and how you might want it to perform
Be aware that there are new common tags like 'section' in HTML 5, which might fit your page and be a bit clearer semantically than H tags
This is a preference. You should always separate presentation and structure, so I would say just comment it out, and put that it use to be there. If you hide it, this really isn't presentation because it is never seen. So 3 would be the most appropriate.
Doesn't matter.
If you are using jQuery to show and hide things it has no bearing on SEO. Search engines see what you see when you view source in all practical senses. You aren't doing anything sneaky anyway.
Reference my post here on stack overflow If I do everything on my page with Ajax, how can I do Search Engine Optimization?
because what you are doing is AFTER the search engines have looked at it for all practical purposes.
Perhaps you should consider formatting these items as a definition list, e.g:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
becomes:
<dl title="Tutors">
<dt>John</dt>
<dd>...Description here...</dd>
<dt>Mary</dt>
<dd>...Description here...</dd>
<dt>David</dt>
<dd>...Description here...</dd>
</dl>
And then apply CSS classes and styles to the elements to prettify it for sighted users. Just a thought.
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.