<h1> etwas transparent // display:none

Beitrag von **HennesVIII** » 23.09.2008, 17:59

Hallo Leute,

ich hatte bis jetzt ein schönes Logo für meine Seite, dort wurde im Vordergrund leicht transparent der Seitenname angezeigt.
Nun wollte ich das gerne als <h1> als Schrift vor der Bild setzen. Dazu müsste es nach wievor aber leicht transparent sein sonst sieht es nicht aus. Meint ihr Google straft sowas ab? Kann ja schließlich nicht die farben aus dem Bild bestimmen....

H.

von **Anzeige von ABAKUS** »

Beitrag von **luzie** » 23.09.2008, 18:23

sollte gehen.

Beitrag von **HennesVIII** » 23.09.2008, 19:54

Hmm gefällt mir alles nicht so doll.

Würde es lieber auf das Bild setzen damit mir das Logo niemand klaut

Allerdings hätte ich dann keinen H1-Tag auf der Seite....

Beitrag von **Mamphil** » 23.09.2008, 22:46

HennesVIII hat geschrieben:Würde es lieber auf das Bild setzen damit mir das Logo niemand klaut Allerdings hätte ich dann keinen H1-Tag auf der Seite....

Ich würde es dann so lösen:
HTML:

Code: Alles auswählen

<h1 id="logo"><span>Dein Seitentitel</span></h1>

CSS:

Code: Alles auswählen

h1#logo &#123;
    width&#58; 100px;
    height&#58; 200px;
    background-image&#58;src&#40;'logo.jpg'&#41;;
    overflow&#58; hidden;
&#125;
h1#logo span &#123;
    display&#58; none;
&#125;

Das Bild (welches den Text aus dem Span-Tag enthält!) wird angezeigt - der Text nicht.
In meinen Augen ist das weder Grey- noch Black-Hat SEO, andere sehen das vielleicht anders...

Mamphil

Beitrag von **HennesVIII** » 23.09.2008, 23:22

Hmm also ich glaube so macht es auch die Forensoftware phpBB3

Aber... ähm unsichtbares Text wird doch von Google geandet oder nicht? Und solche Tricks kapieren die doch direkt...

Beitrag von **t-rex** » 24.09.2008, 01:24

Machs doch so wie Google selber, mit seinem Logo auf der Ergebnisseite

HTML

Code: Alles auswählen

<h1><a title="Gehe zur Google Homepage" href="http&#58;//www.google.de/webhp?hl=de" id="logo">Google<img height="105" width="150" alt="" src="/images/nav_logo3.png"/></a></h1>

CSS

Code: Alles auswählen

#logo
display&#58;block;
height&#58;52px;
margin&#58;14px 0 7px;
overflow&#58;hidden;
position&#58;relative;
width&#58;150px;
&#125;

#logo img
border&#58;medium none;
left&#58;0;
position&#58;absolute;
top&#58;-26px;
&#125;

sonnige Grüsse
HaPe

Beitrag von **HennesVIII** » 24.09.2008, 01:31

t-rex hat geschrieben:Machs doch so wie Google selber, mit seinem Logo auf der Ergebnisseite

Hmm was genau daran ist das besondere?
Dass der Linktitel in <h1></h1> steht meinst Du doch, oder?

Bringt das denn was?

Beitrag von **t-rex** » 24.09.2008, 02:00

Er steht in H1 und ist NICHT sichtbar. Dafür wird aber NUR das Logo angezeigt und der Titel steht doch im Klartext da. Also genau das, was du erreichen möchtest.

Der Titel ist zwar nicht transparent, aber dafür müsste das Logo nicht geändert werden.

Ich persönlich würde die von Google verwendete Lösung, der Lösung mit transparenter Schrift vorziehen. Denn die Lösung von Google ist einfacher umzustezen und wurde schon ein bisschen mehr als 1000 mal in den verschiedenen Browsern getestet. Während bei der transparenten Lösung 3 verschiedene Attribute gesetzt werden müssen, damit es in den gängisten Browsern funktioniert.

Zudem bin ich der Meinung, dass es auch weniger gefrimmel ist.

Google Lösung:
- HTML umbauen
- CSS einbauen
- Fertig

Transparente Lösung:
- HTML umbauen
- CSS einbauen
- Image ändern
- Die gängigen Browser durchgehen
- Nachbessern
- Funktioniert nicht überall zu 100%

sonnige Grüsse
HaPe

Beitrag von **HennesVIII** » 24.09.2008, 02:12

Ist auf jeden Fall ein sehr geiler Hinweis! Ich denke ich werde es so machen.

Habe noch einen Vorteil gefunden: Der Linktext kann etwas mehr an SuMas angepasst werden und man hat trotzdem keine verdutzten User. Denke mal nicht, dass ein Tooltip viele Fragen aufwirft.

Beitrag von **Margin** » 24.09.2008, 09:12

Habe noch einen Vorteil gefunden: Der Linktext kann etwas mehr an SuMas angepasst werden und man hat trotzdem keine verdutzten User ...

Genau an dem Punkt wird's kritisch.
Die Methode ansich ist genau so lange sauber, wie im Text das gleiche steht, wie auf der Grafik.

Beitrag von **Mork vom Ork** » 24.09.2008, 09:31

HennesVIII hat geschrieben:
<h1 id="logo"><span>Dein Seitentitel</span></h1>
h1#logo span {
display: none;
}
Aber... ähm unsichtbarer Text wird doch von Google geahndet, oder nicht?

Wenn dem so wäre, würde meine Seite längst nicht mehr auf Platz 1 erscheinen. Ich habe die Grafik, die den Titeltext enthält, allerdings als solche eingesetzt, nicht als Hintergrund:

<h1><img src="titel.png" alt=""><span>Dein Seitentitel</span></h1>

Dazu wie oben beschrieben:

h1 span {
display: none;
}

Funktioniert einwandfrei und bedarf vor allen Dingen nur eines allgemeinen CSS-Attributs, nicht eines Dutzends, teils speziell auf diese Grafik zugeschnittener.

Hintergrund der Aktion ist bei mir nicht SEO, sondern die Möglichkeit, die etwas platzfressende Grafik auf Geräten mit kleinen Bildschirmen mittels CSS ausblenden und stattdessen den Text als solchen anzeigen zu können. Andernfalls hätte ich den Titel in das alt-Attribut gesetzt, dafür ist es schließlich da:

<h1><img src="titel.png" alt="Meine tolle Seite"></h1>

Beitrag von **HennesVIII** » 24.09.2008, 13:58

Margin hat geschrieben:
Habe noch einen Vorteil gefunden: Der Linktext kann etwas mehr an SuMas angepasst werden und man hat trotzdem keine verdutzten User ...
Genau an dem Punkt wird's kritisch.
Die Methode ansich ist genau so lange sauber, wie im Text das gleiche steht, wie auf der Grafik.

Sprich mich verpetzt sonst jemand oder wie darf ich das verstehen?