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.
Related
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
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.
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.
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*/ }
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.