Töötan meie saiti ümber, et vähendada HTTP-päringuid ja blokeerida päringuid, ühendades JS-i, cs-sid, gzip-sid, laadides kõik JS-i LABjs-i kaudu ja kasutades CSS-spritte piltide jaoks, mis laaditi eraldi sildid enne.

Edusammud on siiani olnud suured - lehe laadimise jõudluse 5x paranemine. Kuid me oleme paljude sihitud märksõnade ja fraaside seas Google'i viie orgaanilise otsingu edetabelis. Kardan, et nii paljude alternatiivsete atribuutidega img-siltide kõrvaldamine võib meie SEO-le haiget teha.

Kas kellelgi on kogemusi alternatiivsete siltide manipuleerimise / eemaldamise ja SEO positsioonide mõju kohta? Kas eelmine auaste on "kleepuv"?

Üldiselt peaksite pildipritsmeid kasutama ainult mittetangentsiaalsete piltide, näiteks ikoonide jaoks. Sisuga seotud pildid peaksid jääma img-siltidena.

Seda öeldes ei pea te tõenäoliselt mõne märksõna kaotamise pärast liiga palju muretsema. Pealkirja sildi kasutamine on siiski juurdepääsetavuse hea mõte.

1: Alt-tekst on Google SEO jaoks vajalik, kuid ainult seetõttu, et Google'ile meeldivad veebisaidid, mis on mõeldud erinevat tüüpi brauserite ja kasutajate võimete jaoks, nt: ainult tekstibrauserid, keelatud javascript jne. oma orgaaniliste otsingutulemuste kohta tervikuna.

2: Märksõnade kasutamine alt-tekstis on ok, kuid ainult juhul, kui alt-teksti kasutatakse pildi täpseks kirjeldamiseks, sellest ka alt-teksti eesmärk. Teisisõnu, kui alt-teksti eesmärk pole märksõna tihedus. Nõuanne: kui teil on kvaliteetset, asjakohast ja originaalset sisu, ei peaks te isegi märksõnade tiheduse pärast muretsema.

3: Lehe kiirus on veel üks tegur Google'i algoritmis. Seda seetõttu, et kiirus soosib kasutajakogemust. CSS-spritid aitavad vähendada lehekiirust, vähendades http-päringuid. Paljud suuremad veebisaidid, sealhulgas Google, kasutavad neid.

Nagu öeldud, soovin, et saaksin pakkuda rohkem teavet, kuna olen siin ka seda otsimas.

uuendus:

lugege allolevat postitust, kuna sellel võib olla selle teema kohta rohkem teavet

Selle teemaga seotud uue postituse saamiseks klõpsake siin

Selle asemel, et kasutada alt atribuute ainult tekstibrauserite, ekraanilugejate, otsingumootorite jms asendusteksti pakkumiseks, võite lihtsalt lisada tavalise tekstisisese elemendi sisse, mida kasutate CSS sprite'i kuvamiseks, ja peita see CSS-iga.

Üks lihtsamaid viise seda teha on umbes selline:

.sprite { display: block; text-indent: -9999px; overflow: hidden; } 

Muud võimalikud lahendused hõlmavad teksti mähkimist a span sprite elemendi sees ja seejärel absoluutse positsioneerimise abil selle liigutamiseks väljaspool ekraani või seadistades selle läbipaistmatuse väärtuseks 0 või lihtsalt visibility: hidden.

Pidage meeles, et te ei tohiks ilmselt ühtegi neist tehnikatest üle kasutada: kui oluline osa teie sisust on CSS-iga peidetud, võivad otsingumootorid arvata, et proovite neid petta.

Samuti pidage meeles, et saate seadistada title atribuudid peaaegu kõigil HTML-elementidel ja enamik brausereid kuvavad neid hõljutavate tööriistavihjetena.

  • Oleksin selle suhtes väga ettevaatlik - pole kindel, kuidas Google'i robot seda näeks, kuna sisuliselt paigutaksite märksõnarikka sisu div-i ja peidaksite selle siis css-iga, võib seda hõlpsasti valesti tõlgendada kui märksõna täidist.

Sisu, märksõnade peitmine, eriti oma lehel, lihtsalt selleks, et Google'ile rohkem roomata märksõnu oleks, pole hea mõte, nagu Karonen soovitas. Te ei peaks proovima Google'i petma, peites oma sisus märksõnu. Kui edenemine läheb hästi, jätkake. Parandate oma saidi laadimisaega, mis on Google'i silmis pluss. Teie orgaaniliste edetabelite puhul tuleb mängu rohkem kui teie img-siltide atribuudid alt. Kui olete mures edetabelis allapoole liikumise pärast, siis töötage selle nimel, et saada veel paar asjakohane lingid, mis on jälgitavad

Lahendate selle, mõeldes oma võimalused ümber.

Määratletud ala loote a-ga koos display:block; või

ja kasutada overflow hidden; varjata ülevoolu ja position:relative;.

Siis asetate oma pilt on sisimas absoluutselt positsioneeritud, mis on võimalik, kuna seadsite vanema.

Seejärel kasutage :hover pildil asendi muutmiseks.

Nüüd põhineb teie sprite img-märgendil, nii et saate kasutada oma alt tekst.

Järgmine näide põhineb Facebooki spreidil, millel on kaks ikooni versiooni üksteise peal, kumbki 50x50x, pildi kogukõrgus 100px:

<!DOCTYPE html> <html> <head> <style> .icon { display:block; position:relative; width:50px; height:50px; border:1px solid red; overflow:hidden; } #fb { position:absolute; top:0; left:0; } #fb:hover { position:absolute; top:-50px; left:0; } </style> </head> <body> Facebook </body> </html> 

none: Charles Robertson | none