Microsoft Surface Keyboard Review - Hvad Apple burde have lavet (og derefter gjorde det i sidste uge)

Jeg arbejder på vores site for at reducere HTTP-anmodninger og blokere anmodninger ved at sammenkæde JS, css, gzipping, indlæse alle JS via LABjs og bruge CSS-sprites til billeder, der blev indlæst individuelt via tags før.

Fremskridt har været stor indtil videre - 5x forbedring af ydeevne. Vi er dog i top 5 af organisk søgning på Google for mange målrettede søgeord og sætninger. Jeg er bange for at fjerne så mange img-tags med alt-attributter kan skade vores SEO.

Har nogen nogen erfaring med alt tag manipulation / fjernelse og effekter på SEO positioner? Er tidligere rang "klæbrig"?

Generelt skal du kun bruge billedsprites til ikke-tangentielle billeder som ikoner. Billeder, der vedrører indholdet, skal forblive som img-tags.

Når det er sagt, behøver du sandsynligvis ikke bekymre dig for meget om at miste et par søgeord. Brug af et titelskilt er dog en god ide for tilgængelighed.

1: Alt-tekst er nødvendig for Google SEO, men kun fordi Google kan lide websteder, der er designet til forskellige typer browsere og brugeregenskaber, f.eks. Kun tekst-browsere, deaktiveret javascript osv., Når det er sagt, at have alt-tekst til billeder vil komplimentere dine organiske søgeresultater som helhed.

2: Brug af nøgleord i alt-tekst er ok, men kun hvis alt-teksten bruges til nøjagtigt at beskrive, hvad billedet handler om, deraf formålet med alt-tekst. Med andre ord, hvis formålet med alt-teksten ikke er for nøgleordstæthed. Tip: Hvis du har kvalitets, relevant og originalt indhold, skal du ikke engang skulle bekymre dig om søgeordstæthed.

3: Sidehastighed er en anden faktor i Googles algoritme. Dette skyldes, at hastighed favoriserer brugeroplevelse. CSS sprites hjælper med at reducere sidehastighed ved at reducere http-anmodninger. Mange større websteder, inklusive Google, bruger dem.

Når det er sagt, ville jeg ønske, at jeg kunne tilbyde mere info, da jeg også er på udkig efter det.

opdatering:

læs indlægget nedenfor, da det kan have mere info om dette emne

Klik her for et andet indlæg vedrørende dette emne

I stedet for at bruge alt attributter til at give erstatningstekst til kun tekstbrowsere, skærmlæsere, søgemaskiner osv., kan du bare placere almindeligt tekstindhold inde i det element, du bruger til at vise CSS sprite og skjule det med CSS.

En af de enkleste måder at gøre dette på er med noget som dette:

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

Andre mulige løsninger inkluderer indpakning af teksten i en span inde i sprite-elementet og derefter bruge absolut positionering til at flytte det uden for skærmområdet eller indstille dets opacitet til 0 eller bare ved hjælp af visibility: hidden.

Husk, at du sandsynligvis ikke bør overforbruge nogen af ​​disse teknikker: Hvis en betydelig del af dit indhold er skjult med CSS, kan søgemaskiner måske tro, at du prøver at narre dem.

Husk også, at du kan indstille title attributter på næsten ethvert HTML-element, og de fleste browsere viser dem som svæveværktøjstip.

  • Jeg skal være meget forsigtig med dette - ikke sikker på, hvordan en Google-bot ville se dette som, at du i det væsentlige placerer søgeordsrige indhold i en div og derefter skjuler det med css, det kan let fortolkes forkert som nøgleordstopning.

At skjule indhold, nøgleord især på din side bare for at give Google flere nøgleord til gennemgang, er ikke en god idé, som den anden person Karonen foreslog. Du bør ikke prøve at narre Google ved at skjule søgeord i dit indhold. Hvis fremskridtene går godt, skal du fortsætte. Du forbedrer indlæsningstiden på dit websted, der er et plus i Googles øjne. Mere spiller ind for dine organiske placeringer end alt-attributterne på dine img-tags. Hvis du er bekymret for at flytte ned på placeringen, skal du arbejde på at få et par mere relevant backlinks, der er dofollow

Du løser dette ved at genoverveje dine muligheder.

Du opretter et defineret område med en med display:block; eller

og brug overflow hidden; at skjule overløb og position:relative;.

Så placerer du din image sprite inde absolut placeret, hvilket er muligt, da du placerede forælderen.

Brug derefter :hover på billedet for at ændre position.

Nu er din sprite baseret på et img-tag, så du kan bruge din alt tekst.

Følgende eksempel er baseret på en Facebook-sprite med to versioner af ikonet oven på hinanden, hver på 50 x 50 pixels, hvor billedets samlede højde er 100 pixels:

<!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> 

arbejdet for dig: Charles Robertson | Ønsker du at kontakte os?