CSS-kodning

[thatjeeves]

Hej.

Jag har en hemsida där jag gör navigeringsknappar med hjälp av <ul> och <li>. Varje enskild knapp är omsluten av <li> och </li>. I stilbladet lägger jag till border: outset thin på <li>. Jag har upptäckt att om jag lägger till margin: 0 auto; på <ul>, så kommer alla knappa få samma bredd, spannande horizontellt. Min <ul> är innesluten i en DIV-tag. Är detta SEO-vänligt? Låt mig visa hur min CSS-kod ser ut:

ul {
margin: 0 auto;
}

li {
border: outset thin;
padding: 20px;
width: 20px
list-style-type: none;
}

Jag har upptäckt att jag faktiskt inte behöver ange list-style-type: none. Den runda cirkeln som finns med "by default" försvinner automatiskt. Det jag frågar är: Är denna kodning SEO-vänlig?

[welander]

SEO har inte med stilmallarna att göra.

Google läser sidan om du visa källkod på din sida. det du ser där är det som google läser.
man kan aldrig göra CSS:en SEO vänlig, CSS styr hur ditt HTML dokument ser ut och det är detta dokumentet som man kan göra SEO vänligt

Men för att ge dig ett kort svar på din fråga: Ja, den är SEO vänlig.
Men ett annat tips, jag antar att inuti dina li-taggar har du en a tagg. sätt padding, width och border på a taggen istället för li taggen. då kommer träffytan bli mycket större vilket ökar UX avesvärt.

[AaronAxelsson]

Google läser sidan om du visa källkod på din sida. det du ser där är det som google läser.
man kan aldrig göra CSS:en SEO vänlig

Nja, det är inte helt sant. Google läser och tolkar absolut CSS-filer.
Däremot bryr de sig inte så mycket om exakt hur den ser ut och om man gjort "rätt" och så vidare, men de kollar till exempel på om man döljer element på sidan med hjälp av CSS och liknande saker. Så, visst, man kan kanske inte gör en CSS:en direkt SEO-vänlig, men man kan absolut göra den skadlig för SEO.

thatjeeves: Du behöver inte oroa dig för just det du tar upp dock. Det funkar.

[welander]

Nja, det är inte helt sant. Google läser och tolkar absolut CSS-filer.
Däremot bryr de sig inte så mycket om exakt hur den ser ut och om man gjort "rätt" och så vidare, men de kollar till exempel på om man döljer element på sidan med hjälp av CSS och liknande saker. Så, visst, man kan kanske inte gör en CSS:en direkt SEO-vänlig, men man kan absolut göra den skadlig för SEO.

Du får gärna visa information där motsatsen bevisas, jag hittade denna bloggpost. Där gör det ett test och lägger in ordet nostresynoxing i en div som är dold för mig, men den indexerades i google.

För att testa själv så finns det fortfarande live på Google.com, prova att googla ordet nostresynoxing så ser du att det är indexart på tomaltman.com och om du sedan kontrollerar källkoden på hans startsidan och gör en CTRL+F sökning efter samma ord så hittar du även det ordet där, men om du sedan gör samma sak på startsidan utan att se källkoden utan själva designen eller frontend delen så hittar du inte ordet.

Så min slutsats av det hela är att google läser av sidan som källkoden visar och inte som vi ser sidan.

[AaronAxelsson]

Alltså, de står inte mot varandra. Självklart läser de din källkod, de läser också din CSS.

Å andra sidan, diven finns inte cacheat hos Google i någon av varianterna:
http://webcache.googleusercontent.co...tomaltman.com/
http://webcache.googleusercontent.co...n.com/&strip=1
(utan CSS:en skulle de inte kunna göra den första cachen)

[Micke]

<div style="display:none">
	      	<div id="jim-proof">
	      	  <h3 class="title-like">Information about <a href="http://tomaltman.com/does-the-google-bot-index-css-hidden-divs" title="Does the Google Bot index css hidden divs?">Jim Mayhew</a>...</h3>
	      	  <p>I feel like Jim Mayhew is a full on <a href="http://tomaltman.com/does-the-google-bot-index-css-hidden-divs" title="Does the Google Bot index css hidden divs?">nostresynoxing</a>.  I cannot believe the times he has come to me and asked about these ideas.</p>
	      	</div>
	      </div>

Det han har gjort är inte under stilmallen, utan han har bara gömt en <div> med inline css. Nu vet jag inte, men hade du gömt divven med din.css så tror jag att det hade varit annorlunda, nu har jag inga faktiska bevis på detta. Bara en hypotes jag har.

/Micke

[welander]

Njae jag tror ni båda blandar ihop CSS och Javascript här..
CSS kan du inte manipulera DOM på samma sätt som du kan med Javascript, använder du javascript kan du ta bort en div helt och hållet på document.ready(); funktionen. CSS kan du enbart gömma, ändra färger m.m men du kan inte radera saker och ting.

kolla upp jQuerys .remove(); funktion, den plockar bort elementet som remove sätts på helt och hållet från dokumentet det gör inte display: none; visible: hidden; eller javascript funktionen .hide();
Dessa tre gömmer bara divarna för webbläsarna som renderar, men tar du bort CSS:en kommer denna synas om den ligger i en extern CSS fil.

@Aaron okej insåg nu att jag formulerade mig fel från första början. Det jag menade var att SEO mässigt spelar inte CSS:en någon roll men självklart kan de läsa CSS:en just för Cachen m.m men du kan inte utesluta ett ord från din sida med hjälp av CSS. (om du kollar källkoden på den sidan du länkade så ser du att diven syns i källkoden men nej den syns inte för webbläsaren eller för "ögat" så att säga.)
Det kan du däremot göra med javascript men då utesluter du ordet även för användarna, men då kan man ju lika gärna ta bort elementet själv för de kommer ändå aldrig synas.

Nu blev det lite offtopic här men kände att detta behövdes redas ut

[welander]

Sedan kan man ju ner på detaljnivå också.

Exempel gällande absolut positionering m.m. du kan ju lägga text i koden längst ner men få den att se ut som den ligger överst på själva sidan. men google läser ju fortfarande genom koden och ser att den texten lligger längst ner på sidan

[AaronAxelsson]

Men, nu har den här diskussionen gått ganska långt från var den började, men jag måste ändå svara här.

Jag har inte nånstans pratat om att ta bort saker eller utesluta ord, jag vet inte hur du kom fram till det.

Jag står fast vid att Google läser, tolkar och förstår CSS-filer, och att de därför spelar roll för din SEO. Det gör de för att du med hjälp av CSS kan dölja saker för dina användare, men visa dem för Google. Google gillar inte det, och du kan i värsta fall bli straffad för det.

[Urban G]

En liten utvikning har det blivit men intressant i alla fall. Och thatjeeves har fått svar på sin fråga att det angivna exemplet är SEO-vänligt.