Autor Zpráva
Jirin
Profil
Zdravím,
pracuji na hodnotícím webu. A samozřejmě hodnocení zobrazují hvězdičky, ty zobrazuji přes spany "obarvené css". No a chci vyjít samozřejmě vstříc i lidem, co nemají povolené styly, tak aby se jim zorazili taky ta informace. Je to samozřejmě to nejdůležitější na webu, jaké je hodnocení, a tak dávám dolu textovou informaci, kterou pak skryji v css. A teď mě zajímá, jak je to z pohledu SEO, je to black hat či nikoli? Úmysl je vyjít vstříc lidem se zakázaným css, ale pokud přihlédnu k tomu, že takových hodnocení tam může být klidně padesát na jedné stránce, aby nebylo podezřelé mít relativně dost skrytého textu. Napadá někoho lepší řešení?

Html-kód:
<
<div class="rating">
  <span class="rating-star">
  </span>
  <span class="rating-star">
  </span>
  <span class="rating-star">
  </span>
  <span class="rating-empty">
  </span>
  <span class="rating-empty">
  </span>
  <i class="visuallyhidden">Hodnocení: 3 z 5</i>
</div>   

Používám třidu pro skrytí:
.visuallyhidden {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
}
juriad
Profil
Já to nepovažuji za zakázané, naopak. Je to jen alternativa, která poskytuje stejnou informaci.
Proč neskryješ ten text normálně?
.visuallyhidden {
  display: none;
}
Jirin
Profil
Kdyby to tam bylo párkrát tak budiž, ale přeci jen když to buden a stránce klidně i padesátkrát a ještě by mohli usoudit, že to "Hodnocení" v tom popisku, může být jako optimalizace na slovo hodnocení, tak by mě klidně mohli sestřelit, ale když tam dám jen bez uvedení "3 z 5" tak to není zrovna pochopitelné. Samozřejmě já bych takový web nebanoval taky by to přišlo vhodnější, ale ne každý má stejné uvažovaní. Na tohle by byl ideální nějaký tag <noindex>...

Jo display: none bych mohl taky, ale někde jsem vyčetl, že je to takhle lepší schovat, ač už nevím proč:-)
Plaváček
Profil
Jirin:

Hvězdičky jsou obrázek, který lze doplnit patřičným ALTem. Proč je máš jako pozadí v CSS, když nesou dost podstatnou informaci?
Jirin
Profil
Chci ušetřit co možná nejvíce http požadavků, takhle ušetřím tři (plná hvězdička, poloviční a celá). mohu takhle snadno dát url přes data/image uri (samozřejmě to jde i u img src, ale tam neudělám bezrpoblémový fallback na staré ie, jako u css)
Plaváček
Profil
Jirin:

Když tedy budu mít vypnuté CSS, nebudu moci hlasovat?
Jirin
Profil
Tady mluvím pouze o výpisu odhlasovaných, zkrátka "hlasovalo pět lidí a dohromady jsou čtyři hlasy z pěti". U hlasování samotného mám klasický formulář radio buttony překrytý "obrázkovým hlasováním".
joe
Profil
Jirin:
Občas si říkám, proč lidi dělaj věci složitě, když jdou napsat daleko jednodušeji.

<div class="rating">
  <span class="rating-star" width="..."></span>
  <i class="visuallyhidden">Hodnocení: 3 z 5</i>
</div>   

Potom element .rating bude mít na pozadí prázdné opakující se hvězdičky a .rating-star bude mít plné opakující se hvězdičky. Pak se ani nemusíš omezovat na celé půlky, ale můžeš zobrazit skutečnou hodnotu hlasování.

Otázkou ale je, proč když už zobrazuješ hvězdičky, na ně rovnou neumožňuješ kliknout? To mi přijde uživatelsky nepřívětivé.

juriad:
Proč neskryješ ten text normálně?
.visuallyhidden {  display: none;}.visuallyhidden {
display: none;
}

Protože tento "trik" skrývání se používá(l) pro hendikepované uživatele. Zda to platí ještě dnes, nevím, nezkoumal jsem. Ale také to tak používám, jako i například Seznam, kde definují třídu blind.
Jirin
Profil
joe:
ty jo, to mě nenapadlo, opravdu geniální. díky!

byl bych ještě rád, pokud by se někdo vyjádřil k tomu problému s vyhledávači. co jsem četl jejich nápovědy, tak to skoro zní, že nesmí být žádný skrytý text. v praxi se to sice používá na iamge replacement a asi je to akceptováno (sám taky používám), nicméně je to pár obrázků na stránce, tak nevím, jak se k tomu bude tvářit v případě, že jich je násobně více.
joe
Profil
Jirin:
Žádný problém v tom nevidím.

Aby to nebyl vyloženě jen skrytý text, můžeš ještě doplnit funkčnost pomocí JS (jQuery):

$(".rating").each(function () {
var element = $(this);
element.attr("title", element.find(".visuallyhidden").text());
});
Jirin
Profil
V title atributu už to mám dáno automaticky rovnou

Vaše odpověď

Mohlo by se hodit

Zajímavé čtení:
Poptávání výměny odkazů je na této diskusi nežádoucí.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: