av ·0 kommentarer

I denna del av inlägget kommer jag att hänvisa till en mycket användbar och bra webb-referenssida hos learn.shayhowe.com som i detalj går igenom viktiga saker värda att ha koll på för HTML(5) semantik.

När vi pratar blockelement och en webbsidas struktur så kom HTML5’s kod-standard med en del nya tillskott som ni redan fått se som hastigast i tidigare inlägg, men som kanske inte diskuterats i detalj med fokus på deras semantiska sida.

Varför nya element med HTML5?

Utvecklarna av den nya HTML5 standarden gjorde som sagt undersökningar för att ta reda på vilka som var de vanligaste klasserna och ID som användes för strukturella element som t  ex. <div> på webbsidor över hela internet. Detta ledde till att man hittade ett antal klasser och ID som återkom oftare än andra, och man beslutade därför att förenkla genom att skapa nya element för dessa typer av blockelement så att man slipper ständigt ange samma klasser och ID för massa olika webbsidor.

Då skapades:

  • <header></header> som ersättare till <div id="header"></div> t ex. för sidhuvud
  • <footer></footer> som ersättare till <div id="footer"></div> för sidfot
  • <aside></aside> som ersättare till <div id="aside"></div> (sidebar/sidospalt)
  • <article></article> som ersättare till <div id="article"></div>
  • <section></section> som ersättare till <div></div> eller <div id="section"></div> eller <div class="section"></div> (sektionsavdelare)
  • <nav></nav> som ersättare till <div id="nav"></div> (navigations område)

De nya elementen (tycker jag iaf.) är betydligt mer utvecklar-vänliga och sparar en hel del tid, såväl som förser webbdokument i allmänhet med en bättre arsenal av strukturella element. De förmedlar också på ett bättre sätt för både utvecklare, såväl som indexeringsrobotar vad elementet är till för på webbsidan (indexeringsrobotarna kunde inte läsa och förstå ID och klass attribut, däremot kan de läsa och ”förstå” taggnamn).

Därför säger jag att vi får nu ta vara på att vi äntligen fått bättre semantiskt bestyckade element att märka upp våra webbsidor med, dissa <div> taggar och extra- nu överflödiga: ID och klasser, som inte längre behövs nu när vi har våra nya element 😉

Översikt av de nya HTML5-elementen

HTML5Doctor är en bra referenssida om ni vill ha en översikt av de nya taggarna och ni kan även besöka deras HTML5-Element Index för uppsökande av specifika, eller generell översikt av samtliga nya taggar – de står listade i bokstavsordning.

Uppgradera er utdaterade element-arsenal med nya fräscha semantiska HTML5-element!

Läs gärna på lite på HTML5-Element indexet som HTML5Doctor erbjuder och fyll på ert HTML-taggs förråd med de senaste nya taggarna och börja använda de så ofta ni får möjligheten för bättre semantisk och sökmotoroptimerings anpassad HTML5-kodning.

Det finns alldeles för många nya tillskott för att hinna gå igenom i detta inlägg, dock kommer jag som jag nämnde ovan hänvisa till några väldigt användbara punkter som jag själv haft stor användning för som learn.shayhowe.com HTML5-semantics hjälpte till att förtydliga för mig.

Tips: Då HTML5 fortfarande är relativt nytt och saknar stöd i vissa webbläsare, kolla vad som funkar vart

Ett tips också innan jag går igenom det så kan jag rekommendera er att kolla upp webbläsarstöd för de nya HTML5-element ni tänker använda via antingen CanIUse.com eller QuirksMode.org Browser Compatibility Tables då vissa av de nya HTML5-elementen är bättre implementerade i somliga webbläsarna än andra!

Och nu för att gå vidare och kolla på textspecifika semantiska inline-element som kan vara användbart att känna till:

Förklaring och uppvisning av semantiska skillnader i HTML5-element

Två alternativ för att få fetstil på sin webbsidas text, med olika semantiska betydelser!

De två HTML(5)-element vi har att jobba med är <strong> & <b>. Dock skiljer dessa sig åt ganska mycket i mån av semantisk betydelse.

<strong> används för att markera ”Stark viktighet” / ”Strong Importance” på engelska. Medan <b> istället används för att avse en ”stilistisk fetstil” utan direkt innebörd.

Nedan kan ni se citat från hur learn.shayhowe.com förklarar detta i kod:

<!-- Strong importance -->
<strong>Caution:</strong> Falling rocks.

<!-- Stylistically offset -->
This recipe calls for <b>bacon</b> and <b>baconnaise</b>.

Två sätt för att få kursiverad text på sin webbsida, med olika semantiska betydelser!

De två HTML(5)-element vi har att jobba med för detta är istället <em> & <i>. Dessa skiljer sig på liknande sätt som ovan två valsalternativ för fetstils text-märkning.

<em> används för att markera något av ”stressad vikt/betydelse” / ”Stressed Importance” på engelska. Medan <i> hellre avser att markera en annorlunda/alternativ ”röst/ton” och används mer i dialog-sammanhang & talspråk för innehåll.

Nedan kan ni se citat från hur learn.shayhowe.com förklarade detta i kod:

<!-- Stressed emphasis -->
I <em>love</em> Chicago!

<!-- Alternative voice or tone -->
The name <i>Shay</i> means a gift.

För att läsa på mer om olika semantiska skillnader mellan liknande funktionella HTML(5)-taggar så kolla gärna vidare på learn.shayhowe.com’s genomgång av HTML5-semantik då den artikeln även går igenom saker som: Understrykning av text, Genomstrykning av text, Upplysning/Highlightning av text, Förkortnings markering i text, Upphöjning (superscript) av text och Nedsänkning (subscript) av text – t ex. nedsänkning vid representation av H2O hade blivit: H2O, medan en upphöjning istället t ex. vid användning av kvadratmeter (m2) hade kunnat se ut som: m2. Sedan går artikeln även igenom saker som: Framstegsmätare (progress-meter), semantisk uppmärkning av tid & datum, hur man presenterar kod på webben, såväl som linje- och ord-brytningar (<wbr> & <br>), Citering, m.m.

Genomgång av Semantisk märkning av textinnehåll med <h1>-rubriker och <p>-paragrafer för textstycken:

När man skriver texter så är ovan visade genomgångar av kursivering och fetstil väldigt användbara och viktiga, men det är även simplare och mer direkt semantisk uppmärkning som Rubriker (via <h1>, <h2>, <h3>, osv.), såväl som paragrafer/textstycken (<p>), sektions-avdelare/skiljestreck (<hr />) för att distinkt markera brytstället där en del av sidan övergår till en helt annan del av sidan, m.fl. andra.

Dock så tänkte jag bara snabbt gå igenom vikten av Rubriktexter och deras innehåll då även detta är en Väldigt viktig del inom On-page sökmotoroptimering!

Den ”första” rubriktexten tillgänglig är <h1> och är då den som är av störst vikt och sedan dalar viktigheten för resterande rubriktexter tillgängliga för varje steg man går – notera dock! att <h2> t ex. är en typ av underrubrik till <h1> och bör användas som sådan!

Ett praktiskt exempel – skulle ni ha en <h1> rubrik för er logotype om ni valt att köra den ”textbaserad” som jag själv brukar göra då detta är lättare att sökmotoroptimera jämfört med en bild som praktiskt taget inte går att indexera för sökmotor-bottarna så skulle <h2>-taggarna kunna användas för sid-innehållets första rubriker då de är underrubriker till sidan – men detta är lite av en tolkningsfråga och är helt upp till er hur ni väljer att tolka sidans struktur – tänk bara på att den struktur ni väljer att köra sidan utefter – är även den struktur indexeringsrobotarna kommer att uppfatta!

Men jag skulle nog annars vilja påstå att <h1>-taggen och dessa rubriktexts-elementen kommer någonstans efter <title>-taggen i vikt när det gäller On-page sökmotoroptimering!

av ·0 kommentarer

Sökmotoroptimering även känt som SEO för Search Engine Optimization på engelska, är ett idag väldigt omtalat och populärt ämne att ha koll på när man jobbar med webbplatser och webbinnehåll.

Därför tänkte jag gå igenom den del av sökmotoroptimering som är deklarerad: ”On-page”, då den äger rum på själva webbsidan, den resterande delen av sökmotoroptimering består mycket av att utbyta länkar på nätet och marknadsföra sin sida på bransch-relaterade utanförstående webbplatser – desto fler(/mer ”exposure” (engelska för exponering)), desto bättre. Detta kallas då istället för: ”Off-page” SEO.

Sökmotoroptimering är bra att känna till för att veta vad som spelar roll för indexeringen av webbsidor som sökmotorer på nätet regelbundet gör, och även för att veta hur man kan skräddarsy innehåll för att sikta in exakt vad ens innehåll handlar om- och förmedla det vidare till sökmotorer.

Kommer mest fokusera på Google som sökmotor i dessa inläggen då, lets face it- Google är den populäraste på långa vägar 🙂

På grund av detta kommer jag även här informera om hur ni kan lägga till er egen webbsida till Google’s indexerings-kö för sidor som ska bli indexerade (vet inte om det snabbar upp processen när man publicerat sin sida, men kan vara värt ett försök iaf. :))

Kommer att skriva om Google’s egna ”guidelines” för vad som gäller när det kommer till meta data taggar och deras innehåll som indexeras, längder för t ex. TITLE-text för optimal sökmotoroptimering, m.m. Jag hoppas- och tror ni kommer tycka det är användbar och intressant läsning – men å andra sidan, det är väl alltid målet egentligen 😉

Enjoy:

Översikt av inläggsstruktur och planering

Del 0: Inledning och allmän introduktion till sökmotoroptimering

Kolla lite på hur sökmotorerna rankar saker och ting som går att använda för att höja sökmotorindexerings statusen för er webbsida. Nyckelords-research, såväl som domännamns val tas upp och gås igenom.

Del 1: <title> taggen och dess syfte/funktion och hur man kan skriva för främsta sökmotoroptimerings resultat!

Jag tänkte gå igenom delarna i en ”Top-to-Bottom-Approach” (uppifrån-ned) i mån av hur man skapar en webbsida via HTML-kodning. Vilket innebär att jag först kommer att gå igenom <title>-taggen och dess innehåll och därefter tänkte jag demonstrera exakt vilken typ av effekt detta sedan får i en sökmotorjätte som Google. Här ges även rekommendationer för att skriva bra <title> texter.

Del 2: Meta-data taggar för sökmotoroptimering och indexering (keywords, description & robots)

Därefter kommer jag att gå vidare till meta-taggar som en del av detta kapitel om on-page sökmotoroptimering, där alla tre av de vanligaste taggarna (som jag känner till) kommer att gås igenom, nämligen: meta-keywords, meta-description, samt meta-robots. Demonstrerar även hur Google hanterar och använder meta-description på sina sökresultat sidor, såväl som ger lite bakgrund till meta-keywords taggen och varför den i stort sett slopats helt nuförtiden för on-page sökmotoroptimering.

Del 3: <img> taggens ”alt”-attribut och dess funktioner/syfte för on-page sökmotoroptimering såväl som annat

Därefter kommer vi att täcka lite snabbt en liten del av on-page sökmotoroptimeringen som jag tror många inte känner till, eller bara ignorerar då de kanske ännu inte riktigt förstår eller har blivit informerade om bakomliggande syfte/vikt för denna del av sökmotoroptimering- nämligen: bildtaggens (<img>) ”alt”-attribut. Som inte bara är till för on-page sökmotoroptimering, utan främst finns till för utifall en bild skulle misslyckas att laddas, eller som understöd för blinda individers webbupplevelse via talsyntes då utan detta, en bild är ganska intetsägande och i stort sett icke-existerande utan talsyntes understöd.

Del 4: HTML5-Semantiken och vikten av det/hur det kan bidra till on-page SEO

Därefter går vi vidare till HTML5-Semantiken och kommer gå igenom skillnader på liknande HTML5-element och vad man bör använda när och varför – baserat på hur sökmotorernas indexeringsrobotar indexerar din sida och vad dessa kan ”förstå” jämfört med oss själva och vad vi som människor kan ”förstå” av en webbsida. Indexeringsrobotarna kan t ex. inte som vi läsa en text och förstå känslorna, sammanhanget och det som ligger gömt ”mellan raderna” i texten såsom vi kan förstå det.

Del 5: Sist men inte minst- ”Content-Aware-Typing” – genomtänkt innehållsskrivande och varför det kan vara viktigt!

Sist men inte minst kommer jag nämna vikten av att skriva genomtänkt innehåll för en webbsida. Vad jag då menar med detta är t ex. hur ordvalet kan spela roll för on-page sökmotoroptimeringen såväl som vilka rubriker man väljer att ha på sidan. Dessa har nämligen på senare tid blivit alltmer viktigare för on-page sökmotorindexering då indexeringsrobotarna har börjat ignorera meta-keywords taggen, och istället lägger krut på själva innehållet som finns på sidan. Ordval och rubriker kan även hjälpa att sikta in sin sida till sökmotoroptimering för specifika termer – t ex. om somliga termer förekommer oftare än andra – får dessa termerna ”större vikt” sökmotormässigt i att representera sidans innehåll och syte. Något värt att känna till och ha i åtanke när man skriver sitt innehåll för webbplatsen 😉

Del 6: Extra tips för bra sökmotoroptimering innan du ens har skapat din sida

Som en extra bonus kommer jag även ge tips för hur du väljer bästa möjliga domännamn efter syftet som din webbsida skall fylla. Många må tro och tycka att ”korta är bäst” även om de är helt oförståeligt… Så är nödvändigtvis inte alltid fallet. Att försöka ”förenkla” företagsnamn och liknande för snabbare skrivtid i adressfältet i webbläsaren kan komma att straffa sig.

Kommer även nämna användbara och bra sökmotoroptimerings länkar för analys-verktyg, referenssidor, resurser, m.m. som kan vara bra att känna till om man vill lära sig mer inom området sökmotoroptimering.

 

Respektive delar kommer att bli dedikerade till varsitt inlägg som kommer publiceras här kort efter.

av ·0 kommentarer

Med HTML5 kom smarta och bra uppdateringar när det gäller s.k. ”semantisk markup” (läs mer om ordet semantik på: synonymer.se/semantik).

Vad detta då är och innebär, är att istället för att definiera ganska så ”intetsägande” element för att bygga upp sin webbsida, så har man nu möjligheten att bättre – inte bara för sig själv och andra utvecklare, men även för indexeringsrobotar (kommer förklaras mer i detalj i inlägg om sökmotoroptimering som kommer att skrivas inom kort) – att informera om vad taggen har för syfte på hemsidan, och vilken typ av innehåll den har hand om. Detta då sökmotor-indexeringsrobotarna inte kan på samma sätt som oss människor läsa och förstå kontexten/sammanhanget av en text. Däremot kan de läsa taggarna och få sig en bättre uppfattning om vad taggen gör/har för typ av innehåll – om dess ”taggnamn” har betydelse!

Därav ”Semantisk markup” – taggnamnen har en betydelse för mer specifikt vilken typ av innehåll de ska ta hand om.

Praktiskt exempel varför Semantisk markup framför vanlig markup

Ett mer praktiskt exempel på detta är att man förut oftast använde <div> taggar för att skapa behållare på en webbsida, men den var ganska intetsägande om själva innehållet den skulle hantera då det enda taggnamnet informerade om, var i stort sett ”division-element”.. Men med HTML5 så hade tydligen de som utvecklade den nya standarden gjort undersökningar för att se vilka ID och Klass-attribut som var mest använda på webbsidor på nätet för att se vilka nya typer av element som hade underlättat HTML-kodandet, såväl som gett taggnamnen en smartare innebörd och betydelse för indexeringsrobotarna- såväl som utvecklare.

Semantiskt tagg-tillskott med HTML5

Några av dessa ”semantiska taggar” som blev nya tillskott med HTML5 för att ersätta DIV som behållare i olika lägen var som följer: <header> för sidhuvud, <footer> för sidfot, <section> för sektioner/avdelningar på sidan, <article> för artiklar på webbsidor, <nav> för navigeringsdelar på en webbsida, <aside> för sidospalter, samt <figure> & <figcaption> för bildbehållare med möjlighet till undertexter (figcaption-elementet).