Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > humor me: good source to teach me how to get web site to be found by google

humor me: good source to teach me how to get web site to be found by google
Thread Tools
hart
Senior User
Join Date: Sep 2002
Status: Offline
Reply With Quote
May 24, 2008, 06:17 PM
 
I've just launched a site that isn't appearing for me on Google after a week. At least not in the first 10 pages of search results or so. The site is for an author for whom I get a lot of search results but none are this particular one. I've put descriptions and keywords in my head data and even when I type this stuff in word for word I don't get the site.

What possible errors could I have made? What can I do to fix this? I've never paid much attention to how Google worked before because I've never had this problem.

I'm perusing Google's info for webmasters and the hosting company's info, plus doing web searches but if one of you guys can give me a tip on a source of info to help me out it would be greatly appreciated.

My client is ANXIOUS!!
     
peeb
Addicted to MacNN
Join Date: Mar 2006
Status: Offline
Reply With Quote
May 24, 2008, 06:40 PM
 
No one knows for sure, but having other things link to it helps.
     
hart  (op)
Senior User
Join Date: Sep 2002
Status: Offline
Reply With Quote
May 24, 2008, 07:12 PM
 


Urgh! that's what I was suspecting. I'm working on jumping through google's hoops at the moment which includes submitting a site map which comes under the "learn something new every day" category.

The magic of Google!

I've been roaming around other search engines but so far this seems to be the Invisible Site!
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
May 24, 2008, 08:19 PM
 
Peeb: that's not true, Google is not that mystical.

Google has a system called "PageRank" that if you Googled you could learn more about it. It is important that each page of your site is accessible by Google's spider, that it is properly coded (Google rewards well coded pages above poorly coded pages), and that your images are well described by alt tags (in your case, since there is little to no HTML text).

Increasing your PageRank is essentially increasing your popularity - getting more sites to link to yours, getting recognition elsewhere on the web, etc. Any content that you have that is unique helps too, as having little to no competition and interesting content helps. The text you use on the site and the decisions you make in your branding and marketing have an impact here too. The more you can learn about branding and marketing, the more successful you can make this site once this focus has been successfully applied to the site.

Hope this helps!
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
May 24, 2008, 09:29 PM
 
Originally Posted by hart View Post


Urgh! that's what I was suspecting. I'm working on jumping through google's hoops at the moment which includes submitting a site map which comes under the "learn something new every day" category.

The magic of Google!

I've been roaming around other search engines but so far this seems to be the Invisible Site!

Google's sitemap will only help Google find pages that its spider may not be able to find on its own. You can test to see what pages its spider can see by using a text only, Javascript-less browser such as links/lynx, and you can test to see what pages will be spidered via wget.

With a small site that isn't relying on Javascript to serve content, you don't need to bother with Google's sitemap thing.
     
Chuckit
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status: Offline
Reply With Quote
May 24, 2008, 10:22 PM
 
Get inbound links. Google isn't just going to find your page by magic. The more incoming links and the better the sources, the more prominent you will be to Google.
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
     
hart  (op)
Senior User
Join Date: Sep 2002
Status: Offline
Reply With Quote
May 25, 2008, 11:31 AM
 
Ok, the inbound links I've been working on since yesterday so that's in the works. I've got the author's staff working on it as well.

I added a link from the author's Wikipedia page. Wikipedia says it won't add to your hit count but don't the spiders work more by actual connections in this case? Checking out IMDB too.

using Lynx is next on my list. I checked using Google's webmaster tools and apparently Google has found the site but not indexed it (?) if I understand correctly.

My alt tags are as explicit as possible I hope. One thing I'm not sure of: if the alt tags have no spaces, just camel case for multiple words is this translatable into separate words or are they seen as one big incomprehensible word? As in bigImage rather than "big image". It's actually almost all images at the moment until the site goes to the next stage.

This page is technically very simple as a stop gap before a more detailed site is finished so it's completely bell and whistle free. For that reason the code is quite simple and, I hope, relatively correct because of it. Perhaps being so image-heavy is a handicap in this case. You can tell I lean towards imagery more than code.

Here's the address: Chris Claremont Official Site. Comics, projects, appearances.

As always, thank you guys for your help.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
May 25, 2008, 11:53 AM
 
Your alt tags need to have some more human readable terms, and they can include spaces since they are wrapped in quotes. Every word that is on your page needs to either be a part of the HTML or in an alt tag... There is no way for Google to see that Chris will be at Motor City Comic Con, for instance... Right now, whenever Google does find your site it is not going to pick up anything terribly useful. Google no longer uses the meta tags you've included at the top of your page, so those aren't going to help.

It looks like you used ImageReady or some Adobe product to code this page, since it created about a bazillion images/slices. Google might favor finding actual links/href references over imagemaps, and more modern CSS/HTML over using tables for layout. Even though this is not strictly necessary for this page, the learning process will help you a great deal if you've never hand-coded a page in this manner... Most sites do not lean on imagemaps as heavily as yours, and there are many occasions where trusting ImageReady code will lead to rendering incompatibilities and severely bloated code. You may need to/want to go this route for the inner pages of the site anyway...

This recoding will tighten up your code a great deal and may make the page render faster. You can also move your Javascript and CSS to separate files so that when you add new sections to the site these are cached.

Have you tested your page in IE 6 as well?


I don't mean to sound harshly critical of your site, it looks great and works! I'm just trying to help with some of the nitty grittier technical stuff by sharing some of my experiences
( Last edited by besson3c; May 25, 2008 at 12:02 PM. )
     
hart  (op)
Senior User
Join Date: Sep 2002
Status: Offline
Reply With Quote
May 30, 2008, 12:36 PM
 
Thanks for all the info. Yes, the image bit and slice usage was pretty clumsy. I was suspecting that something in this structural choice was making it hard to find. I needed a fast and furious method so I went with what I could figure out in a day or so (having devoted lots of time to the images and layout. Designer first, tech-head second I guess). I never seem to overcome the learning curve with CSS so I always end up with a mess that I have to research to get it to work right. But yes, I want to move a lot of the info into separate CSS pages now that I have a little time to get elegant. And yes, I used an assortment of Adobe products.

For that matter, I understand IN THEORY that a lot of the lay out work can be handled through CSS but once again, I never seem to get past the fumbling stage with it. OK, I'm going to be all over it this time!

Here's a question I have: I got all hung up on this image map thing originally trying to avoid those obnoxious blue boxes that Internet Explorer puts around linked images. Picky designery quibble. Image maps eliminate the link boxes but it makes for a very opaque site with everything hidden behind the image maps. Not to mention the code bloat. Is there a better way to do this?

For some reason I developed a mental block about the alt tags and spaces. Spaces, Yay! I'll go back and clean those up.

I appreciate the help and really, everything you say makes sense. I knew going into this it was clumsy so having specific stuff hi-lited for me is great. THANKS!!

Oh, and it finally came up on Google
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
May 30, 2008, 12:46 PM
 
Originally Posted by hart View Post
Here's a question I have: I got all hung up on this image map thing originally trying to avoid those obnoxious blue boxes that Internet Explorer puts around linked images. Picky designery quibble. Image maps eliminate the link boxes but it makes for a very opaque site with everything hidden behind the image maps. Not to mention the code bloat. Is there a better way to do this?
You can eliminate the blue borders that IE and Mozilla produce in your CSS:

[codex]img {
border:0
} [/codex]

Or in your img tag itself:

[codex]<img src = "whatever" border = 0 alt = "whatever" />[/codex]

It is better to go with the CSS approach, and move all of your arguments and design parameters out of your HTML and into your CSS.

For some reason I developed a mental block about the alt tags and spaces. Spaces, Yay! I'll go back and clean those up.
What remaining questions do you have about alt tags and spaces?
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Jun 2, 2008, 04:16 PM
 
I think there's a lot of great advice in this thread, and I'm really happy to see that you care about the craft of your site (now that the stress of designing it and just getting it out there is over with ).

I think that one of the most important things to keep in mind, is that it doesn't have to be hard. I know that CSS and handcoding can seem daunting at first, but if you take each thing one step at a time, it's not so bad. And in fact, you can actually work with what you already have (that's always a good thing!).

For example, I just threw together the following example, without looking at any of your code:

<body>
    <h1><a href="./">Chris Claremont</a></h1>
    
    <div id="sidebar">
        <p id="motorcity"><a href="motorcity/">Motor City Comic Con</a></p>
        <p id="wizardworld"><a href="wizardworld/">Wizard World</a></p>
    </div>
    
    <div id="genext">
        <p id="marvel"><a href="marvel/">Marvel</a></p>
    </div>
    
    <div id="newexiles">
        <p id="alandavis"><a href="alandavis/">Cover art by Alan Davis</a></p>
    </div>
    
    <address><a href="mailto:[email protected]">Contact</a></address>
    
    <div id="footer">
        <p id="design"><a href="design/">Julia Toos Design</a></p>
    </div>
</body>

body { background: url(site.png) no-repeat 0 0 }
    h1, p, address { margin: 0; position: absolute }
        h1 a, p a, address a { width: 100%; height: 100%; background-position: 0 0; text-indent: -10000px; display: block }
    
    h1 { width: 400px; height: 100px; top: 20px; left: 20px }
    
    #motorcity { width: 300px; height: 30px; top: 400px; left: 10px }
        #motorcity a { background-image: url(motorcity.png) }
        #motorcity a:hover { background-position: 0 -30px }
    #wizardworld { width: 200px; height: 200px; top: 600px; left: 10px }
        #wizardworld a { background-image: url(wizardworld.png) }
        #wizardworld a:hover { background-position: 0 -200px }
    #marvel { width: 300px; height: 20px; top: 300px; left: 300px }
        #marvel a { background-image: url(marvel.png) }
        #marvel a:hover { background-position: 0 -20px }

I highly encourage you to not try and run the code—it's hardly proofread and would neither do nor look like anything in its current form—but I do think that it's worth studying. The important thing to keep in mind is that the HTML begins to approach something meaningful. Although it's not quite there, it gives an unintelligent bot like Google's something to work with. The basic structure is this:

You have one image (site.png) which represents the entirety of your site. You set this as the background of the body, to be placed at the top left of your page. You specify that it shouldn't repeat.

You then target all of your anchor elements with following CSS selector: h1 a, p a, address a. If you look at the properties of the selector, you'll notice that I set the "display" to be "block." There's a lot more to be said about this, but for now it suffices to know that this lets us set a "width" and a "height" property on our links, which would be otherwise impossible (well one of either "width" or "height," to be precise — check to see which it is!).

In this case, you want all of the links to take the full extent of their bounding containers, in this case our "p"s, "h1"s, and "address"s. Therefore you set their width and height properties to 100%. Finally, you don't want the text to appear on the page (this is just for screenreaders and search engines), so you use "text-indent: 10000px," which effectively throws the text off the screen, but keeps it visible for other user agents.

Secondly, you declare all of your bounding containers to be absolutely positioned and without margins. This means that you can effectively take these boxes on your website and position them wherever you want (relative to the top-left of the document). Removing the margins is just a housekeeping issue — many elements have default margins and properties which can sometimes cause issues, so we like to override them.

Then the fun comes . Now can you take your boxes and define their widths, heights, and top and left positions. You'll get these values easily from Photoshop. It'll take some time, and some effort, but not too much. It's worth it.

The last important detail is that you'll want to create what are sometimes called sprites. Traditionally, when creating rollover images, we web developers would create one file for each state of an image— an off image, and an on image, for instance. More recently, we've begun to realize that by effectively manipulating the window of an element, we can use one file, which has both images in it. Then, to change the state of an image, you simply, attach a different "background-position" to its "hover" pseudo-selector.

This sounds confusing, and I know that it can be, especially when you're first starting out, but the idea is actually quite simple and I know you can figure it out with just a little bit of effort. The founder of the technique can explain it far better than I can.

Good luck!

And to all the CSS aficionados— I know that there are better ways of doing this and that absolute positioning is the devil, and that divitis should be reduced. My only defense is this: I think that it is easier to learn this way, and that it is more effective in getting the basic ideas of CSS and separation of content and presentation across. Once you have those ideas down, then the more complicated techniques like float-based, liquid designs, and absolute positioning under relatively positioned objects can be better understood.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jun 2, 2008, 04:46 PM
 
Great post Synotic, I just have a few questions/comments directed to you:

Originally Posted by Synotic View Post
In this case, you want all of the links to take the full extent of their bounding containers, in this case our "p"s, "h1"s, and "address"s. Therefore you set their width and height properties to 100%. Finally, you don't want the text to appear on the page (this is just for screenreaders and search engines), so you use "text-indent: 10000px," which effectively throws the text off the screen, but keeps it visible for other user agents.
I'm not sure why you would want to place the text off screen in any scenario? Google can punish you in PageRank for manipulating your page to increase search ranking, and I'm not sure what other reason there would be for doing this?

The last important detail is that you'll want to create what are sometimes called sprites. Traditionally, when creating rollover images, we web developers would create one file for each state of an image— an off image, and an on image, for instance. More recently, we've begun to realize that by effectively manipulating the window of an element, we can use one file, which has both images in it. Then, to change the state of an image, you simply, attach a different "background-position" to its "hover" pseudo-selector.
To whomever: I've found that mouseovers work better as Javascript than CSS. The problem with CSS is that you sort of get a slight flicker as the image is loaded in realtime, whereas with Javascript you can preload the image:

[codex]var yourimageon = new Image();
yourimageon.src = "/path/to/image";

var yourimageoff = new Image();
yourimageoff.src = "/path/to/image";

function mymouseover(myimage) {
imgOn = eval(myimage + "on.src");
document.images[myimage].src = imgOn;
}

function mymouseout(myimage) {
imgOff = eval(myimage + "off.src");
document.images[myimage].src = imgOff;
}

<img src = "/path/to/image" name = "image1" onmouseover = "mymouseover('image1')" onmouseout = "mymouseout('image1')" />
[/codex]


Finally, it might be worthwhile to note that having addresses exposed on webpages is a good way to have your email address nabbed by spam harvesters... A better approach might be to great a web-based form for contacting the site owner. If you do this, make sure you secure your form, and beware that spammers can use the ASCII character for backspace to rewrite your email headers in an improperly designed form!

I realize that most of this is not suitable for the beginner crash course, but just including my two cents to anybody else who might be following along...
     
Faust
Mac Enthusiast
Join Date: Jul 2007
Location: hamburg, germany
Status: Offline
Reply With Quote
Jun 2, 2008, 04:50 PM
 
It's alt attribute, attribute, ATTRIBUTE, not tag!

Sorry, couldn't resist, besson3c. Great suggestions.
     
Faust
Mac Enthusiast
Join Date: Jul 2007
Location: hamburg, germany
Status: Offline
Reply With Quote
Jun 2, 2008, 04:54 PM
 
Originally Posted by besson3c View Post
I'm not sure why you would want to place the text off screen in any scenario? Google can punish you in PageRank for manipulating your page to increase search ranking, and I'm not sure what other reason there would be for doing this?

So that people who have images disabled or view a site text-only can still use a site properly. It's quite a common image replacement technique, though some people do abuse it.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jun 2, 2008, 05:14 PM
 
Originally Posted by Faust View Post
So that people who have images disabled or view a site text-only can still use a site properly. It's quite a common image replacement technique, though some people do abuse it.
But that's what alt attributes in image tags are for, no?
     
Faust
Mac Enthusiast
Join Date: Jul 2007
Location: hamburg, germany
Status: Offline
Reply With Quote
Jun 2, 2008, 06:17 PM
 
Originally Posted by besson3c View Post
But that's what alt attributes in image tags are for, no?
Alt attributes do not substitute headers and their corresponding semantic value. Like you said earlier in one of your responses, semantic markup is of significant importance, also to search engines, so having no text for an h1, h2,h3 or other element would be a disservice to any site and its users, consequently to search engines too. An alt attribute is a replacement for images whereas with headers the image replaces text. Not ideal, certainly but there are not all that many alternatives if you feel you need to use non-standard fonts for your headings or otherwise construct your headings in such a way (e.g. graphically) that - in order to preserve a decent amount of readability - CSS rules are applied such as have been mentioned (like negative text-indenting or setting the display value to none or even using advanced, more complex methods such as sIFR (Flash and JavaScript based image replacement). Of course, the best way would be to avoid any of it and just use standard fonts or non-graphical replacments for text. But, alas, not much fun for the creative types.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jun 2, 2008, 07:25 PM
 
Originally Posted by Faust View Post
Alt attributes do not substitute headers and their corresponding semantic value. Like you said earlier in one of your responses, semantic markup is of significant importance, also to search engines, so having no text for an h1, h2,h3 or other element would be a disservice to any site and its users, consequently to search engines too. An alt attribute is a replacement for images whereas with headers the image replaces text. Not ideal, certainly but there are not all that many alternatives if you feel you need to use non-standard fonts for your headings or otherwise construct your headings in such a way (e.g. graphically) that - in order to preserve a decent amount of readability - CSS rules are applied such as have been mentioned (like negative text-indenting or setting the display value to none or even using advanced, more complex methods such as sIFR (Flash and JavaScript based image replacement). Of course, the best way would be to avoid any of it and just use standard fonts or non-graphical replacments for text. But, alas, not much fun for the creative types.

I'm not sure I'm seeing your point. I'm not sure why you would use an h1 tag with no text (and no image), but even if you had to, why not just set the CSS display attribute to none or visibility to hidden? I guess I'm not understanding what circumstances would warrant this?
     
Faust
Mac Enthusiast
Join Date: Jul 2007
Location: hamburg, germany
Status: Offline
Reply With Quote
Jun 2, 2008, 07:35 PM
 
Originally Posted by besson3c View Post
I'm not sure I'm seeing your point. I'm not sure why you would use an h1 tag with no text (and no image), but even if you had to, why not just set the CSS display attribute to none or visibility to hidden? I guess I'm not understanding what circumstances would warrant this?
Using a font that is not a standard is one example. Using an image to replace a header would be the second example. Say, you'd like a site you develop to have all h1 elements to have the Bauhaus font. Unless you use an image replacement technique (such as using actual images that display the font type or use Flash/JavaScript replacement techniques), you can be certain that 2% of users actually see the Bahaus font. Most users will get standard fonts you have specified in your stylesheet. Let's say you want to create a nice slogan in the form of a button or badge, or even a submit button. You can either make that completely inaccessible by not providing image alternatives, or you actually use text, push it off screen, hide it or otherwise make the text invisible. That way, you not only allow people who have CSS and images disabled to view your headers but you also allow search engines to index them like normal headers.

By the way, most logos are treated that way. They are an important branding element but also an important content element which is why most sites have their h1 or h2 element nicely replaced by a graphical logo as their background image or image and the text invisible, albeit revealed if you view the source.

The point is that you SHOULD use text for a header and not just an image, but if you want to use graphical displays or different fonts or whathaveyou that would either not display correctly or lose its semantic value then image replacement techniques are a means by which a header can be accessible and readable for users with either images turned on and CSS turned off or vice versa. Googling "image replacement techniques" will spit out useful and detailed articles on the issue. Other than that, webstandards.org, mezzoblue, 456bereastreet, ericmeyer.com, zeldman.com and all those other webdevelopment and webstandards gurus have great articles and explanations on the topic.
It's bedtime for me.
( Last edited by Faust; Jun 2, 2008 at 07:49 PM. )
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jun 2, 2008, 07:42 PM
 
Originally Posted by Faust View Post
Using a font that is not a standard is one example. Using an image to replace a header would be the second example. The point is that you SHOULD use text for a header and not just an image, but if you want to use graphical displays or different fonts or whathaveyou that would either not display correctly or lose its semantic value then image replacement techniques are a means by which a header can be accessible and readable for users with either images turned on and CSS turned off or vice versa. Googling "image replacement techniques" will spit out useful and detailed articles on the issue. Other than that, webstandards.org, mezzoblue, 456bereastreet, ericmeyer.com, zeldman.com and all those other webdevelopment and webstandards gurus have great articles and explanations on the topic.
It's bedtime for me.
I really don't mean to sound combative, but humor me...

Why would you use a non-standard font? If you were using an image to replace a header, why is placing text out of page boundaries better than an alt attribute within that image tag? Why would you wrap a heading tag around an image anyway, as opposed to a div/span block? I understand the value of applying a strict semantic meaning to a tag, but putting text outside of page boundaries seems to sort of negate proper semantics.

Again, I'm just trying to recognize the practical purpose here in case I need to adjust my own coding practices...
     
Faust
Mac Enthusiast
Join Date: Jul 2007
Location: hamburg, germany
Status: Offline
Reply With Quote
Jun 2, 2008, 08:05 PM
 
Here is some more and much better explanation than I can give you right now as it's 2am and I got to get to bed.

As for why I would use a non-standard font. That is easy. Because I love visual design, am a font nerd and am not content with the very few font types available on the web.

Edit: There is also a nice Google link (may be of good use to the OP) concerning Google's thoughts on image replacement techniques and when they are fine to use and when not.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jun 2, 2008, 08:06 PM
 
Thanks Faust, I'll read through that...

Just to clarify, I meant why would you use a non-standard font within your HTML, i.e. not a graphic?

2 am? Your clock must be broken, it's only 8:00 pm!
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Jun 2, 2008, 08:46 PM
 
I was going to do a big write-up, but I'm going to follow faust's lead and defer to people smarter than me:

Cloaking vs Image Replacement: Hiding Text is Not a Bad Thing
Image Replacement + Google

But the basic idea is this:

<h2>Why Mathematics?</h2> plus "h2 { background: url('whymathematics.png'); text-indent: -1000px }

is semantically more meaningful than this:

<h2><img src="whymathematics.png" alt="Why Mathematics?" /></h2>

Images should be used for images and text for text. This has the combined benefit of removing your presentation from your content and allowing you to make changes to the design of your content en masse. As an example, your navigation menus can be as beautiful as this :

<ul>
    <li><a href="./">home</a></li>
    <li><a href="vlc/">vlc player</a></li>
    <li><a href="streaming/">streaming</a></li>
    <li><a href="docs/">docs</a></li>
    <li><a href="support/">support</a></li>
    <li><a href="developers/">developers</a></li>
</ul>
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jun 2, 2008, 09:56 PM
 
Synotic: I think I'm starting to understand the wisdom here... Thanks for the explanation!
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 10:09 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,