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% Det dyker upp på första sidan
– 32% Beskrivningen matchar det jag söker
– 17% Det är ett av toppresultaten på första sidan
– 8% 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_HyperLinkImage
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 4.9 Den enskilda sidans interna länkpopularitet 4.1 Användning av nyckelord i text 3.7 Duplicerat innehåll har negativ effekt 3.6 Inkommande länkar från tematiskt lika, auktoritära sajter 3.5 Användning av nyckelord i H1/H2/H..taggar 3.4 Unika TitleTags/Descriptions per sida 3.3 Kvantitet av relevant text 3.2 Användning av nyckelord i domännamn eller URL 3.0 Användning av nyckelord i Alt tags (bildbeskrivning) 2.5 Uppdateringsfrekvens och dess omfång 2.4 Användning av nyckelord i Descriptions 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