SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    marking a postcode "postcode" so search engines show it when "postcode" searched for

    i want to have an address on various pages of a shop's site and i also want people who type in the name of the shop plus the word postcode to get the postcode in the google/search-engine results, so i need to include the word postcode right near the actual postcode -- but i don't really want the word postcode in the address on the shop's webpages.

    this kind of thing but i doubt this is a good idea (and may not even achieve the desired result; does google knock out display:none stuff from its results? probably not so it would work at least):

    Code:
    <h3>Smiths Florists</h3>
    <address>
    The Street<br />
    London<br />
    <span style="display:none">Postcode: </span>LN1 1LL<br />
    UK.
    </address>
    any ideas?

    thanks.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't know, but it would be less likely to be ignored by Google if you hid it with a rule in the actual stylesheet rather than using an inline style.

    Ideally, you would use microformats (e.g. like here) but from what I can glean from a quick search, Google doesn't give two hoots about them for now. So perhaps what you suggest is what will have to do for now.

    BTW, according to this, you're not using ADDRESS correctly.

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    right. maybe i should just seperately (from the address), maybe on the contact page or the location page, just have something like
    <p>Postcode L1 1LL</p>
    on the bottom maybe, then the address on the page as normal will give people the address and the bit of html above will cover the search engine bit.

    i didn't know that the address shouldn't be used for location/place addresses. seems to be a bit of confusion on that; pretty sure a number of places say otherwise. oh well, doesn't matter about that bit much.

    thanks.

  4. #4
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    > I don't know, but it would be less likely to be ignored by Google if you hid it with a rule in the actual stylesheet rather than using an inline style.

    hang on a minute! i want google to include it in their results -- not ignore it (i can't see them providing a result from someone doing a search including "postcode" because your page includes the word postcode, but hiding the instance of the word postcode in the results because it's css display is none).

    anyway, it's probably all a bad idea. for a start for people who haven't got css it'll be a bit silly.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's why I said less likely to be ignored. So putting the display:none rule in an external stylesheet would be a good idea (it's a good idea anyway).

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh yeah, sorry, got confused

    ok, thanks.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Mike Cherim puts headers above his main site navs sometimes when he does a site with more than a couple of menus. He hides them from normal visual users in the base stylesheet with a class called "offset". Text readers, screen readers, googles, all see the header. So, an idea.
    example page: http://green-beast.com/blog/ turn css off, skip to nav, it's near the bottom.

    ps I also use address for addresses. I use definition lists for any group of 2 words with a relationship, p for a single sentence (which is technically not a paragraph) and I walk and chew gum at the same time.

    Until a <postaladdress> element is invented, I'll use <address> for adresses. You don't see many pages with address for web authors, and you don't see too many dl's using dictionary terms and definitions.

    There was once an html tag called <menu>. It's deprecated now and we use <ul id="menu">. HTML 5 is bringing back the menu but calling it <nav>.

    So, I have no problem using a tag for a meaningful (what I think is appropriate) data even if that conflicts with what was originally intended way back in the day.
    Kinda like a doctor using a drug to treat a disease (which works) when it was not officially approved for that disease by the Authoritay's. If the drug is actually correct for treating that illness, use it. Like using birth control to treat acne in males.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Mike Cherim puts headers above his main site navs sometimes when he does a site with more than a couple of menus. He hides them from normal visual users in the base stylesheet with a class called "offset". Text readers, screen readers, googles, all see the header. So, an idea.
    I do the same, but I prefer a less presentational class name like "structural".
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The only non-presentational name I've used for hidden things is a class called "skip" (for skip links)... everything else gets names like "verberg" and hidden : ) More to remind me why something has a class or id on it.

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    More to remind me why something has a class or id on it.
    That's the whole purpose of 'semantic' names. They explain what things are. Then you can choose to apply CSS to affect what they look like.

    A name like "hidden" doesn't explain why the element is hidden. A name like "structural", on the other hand, conveys that this is an element whose purpose is mainly structural. That doesn't mean it has to be hidden off screen, but it might not come as a complete surprise if it is.
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    A name like "hidden" doesn't explain why the element is hidden.
    Like I said, more of a reminder to myself. I have a class on this, why again? Oh yeah, to hide it. If I don't remember why I wanted to hide it, I delete the class.

    I'm not disagreeing with you though, I agree with semantic tags... oh, 99% of the time. The rest is just me being stubborn : )

  12. #12
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about the names 'screen-reader' for screen readers and 'seo' for search engines?

    Code:
    .screen-reader, .seo {
    	position: absolute;
    	top: 0;
    	left: -999em;
    }
    Usually, when 'hiding' text, you are hiding text for screen readers or for SEO purposes.

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't do it, Cooper. What I'd do is use generated CSS (and a background image for IE). As long as the non-generated content is meaningful and a clear relationship exists (as does the example in the first post), it won't likely affect anyone (though user testing would have to be done to ensure this).

    Not only that, but Google would still pick up "Postal Code" anyway. But given that it's not in a heading and few people are likely to link back to that page with "Postal Code" in their anchor text, I doubt he'd be able to rank well for it to begin with.

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I sometimes use the class name structural to indicate elements that are needed for structural integrity (e.g., certain headings) but that are not wanted in a graphic design. Users with screen readers, text browsers or antique graphic browsers may need those to make sense of the content structure, but they can be placed off-screen with CSS for the majority.

    I sometimes also use class names like no-print or print-only for elements that should not be printed or should be visible only in print, respectively.
    Birnam wood is come to Dunsinane

  15. #15
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tommy -

    Do you think 'screen-reader' would be appropriate in a case such as this:

    Code:
    <h2 class="screen-reader">Navigation</h2><!-- hidden text -->
    <ul>
    	.....
    </ul>
    I am hung up on an approach for 'naming' hidden text.

    Screen Reader - Might be to specific and is only tied to 'screen readers'.
    SEO - Also, is to specific.

    Maybe, 'structural' is the best option.

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's where I'd use class="structural".
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I sometimes use the class name structural to indicate elements that are needed for structural integrity (e.g., certain headings) but that are not wanted in a graphic design. Users with screen readers, text browsers or antique graphic browsers may need those to make sense of the content structure, but they can be placed off-screen with CSS for the majority.

    I sometimes also use class names like no-print or print-only for elements that should not be printed or should be visible only in print, respectively.
    That's a good idea, though I prolly wouldn't remember what "structural" meant so I'd have to pick another name.

    The print one I've used a few times, very useful.

    While I've added skip links for accessibility reasons (and some other things of dubious usefulness), I've never given them names like "screen reader" cause first, they're not the only ones, and second, if I've hidden something, I just know it's in the code and thus screen readers and Lynx users and teh Googles will just see it by default.

    Like, I just built a table-form-thingie where one header not only made the whole column too wide, but was also rather redundant. So, I hid it, because to visual people, the purpose of the things in that column make total sense (cause it follows convention on like every other table-form). Still, each column SHOULD have a header, so it's there, and using scope="col" or headers="blah" the name of that th could be read out loud with every item in the column if needed.

    It wasn't added for SEO or screen readers, it just belonged there and was hidden because it was visually redundant and teh uglies.

    <h2 class="hidden">Navigation</h2><!-- hidden text -->
    Okay, I won't advocate this as Tommy's right that the class should say what the header is, but for me, it tells me the behaviour of the class and not the header. The header is just a header and to me, doesn't need a name. It only has a class because I want to do something visual to it, so I name them after the behaviour. I DON'T do this with colours, and I've seen that Mike Cherim does. I had a header where two parts were two different colours.

    First I had this:
    <h1>Sometext<span class="blue">other text</span><span class="nameofimage"></span></h1>

    But later, I used the exact same design for a sister site, but it had different colours and a different replacement image. So, I learned, I'd been pretty dumb, and changed it to this:
    <h1>Sometext<span class="color">other text</span><span class="img"></span></h1>

    Here, I'm still not describing the content really, but the behaviour of the spans. First span has the behaviour of colouring the text something different than the default. Second span has the job of holding an image. This same header could now go on any site regardless of what changes I made in styling.

    So I guess it would be dumb of me to describe the behaviour of something if there's a possibility it might change. Like the th I'm hiding, maybe later I'll stop hiding it and instead make it a different colour than the other th's. Now, the behaviour described in the class name doesn't match. So a better name would likely be "firstheader" or something, cause it's the first th of the table.

  18. #18
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Okay, I won't advocate this as Tommy's right that the class should say what the header is, but for me, it tells me the behaviour of the class and not the header.
    As long as it works for you, there's nothing wrong with that.

    Quote Originally Posted by Stomme poes View Post
    But later, I used the exact same design for a sister site, but it had different colours and a different replacement image. So, I learned, I'd been pretty dumb, and changed it to this:
    <h1>Sometext<span class="color">other text</span><span class="img"></span></h1>
    And next time you'll want to use a different typeface or text size instead, and 'color' won't make sense.

    Depending on the reason why 'other text' should be styled differently, I'd choose one of the following ways,
    Code HTML4Strict:
    <!--Reason is emphasis-->
    <h1>Sometext<em>other text</em><span></span></h1>
     
    <!--Reason is pure visual styling-->
    <h1>Sometext<b>other text</b><span></span></h1>
     
    <!--Reason is 'semantic' highlighting, but not emphasis-->
    <h1>Sometext<span class="highlight">other text</span><span class="img"></span></h1>

    Then I'd use CSS to style that span of characters, of course:
    Code CSS:
    h1 em {color:#00f; font-style:normal}
    h1 b {color:#00f; font-weight:normal}
    h1 .highlight {color:#00f}
    I'm not saying my was is better than yours; it's just my preference.
    Birnam wood is come to Dunsinane

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Span's prolly the only one I could live with. I have occasionally used <b> tags around text for more than just bold, but never for something else and unbolding it at the same time-- seems leftbutright to me.

    And next time you'll want to use a different typeface or text size instead, and 'color' won't make sense.
    Yeah I mentioned this possibility at the end of my previous post. The thing was, the first change I had made actually was more in the semantic direction (I though) but bit me.

    The word was Scooterverzekeren, where verzekeren is a separate word but as a name is all run together. Both for readability reasons as well as for "logo" reasons, the second word was blue while the first was black. So first I had <span class="blue"> and then thought, wait, that's not semantic, what if I change the colour?

    So I thought, I'll name the class what it is, and had class="verzekeren". Okay, this worked for a while, until CarPolis came up. Sister site, same thingie going on with the name, but different text. Shoot. So went back to colour but left it as an open colour. Since the logo is already trademarked or whatever they did with it, it's unlikely to change to a different font or something. It'll always be two colours, though not necessarily the same two colours (if the background went blue for some reason, the blue text would likely go white).

    I also thought of class="tekst" since that span would at least always have something to do with playing with the display of the text. But I already had a new bald spot on my head so just stopped : )

    Currently I started doing various colourings just kinda randomly cause I saw it made reading (for me) much easier at Mike Cherim's GrayBit.com. He uses the names of the colours in the classes, and while I currently have that I don't want it, but it's looking like my choices will have to be numbered. colour1 and 2 and 3... not an optimal solution.

    Since I have some abbr's in the page I made use of some of them, and some text is emphasized but not sure if I want that emphasis as actual content instead of visual presentation... that would be another option, having abbr's, em's, and strongs all being their respective colours without needing to worry about naming.

    Bah, it's important but something you can definitely overthink.

  20. #20
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Span's prolly the only one I could live with. I have occasionally used <b> tags around text for more than just bold, but never for something else and unbolding it at the same time-- seems leftbutright to me.
    As I said, it would depend on why that span of characters should be styled differently. One possible advantage of using <b> or <i> is that it will be 'styled' differently even in Lynx.
    Birnam wood is come to Dunsinane

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Sure. That's why I'm careful with it... whether it's a content change or just visual.

    Lawlz it's evil derailing threads like this. But I learn so much from them.

  22. #22
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of trying to hide the 'postcode' text, you could alway add labels for each line i.e. address1, address2, town, county, postcode.

    This would probably be the easiest way to do it but may spoil the aesthetics of the page.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •