2

I am in front of a tricky problem. I have a h1-Tag with a company name. Right before an Image which represents the logo of that company and looks similar to the first letter of the organizations name.

<img src="logo.png" alt="O" /><h1>Organization</h1>

The ALT here is not "O" - I just use it to represent that it looks like an "O".

now with

img, h1 {float:left}

I let em float together and here starts the problem. I want that the image replaces the first letter of the h1-Tag, but I still want to keep the full organization name in the h1-tag for a useful SEO.

Replacing the first letter via CSS is no useful way, since I need the img-Tag seperate so I can use it for that new schema.org marking.

Kris
  • 567
  • 3
  • 11
  • 25
  • can you wrap the first letter in `span` and hide it? – Jmh2013 Aug 11 '14 at 17:30
  • I think I could - the question is what the crawler will say when I use a display:none inside an h1 tag and SEO effects are more important as removing the first letter – Kris Aug 11 '14 at 17:44
  • Why do you expect to need the `img` element so that you can “use it for that new schema.org marking”? – Jukka K. Korpela Aug 11 '14 at 17:55
  • How else could I use itemprop="logo" ? – Kris Aug 11 '14 at 18:11
  • Remove the 0 from your markup and when you implement schema.org just use This is a perfectly appropriate case for using the meta tag and has no adverse effect. Or remove the first letter with jQuery after the page loads. – davidcondrey Sep 27 '14 at 06:46

4 Answers4

9

You could use ::first-letter and ::after pseudo-classes, and It will be still SEO friendly

Example using pseudo-classes

h1::first-letter {
  color: transparent;    
}
mallendeo
  • 1,507
  • 1
  • 9
  • 13
  • 1
    yea figured that already out - but forgot to keep it up for all the other people who might look it up. Thanks for suggesting it anyways ! – Kris Sep 28 '14 at 11:59
1

you can have the 'O' in a separate span inside the h1 and make the opacity of that span to zero (also a negative-margin to hide it behind the image)

I dont know if it would be SEO friendly or not.

gaurav5430
  • 12,934
  • 6
  • 54
  • 111
  • Well yea that would work - was also suggested in as a comment on my question above. Besides that I am not sure if the cralwer likes that idea and if some SEO specialist here know if it's fine ... I could :) – Kris Aug 11 '14 at 17:46
0

Just put the company name in the alt tag and remove the letter in the h1. For SEO purposes, and I might be wrong, I'm pretty sure that the alt tag is more useful for the spiders than just having body text. Putting it in the alt should mean the company's name will still be picked up, and you won't have to come up with an unnecessarily complex workaround.

ETStudios
  • 1
  • 2
  • You are talking about the alt-tag from the img-tag right ? Like Organization

    Organization

    ... right ? Or are you talking about a mysterious alt-tag in a h1-tag, ... which would be new to me     – Kris Aug 11 '14 at 17:34
  • Any tag can have an alt tag. Honestly, if it were me, I'd wrap the whole thing in a span or div and give that the alt, if I didn't just make the whole thing one solid logo and put it in an img, but for the purposes of what you've currently got, I'd say that it would work best in the image, since your h1 will already have text, and doubling down on it would be redundant. – ETStudios Aug 11 '14 at 17:38
  • well then it should be the best to get rid of the h1-tag at all ... otherwise the spider will crawl

    rganization

    - and I truly don't want to let the bot consider "rganization" as a kind of headline on my page     – Kris Aug 11 '14 at 17:41
  • That's true enough. You could feasibly just put it in the meta data, I believe, though I admit I don't know as much about that as it relates to the spiders and SEO. Like I said, if it were me, I'd likely just make it one cohesive .png image, rather than mixing images and text elements that could go awry once it hits the user. – ETStudios Aug 11 '14 at 17:49
  • @ETStudios: Only `a` and `area` elements can have an `alt` attribute. – unor Aug 13 '14 at 00:17
  • @unor And img, div, span, and input elements, to name a few more. img elements are the most important ones to have with an alt. Any element, as far as I'm aware, can take the attribute; it just becomes a matter of redundancy, so we don't do it on text elements, but that doesn't mean they can't have the tag. – ETStudios Aug 13 '14 at 02:08
  • @ETStudios: No, that is not correct. In HTML5, *only* the elements `a`, `area` and `input` (if it’s used for images, which I forgot to mention above) can have an `alt` attribute. Using `alt` on other elements is an error as it’s not defined for them. You can easily [check for yourself which attributes are allowed](http://stackoverflow.com/a/14851121/1591669). – unor Aug 13 '14 at 09:55
  • @unor So it would seem. Apparently I need to take some time to look into the other differences between 4 and 5. – ETStudios Aug 13 '14 at 19:04
-1

There is no way to remove a letter with CSS. There are various tricks meant to hide a letter, but they are unreliable and tricky.

Using JavaScript, you could easily remove the first letter from an element’s content.

A simple pure-HTML approach is

<h1><img src="logo.png" alt="O">rganization</h1>

But it is quite possible that search engines will then treat “O” and “rganization” as two distinct strings.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390