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