EPiServer-mallar som validerar och älskas av sökmotorer

EPiServer-mallar som validerar
och älskas av sökmotorer
-Utan ASP.NET Forms & View State
Jonas Skoogh
Marcus Leidner
Sökmotoroptimering – varför då?
• Sökmotorer är det absolut vanligaste sättet att
hitta till en webbplats
Sökmotorer
– så här tycker användarna
• Anledningar till varför man klickar på ett
sökresultat:
–
–
–
–
43%
32%
17%
8%
Det dyker upp på första sidan
Beskrivningen matchar det jag söker
Det är ett av toppresultaten på första sidan
Varumärket är erkänt
Hur genomsöker sökroboten
webbplatsen?
• Sökmotorrobotar följer HTML länkar
– Roboten börjar på webbplatsens startsida
• Tekniska barriärer på webbplatsen påverkar
”crawling” och indexering negativt
– Sökmotorn klarar inte att navigera fram till det
aktuella innehållet
– Sökmotorn klarar att navigera men gillar inte det
den finner och ger låg ”score”
Google säger…
• ”Om funktioner som JavaScript, cookies,
sessions-ID:n, ramar, DHTML eller Flash
hindrar dig från att se hela din webbplats i en
textwebbläsare kan också sökrobotar ha
problem när de genomsöker din webbplats.”
HTML
• Standarder
• CSS
– Ingen inline
– Använd klasser eller IDn
• Gränsnittsprototyper gjorda av specialister
Hur ser html koden ut
•
•
•
•
Rätt struktur
Validerar!
Modulbaserat
Unobtrusive javascript, progressive
enhancement
• Inga tomma taggar
• Innehåll i text. Prova att stänga av bilder, css
och se hur resultatet ser ut.
Formulär
• Flera formulär inte ETT stort
• <label> för alla fält
• Fältnamn som validerar
Tabeller
• Endast för data
– Rubrikceller
– Dataceller
– thead och tbody
– Summary
Bilder
• Alltid ALT-attribut
– Synskadades Riksförbund ”Beskriv bilden”
– Vägledningarna föreskriver tomt ALT-attribut
Kontrollmetoder
•
•
•
•
Tillägg i Firefox t.ex. HTML Validator
http://validator.w3.org/
Inspectorn http://inspector.netrelations.se
24 timmars vägledningen - eutveckling.se
EPiServer
• Föra över prototyper till EPiServer
• Vanliga kontroller fungerar inte.
– <asp:button... <asp:link.. <asp:textbox... Osv
• PlaceHolder i stället för Panel
• Använder man runat="server" kan saker
renderas ut olika baserat på vad .NET
Framework tycker din user-agent har stöd för
ViewState
• WebForms ger programmeringsmässiga
fördelar, men bryter mot principer om hur
webben fungerar
• Verkar vara avsett att vara så likt WinForms
som möjligt
• ViewState kan bli groteskt stora
• Har ofta ickevaliderande kod i sig.
Warning: <input> ID "__EVENTTARGET" uses
XML ID syntax
I stället för viewstate
• Hantera inkommande formulärvärden själv
– Request.Form*”x”+
– Validera data själv
• Efterfråga officiellt ASP.NET MVC-stöd från
EPiServer
Säkra HTML-kvaliteten
• Validera igen!
• Filter
– EPiServer editorn SavingPage & CreatingPage
– Till besökaren PageFilter
Egna kontroller
• Full kontroll över funktion och rendering
• Du kan behöva uppfinna hjulet igen
Egna webbkontroller
ger tydligare IDn och inte
• ctl00_ContentPlaceHolderTodo_
ContentPlaceHolderErrorPages_
ContentPlaceHolderAllColumns_
ContentPlaceHolderMainContent_
MainContentParts_
RepeaterMainContentPartRenderer_ctl00_
MainContentPartRenderer_ctl00_HyperLinkIm
age
Exempel på egen kontroll
<code>
EPiServers egna formlär
• <table> ....
• Gör om, gör rätt!
Träffarna i Google
• Ge möjlighet att ha unik <title> på sidor
• Fyll meta description med relevant innehåll
Ex: <meta name="DC.Description" content="...” />
(Obs! ”DC.” är Dublin Core Metadata Initiative)
• Endast små bokstäver i urler
Ge redaktören rätt verktyg
• Ge redaktören möjligheterna att göra sidan SEO
anpassad.
Nyckelord i rubriker
Unika title-tags per sida
Hur ser det ut på sökresultatsidan?
Unika title-tags per sida
Bruk av nyckelord i url:er
Bruk av nyckelord i text
Sidmallar
• Se till att det finns en H1 på samtliga sidtyper
– Olika hantering av H1 på startsida repsektive
andra sidtyper
• Minimera antalet sidmallar
Utbilda redaktörerna
• Inga tabeller för layout
• Använd rubriker
• Undvik bilder som ensam informationsbärare
Verktyget ska hjälpa redaktören att
uppfylla följande
Kriterium
Viktighet
Användning av nyckelord/fraser i Title Tag
Den enskilda sidans interna länkpopularitet
Användning av nyckelord i text
Duplicerat innehåll har negativ effekt
Inkommande länkar från tematiskt lika, auktoritära sajter
Användning av nyckelord i H1/H2/H..taggar
Unika TitleTags/Descriptions per sida
Kvantitet av relevant text
Användning av nyckelord i domännamn eller URL
Användning av nyckelord i Alt tags (bildbeskrivning)
Uppdateringsfrekvens och dess omfång
Användning av nyckelord i Descriptions
4.9
4.1
3.7
3.6
3.5
3.4
3.3
3.2
3.0
2.5
2.4
2.1
Sammanfattning
• Gränssnittsarbetet är en viktig del av
reslutatet. Förstör det inte!
• Validera under hela arbetet
• Kolla att allt fungerar utan css, bilder och
javascript (Fx Add-on)
• Backa i utvecklingen tänk mer ASP
Frågor