The company who built this website I’m managing used images for headings so there are no H1 tags on any pages. Unless I’m completely retarded, I’m pretty sure H1 tags are somewhat useful for SEO.

So how could I go about inserting hidden H1 tags? Would search engines penalize that kind of behavior? Are using alt tags for the heading images as effective?

Thanks..
If the content within the H1 tags are relevant to the content throughout the page, no, you won’t get penalized. Google generally doesn’t like hidden text though.

Yes, the content is relevant. I’m not trying to trick search engine bots or anything… just trying to make it easier to find the relevant content.

What options do I have outside of hidden H1 text or completely replacing the branded image headings? Can I put the heading image with alt tag inside H1 tags? lol will that work?
headings should be used to provide an outline for the page

  • ("Archives," "About," "Blog," etc)
    • ("January 2011," "Smith Blogging, LLC," "Masturbating With Cheese?", etc)
      • <h3> Article Segment Title ("Happy New Year!", "Professional Background", "Cheeses to avoid," etc)
    • ("February 2011," "John Smith," "iOS vs Android," etc)

etc.
(hopefully my shitty examples make sense)

Some people will use h1 for their logo/site name, which is also fine. The general rule of thumb is that each page will have only a single h1. And each new content-laden section will contain its own h_ that designates what the content is. Content with a h3 should a portion of the content from a h2 heading and so on. Heading-intensive content, like something you’d find in scientific journals, will go all the way to h6.

Yes, the content is relevant. I’m not trying to trick search engine bots or anything… just trying to make it easier to find the relevant content.

What options do I have outside of hidden H1 text or completely replacing the branded image headings? Can I put the heading image with alt tag inside H1 tags? lol will that work?

A common trick (note: I don’t do this because it strikes me as sloppy) is to simply do and then style the h1 along the lines of and add whatever height and width you require. Don’t forget that h1 tags have large margins and padding by default in most (all?) browsers, so you’ll probably also want to reset your margins and padding on it.

Hmmm, interesting, but yes pretty sloppy. :uggghhhh: I wish there were a better option, or better yet, if the site was designed with SEO remotely in mind in the first place. Maybe I’ll use @font-face to style the headings with real text but with a brand font (or one that looks close). Thoughts?

I know what heading tags are, FYI.

Use Expert mode and select "web only."

Also for the tl;dr on embedding fonts: EOT for Internet Explorer. SVG for Safari/iOS. WOFF for the new shit. and TTF for anything else.

(SVG has the largest file size so you’ll want to avoid it where possible for bandwidth reasons, EOT is the most secure but is MS proprietary, we all know what TTF is, and WOFF can be compressed making file sizes smaller, plus it is the end result of nearly two decades of bickering over how to use fonts in web content; seriously, this is one area where printed content kicks the shit out of web content. /rant)

WOFF is new but will eventually be used across all of the major browsers.

Yeah, that occurred to me after I posted that and read your response to toad. Your first post made it look to me like you were unsure about them.
This might actually work out really well because there is currently no style defined for H1 or H2. The agency must have designed the website like this so they could later sell us SEO
CSS up H1 class to look like normal text use H1 on relevant info.

GREAT idea too, but seems sketchy. Can anyone else comment on this? Legit?

If so, is there any way to style h1 so it doesn’t style the text inside of it at all?

-edit- I still think it could work to put the heading image w/ alt tag inside H1 tags like:

<h1><img src="heading.png" alt="what the heading says" title="what the heading says"></h1>

I do this from time to time

The method mr.cocks states of utilizing text-indent actually works rather well. You will have to set the overflow to prevent some issues in some browsers as well as adjust the element type, but all in all, should work well. I’ve also seen children span elements hidden within H1 elements to get the desired result.
I use the negative indent trick quite a lot. It’s never striken me as sloppy at all - in fact, it’s the best way of image replacement for text, as it’s all done within a single tag.

With regards to font embedding, it might be worth also looking at a javascript alternative such as cufon.js. I’ve been using font-face more often than not just lately, but it seems to have difficulty with multiple font weights on the same line in IE7 (in certain fonts, anyway).

Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2013 Tag ORDA - Webmaster Lab Suffusion theme by Sayontan Sinha