av ·0 kommentarer

Tjenare, tänkte nu skriva ett väl genomgående inlägg som på ett översiktligt och informativt sätt går igenom HTML specialtecken som är populära att använda sig utav i HTML-kodning.

Varför specialtecken via HTML?

Varför ska man då kunna detta/varför kan det vara bra att känna till detta? Jo, specialtecken kan användas till mycket, t ex. att komplettera vid tillfällen då tangentbordets utbud av tecken inte längre räcker till för att presentera det du önskar, eller för att snitsa till dina listor med snyggare ikoner, eller allmänt bara strukturera dina texter på ett snyggare och mer utökat sätt.

Specialtecken kan vara bra till många saker, t ex. för oss svenskar så kan det ibland behövas att man för hand kodar in tecken som vissa teckenkodningar annars har svårt att tolka- som exempelvis våra svenska tecken: å, ä och ö. Där finns även tillfällen då man kommer behöva ”hårdkoda” in specialtecken som ampersand tecknet (&), eller man kanske vill ha fler mellanrum av någon anledning utöver vad webbläsaren tolkar från koden – då kan man t ex. hårdkoda in mellanrum som specialtecken för att webbläsaren verkligen ska tolka utöver vad den annars hade gjort.

Där finns som sagt många scenario då detta är användbart, men det är även kul att känna till och det låter en göra så mycket mer med ens webbsidor och sättet man formaterar texter och innehåll på!

I det här inlägget tänkte jag gå igenom samtliga tecken som jag själv finner användbara att ha översiktlig koll på.

Hur HTML specialtecken kodas

Där finns väldigt många specialtecken som kan kodas i HTML, och man kan koda de på olika sätt också, antingen med sifferkoder, eller med bokstavskoder.

De tecknen jag själv anser kan vara intressanta och användbara att känna till

De svenska tecknen å, ä, ö

å = å
Å = &Aring; <- notera stor första bokstav på Aring

ä = &auml;
Ä = &Auml; <- notera hur samma mönster gäller som för Stora Å

ö = &ouml;
Ö = &Ouml;

Horisontella/Vertikala streck – användbara som avskiljare och liknande

– : &ndash; (n:et står för EN så kanske är fast storlek på strecket alltid, ej säker dock)
— : &mdash; (lite längre än ndash, m:et står för EM så kan ha med font-size att göra hur stor detta strecket blir, ej helt säker)
― : &horbar; (horisontal bar)
∣ : &mid; (Vertikal avskiljare)
‖ : &Verbar; (Vertikalt dubbelstreck)

Typografiska specialtecken – ”hårdkodat mellanrum”, citationstecken, № (numero) tecken och ampersand (&) tecken

  - &nbsp; <- No-break space - användbart om man vill ha flera på varandra efterföljande mellanrum på en webbsida, måste "hårdkodas"
« - &laquo; <- förkortning står för "left pointing double angle quotation mark"
» - &raquo; <- förkortning samma som ovan fast omvänt
‹ - &lsaquo; <- förkortning står för "left pointing single angle quotation mark"
› - &rsaquo; <- förkortning samma som ovan fast omvänt
“ - &ldquo; <- "left double quotation mark"
” - &rdquo; <- samma som ovan fast omvänt
№ - &numero; <- nummer på italienska
& - &amp; <- förkortning står för "ampersand"

Valuta tecken för Euro (€), Yen (¥), Pund (£) och Cent (¢)

€ - &euro; <- väldigt simpelt kodade förkortningar, lätta att komma ihåg
¥ - &yen;
£ - &pound;
¢ - &cent;

Pilar (arrows) och indikator tecken (med och utan svans)

Singulära pilar:
← - &larr; <- leftwards single arrow
↑ - &uarr; <- upwards single arrow
→ - &rarr; <- right single arrow
↓ - &darr; <- downwards single arrow
↔ - &harr; <- horisontal single arrow (both right & left)
↕ - &varr; <- vertical single arrow - (both up down)
Pilar med "svans":
↢ - &larrtl; <- left single arrow with tail
↣ - &rarrtl; <- right single arrow with tail
⥈ - &harrcir; <- horisontal arrows through circle (looks badass ;) )

Punktlists tecken – Punkt, Cirkel, Diamant (svart/vit), Stjärna (svart/vit), Kvadrat och Trianglar

• - &bull; <- antar detta står som förkortning för "bulletpoint" vilket praktiskt taget betyder "punkt" på svenska
○ - &cir; <- vit cirkel
◯ - &bigcirc; <- stor vit cirkel
♦ - &diams; <- svart diamant
⋄ - &diam; // &diamond; <- vit diamant
⋆ - &sstarf; // &Star; <- stjärna
★ - &starf; <- svart stjärna (förkortning = star + filled (f:et står alltså för ifylld med färg))
☆ - &star; <- vit stjärna (förkortning = star Utan filled)
◼ - &FilledSmallSquare; <- Svart kvadrat
▸ - &rtrif; <- Höger-pekande svart triangel
▹ - &rtri; <- Höger-pekande vit triangel (ej ifylld)

Lagliga tecken – Copyright (©), Registered (®) samt TradeMark (™)

© - &copy; <- för copyright
® - &reg; <- för registered
™ - &trade; <- för trademark

Matematiska tecken

Jämförelse operatorer: Större än och mindre än tecken (även HTML-tagg tecknen)

< - &lt; <- förkortningen står för "lesser than" som på svenska blir "mindre än"
> - &gt; <- förkortningen står för "greater than" som på svenska blir "större än"

Större än eller lika med respektive mindre än eller lika med tecknen

≤ - &le; <- förkortningen står för "less than or equal to", som på svenska motsvarar "mindre än eller lika med"  
≥ - &ge; <- förkortningen står för "greater than or equal to", som på svenska motsvarar "större än eller lika med"

Matematiska Plus/Minus tecknet (kan användas vid PQ formeln t ex.) – har 3 sätt att kodas på

± - &plusmn; // &pm; // &PlusMinus; <- alla koder ger exakt samma tecken, testa själva vetja ;)

Grader som t ex. 30° – kan vara användbart att veta hur man kodar detta

° - &deg; <- förkortningen står för engelskans "degree", vilket på svenska betyder "grader"

Allmänna matematiska tecken som ”Infinity” (∞) för oändlighet, och ”Nästan lika med” (≈) för ungefärliga värden

∞ - &infin; <- förkortning står uppenbarligen för "infinity" som engelska ord för oändlighet 
≈ - &asymp;

Matematiska ”omfamnings-tecken” / Brackets

〈 - &lang; <- förkortningen står för "mathematical left angle bracket", som på svenska motsvarar "matematisk vänstervinklad parentes"
〉 - &rang; <- förkortningen här står för samma som ovan, fast right angle bracket

Matematiska enheter – promille (‰) och mikro (µ)

‰ - &permil; <- förkortning står för "per mille" gissar jag, där "mille" betyder tusen på franska, och promille är ju tusendelar så "per tusen" på svenska
µ - &micro;

Matematiska PI – Stora PI (Π) & lilla PI (π)

Π - &Pi; <- notera stora första bokstaven, precis som för de svenska tecknen
π - &pi; <- precis som svenska tecknen för liten bokstav

Matematiska ekvationstecken – Multiplikations ”x”

× - &times; <- "times" på engelska är samma som "gånger med"

Övriga tecken och ikoner som kan skapas med HTML specialtecken (sikte, telefon, man/kvinna, hjärta, bock, kryss, not)

⌖ - &target; <- sikte
☎ - &phone; <- telefon ikon
♀ - &female; <- kvinno könstecknet
♂ - &male; <- manliga könstecknet
♥ - &hearts; <- hjärta
♪ - &sung; <- sångnot
✓ - &check; <- checkmark (bock)
✗ - &cross; <- cross mark (kryss)

Ytterligare tecken som kan skapas via HTML-kod

Man kan även koda Grekiska alfabetet (som t ex. används ofta vid matematiska samband – alfa, beta, gamma, delta, etc.), såväl som t ex. Danska bokstäver som: ø, æ.

Där finns även specialtecken för att representera upphöjt-med och nedsänkt-med, men ni bör i det fallet hellre överväga det semantiska alternativet då HTML5 har taggar för att upphöja/nedsänka tecken, vilket kanske är att föredra över icke-semantiska specialtecken.

Slutkläm

Anledningen att jag på många ställen förklarade vad kodnings förkortningarna stod för och representerade – var då jag själv personligen har lättare för att komma ihåg kodnings förkortningarna om jag vet vad de står för i kombination med kunskapen att veta vad respektive kodnings förkortning ger för resultat i praktiken.

Valde att gå igenom samtliga användbara tecken som jag kunde komma på och som även kan hittas på W3C’s referenssida länkad först i nedan stycke.

Bra referenssidor där ni själva kan se över det tillgängliga utbudet av specialtecken för HTML

Några bra referenssidor för att se diverse tecken man kan koda in och vilka koder som ger vilka tecken kan hittas på följande sidor:

http://dev.w3.org/html5/html-author/charref

http://www.degraeve.com/reference/specialcharacters.php

 

av ·0 kommentarer

HTML länkar och länkning som ett koncept, är ett av de fundamentalaste koncepten för vad som är internet, utan våra länkar hade vi inte lika lätt kunnat hitta till webbplatser på ett lika effektivt sätt, eller sprida informationen så effektivt som vi kan nu.

Våra webbplatser hade haft svårt att ha menyval som ledde till andra sidor och/eller resurser utan vår förmåga att skapa länkar. Och inte heller hade vi kunnat länka till våra vänners webbsidor eller sprida/spara information vi hittat och ansett vara av värde på internet.

Länkar och länkning för webbutvecklare är ovärderliga av många anledningar, länkning används för att inkludera script, såväl som övriga resurser och filer som bilder t ex. samt för menyval som jag nämnde ovan, men även för att binda samman flertalet webbsidor vilket brukar göras för att skapa hela webbplatser.

Själva HTML länkarna däremot brukar endast användas (för min egen del iaf.) till att binda samman undersidor via menyval för en webbplats, eller för att (numera i sällsynta fall för min del) hjälpa besökare att enkelt öppna upp deras standard e-post klient för att skicka e-post meddelande till en person vars e-post adress var länkad till från en webbsida – utan att besökaren själv behöver skriva in den personens e-post adress (detta gör e-post länken såväl som att ”prompta” deras dator att öppna deras standard e-post klient, om ingen standard klient angiven så får besökaren oftast välja själv i datorns urval av e-post klienter).

Tar vi dagens bloggar som ett praktiskt exempel på användning av HTML länkar för att vägleda besökare vidare till ytterligare innehåll (så de inte ska lämna sidan oftast) – så brukar bloggar ha inlägg som besökare kommer in för att läsa, men vissa bloggar har även s.k. ”relaterade inlägg” som länkas till för att leda besökaren vidare till ytterligare innehåll.

Länkar är också förvånansvärt enkelt att lära sig i HTML, ni har redan i tidigare inlägg (URL:er och länkadresser) fått lära er de grundläggande koncepten för hur själva länkadresserna som används vid länkning är uppbyggda och fungerar för era webbsidor.

Jag är inte helt säker, men jag tror sen även att där kan förekomma en viss laddningstids skillnad om man jämför lokala länkar som direkt navigerar inuti webbserverns utrymme för sidan, respektive globala länkar som först måste slå upp domännamnet innan samma typ av webbserver utrymmes navigering för sidan kan ske som för lokala länkar. (Detta får gärna pålästa läsare kommentera och informera mig om, om ni skulle veta hur detta verkligen ligger till tillsammans med referens till källa för er information, så kan jag sedan uppdatera detta inlägg – mitt antagande här känns för mig logiskt med mina nuvarande kunskaper)

Nog om hur det funkar, vidare till hur vi gör våra länkar dårå ;)

HTML-koden för HTML länkar oavsett lokal/global länkadress

Jag kommer här visa er själva HTML elementet som utgör HTML länkar på webbsidor, såväl som vilka attribut vi bör fokusera på för våra länkar för att kontrollera hur de fungerar. Se nedan kodexempel för en lokal respektive en global HTML länk.

<a href="subpages/undersida1.html" target="">Länktext placeras häremellan (kan vara bild såväl som text)</a>

<a href="http://www.domain.se/subpages/undersida1.html" target="">Länktext...</a>

Notera ovan hur vår globala länkadress har med http://www. såväl som: domain.se, trots att man idag oftast endast behöver ange domain.se för att nå sina eftersökta webbsidor i själva webbläsaren. (Jag skulle gissa på att anledningen att man idag ofta kan komma undan utan att behöva ange http://www. är då webbläsarna antar att man är ute efter en webbsida när de identifierar ord i URL:en)

För att läsa på ytterligare om HTML-länkar ta en titt på: MDN’s referenssida för a-taggen.

Anledningen till att vi måste ange detta för globala länkar är för att informera webbläsare att länken leder till en utanförstående webbsida (oftast, kan även leda till samma sida trots global länkformatering – ett scenario då detta kan förekomma är för dynamisk PHP-kodning av webbsidor), webbsidor hämtas och presenteras med hjälp av det s.k. Hyper Text Transfer Protokollet vilket http indikerar, och www står för World Wide Web som är lite mer komplicerat att beskriva varför den står med i URL:en, man skulle kunna tro att det är någon form av ”rotmapp” till alla Internets existerande domännamn, fast är ni intresserade av att verkligen veta mer om vad det fyller för funktion så hittade jag följande superuser forumpost som kanske kan förklara det lite mer i detalj.

Brädstreck (#) som ”Dummy-URL” för testsyfte- eller tills riktig URL skall läggas in

Brädstrecket kan anges till <a> taggens href attribut för att hänvisa till den egna sidan man befinner sig på! Vilket kan vara användbart om man ska testa CSS-stilar för de olika ”lägena” en HTML länk kan befinna sig i (mer om detta i inlägg om CSS framöver). Om man inte skulle ange # som ”dummy-URL” för en HTML länks href attribut, så finns risken att det blir svårt att testa länkarna och man blir hänvisad till felmeddelande-sidor då länkadress saknas och ens besökare i värsta fall blir allmänt förvirrade av hur de kastas omkring till sidor som inte existerar (om testsidan t ex. av någon anledning skulle vara publicerad för allmänheten/utvalda få att ta del av). Då är det betydligt bättre att låta länkarna hänvisa till den egna sidan som man befinner sig på, så kommer inte potentiella besökare bli lidande av att man testar eller har ”icke-aktiva” HTML länkar.

Praktiskt exempel på hur jag menar att man använder brädstreck som ”Dummy-URL” kan ses nedan:

<a href="#" target="_top">Länktext placeras här (eller länkbild)</a>

Ni kan även se i tidigare inlägg där jag skrev om hur ID attributet kan hänvisas till som ankarlänkar på specifika sidor, och att dessa kan besökas genom att ange URL:en för sidan där ID attributet existerar, tillsammans med ett brädstreck (#) direkt efter URL:en för sidan, tillsammans med värdet för ID attributet.

Till exempel: http://www.min-webbsida.se/index.html#paragraph2

Där index.html är sidan där ID attributet för en paragraf är ”paragraph2”.

Detta kanske förklarar lite vad brädstrecket är till för när vi talar om länkadresser.

HTML-länkars ”target”-attribut och funktionen det fyller

Notera i ovan textstycke att jag lämnade target attributet utan värde, detta var av anledning att jag inte ännu förklarat vad attributet gör/fyller för funktion.

Där var lite debatt för target som ett länkattribut när HTML5 skulle introduceras, tydligen så togs attributet bort under en tid från specifikationen, vilket gjorde att man fick krångla till det med massa JavaScript för att efterapa samma funktion som tidigare fyllts av ett väldigt simpelt attribut som target faktiskt är och har varit i alla år.

Vad target attributet då gör är alltså att tala om för webbläsaren hur en specifik länk är tänkt att öppnas… Skall den öppnas som ersättande av den sidan som besökaren befinner sig på, eller ska länken öppnas i en ny flik/nytt fönster?

Där finns sammanlagt 4 st. värden för attributet, dock har jag någonsin endast behövt använda mig utav 2 av dessa. För att läsa på om samtliga attribut och allmänt få mer information om dem, så kan ni se ovan länkade MDN referenssida.

Anledningen att jag bara använt- och använder mig av 2 av de 4 tillgängliga attributvärdena, är då de resterande 2 attributvärdena som jag inte använder fyller funktioner som jag ännu inte stött på ett behov av för mina webbsidor jag skapat tidigare. Vad jag kan förstå från MDN’s referenssidan så kan de resterande två attributen vara användbara för länkar från inuti ramar/frames av olika typer som behöver förmedla länkadresserna till ramar/frames utanför den ramen som länken är placerad i. Och idag används knappt (om ens alls) ramar överhuvudtaget, finns bättre och flexiblare sätt att koda webbsidor på idag.

Undantaget är väl kanske iFrames som vi kommer skriva om lite mer i detalj framöver, för att kort bara nämna vad skillnaden mellan iFrames och Frames är, så kan jag ju säga att iFrames är en typ av ”ram” som man lägger på sin webbsida – lite som om ni tänker er en sandlåda som läggs på er tomt (webbsidans body är tomten), därefter har man möjlighet att visa andra webbsidor, PDF:er eller liknande inuti den ramen, medan Frames förr istället användes mycket för att bygga upp strukturen för hela webbsidor som täckte hela webbläsarfönstret (oftast).

Det kan vara bra att veta översiktligt att där finns 4 st. attributvärden för target, och vad respektive gör, men jag kommer bara gå igenom de två som brukar vara populärast att utvecklare använder, nämligen:

  1. _top
  2. _blank

Det första attributvärdet _top ersätter den sidan besökaren tittar på just nu med den sidan som länken leder till.

Det andra attributvärdet _blank öppnar istället upp länken i en ny flik/nytt fönster, sen flikar introducerades och blev desto populärare för modern webbläsare-browsing så är det mer sällan att _blank länkar öppnas i nya webbläsarfönster, oftast öppnas de till nya flikar! Själv är jag inte helt säker på utifall det går eller ej utan JavaScript, att tala om för en länk via HTML att en länk skall öppnas exklusivt i en helt ny webbläsarfönster hellre än en enkel ny flik. Kan hända att jag kollar upp även detta till framöver inlägg som jag tänkt skriva till den här sidan :)

Mailto URL – För att hjälpa besökare skicka e-post med HTML-länkar från ens webbsida

Där finns ett sätt att hjälpa besökare lättare kontakta webbplatsens ägare och liknande, och det är genom att ange en länkadress med inledningen mailto: följt av en giltig e-post adress till webbplats administratören/ägaren. Se praktiskt exempel på en länk som kan hjälpa att skicka e-post till adressen adress@mail.com:

<a href="mailto:adress@mail.com">Nå mig på e-post</a>

Vad som då kommer hända när en sådan länk klickas, är att besökarens dator kommer försöka öppna vilket än program som datorn har angivet som ”standard e-post klient”, för att kunna göra ett nytt e-post meddelande att skicka, och i ”Till:”-fältet för det e-post meddelandet kommer där att vara förifyllt den e-post adressen som ni kodade in i er mailto-länk.

Webbsidor som inte använder PHP och där denna typ av begränsad kontaktmöjlighet/hjälp på traven är OK, duger detta, däremot om man vill ha lite mer sofistikerade sätt att skicka e-post på från sin webbsida, bör man läsa på om PHP eller liknande back-end språk som kan behandla kontaktformulär och skicka ifylld data direkt från webbservern till en inprogrammerad e-post adress.

Slutkläm

Jag ser nu att där finns en hel del attribut som jag inte går igenom här för HTML-länkar på MDN’s referenssida, och anledningen till det är dels för att detta skall vara pure basics, och dels för att jag själv ännu inte använt något annat än det jag gått igenom i detta inlägget för mina egna sidor genom åren, och därför tror jag det kan räcka med att bara gå igenom dessa detaljer för HTML länkar för den här gången :)

Kan hända att vi går in lite mer på djupet i framtida inlägg om ni skulle vara intresserade av detta, men annars tror jag att jag kommer gå vidare och fokusera på att få klart inlägg om grunderna först och främst.

Kunskaperna vi gått igenom i detta inlägg bör vara tillräckliga för att ni själva ska kunna sammanlänka era egna undersidor, såväl som att länka till era kompisars eller andra utanförstående webbsidor från era egna webbplatser! Samt hjälpa era besökare någotsånär enklare skicka e-post från era webbsidor.

Länkar är väldigt bra att känna till och ni kommer att ha användning för kunskapen genomgången i detta inlägg för samtliga av era egna webbsidor ni själva utvecklar i framtiden.

Alla webbsidor jag själv stött på såhär långt har haft någon form av länkning på ett eller annat vis, och för detta används alltid HTML-länkar som grund! Enjoy :)

av ·0 kommentarer

Tänkta i denna del av Introduktion till On-page sökmotoroptimering (SEO) gå igenom ytterligare lite visdomsord innan val av domännamn, såväl som delge er läsare med några väldigt användbara och bra sökmotoroptimerings verktyg online, där ett av de kan användas för nyckelords analys, medan ett annat beräknar värdet av en publicerad webbsida baserat på sökmotoroptimerings betyg.

Ytterligare tankar om val av domännamn i sökmotoroptimeringssyfte

Det är väldigt viktigt att ha koll på vad sidan man önskar bygga skall ha för syfte/funktion innan man köper ett domännamn – kan även vara bra att ha lite uppfattning om vad folk brukar söka på för att hitta till liknande tjänster som det du vill förse folk med på din egen sida. På så sätt kan du välja det absolut bästa domännamnet för att vara otroligt slagkraftigt(!) när det gäller vad folk söker på för att hitta till just din sida :)

Domännamnet är utanför ”scopet” egentligen av både On-page SEO och Off-page SEO – men gås ändå igenom för on-page då det tekniskt sett tillhör ens egen webbsida ;) Plus att jag anser det vara väldigt användbart att känna till- såväl som att kunna förstå vilken roll det fyller för sökmotoroptimering överhuvudtaget. Det är sökmotoroptimerings grundarbetet man gör innan själva webbsidan är skapad trots allt. Grunden som allting ska vila på sen.

Många företag på nätet har ni säkert sett som har domännamn som är förkortningar av deras annars kanske ganska långa företagsnamn – och detta kan säkert vara bra i många av fallen – dock bör man överväga de 2 kategorierna detta påverkar:

  1. Sökmotoroptimering, samt
  2. Inskrivnings-bekvämlighet för URL till sidan för adress-fältet i webbläsaren.

När det gäller sökmotoroptimering och om ni är ute efter att många skall hitta till er via sökmotorer på nätet så gör det inget om namnet är lite längre, såvida det inte är ”överdrivet långt” – man kan t ex. binda samman flera ord som tillsammans kanske bildar ett företagsnamn eller liknande med bindestreck (-) för att göra det lättläsligt såväl som lätt att komma ihåg för oss människor som ska skriva in det- även om det är lite längre.

Nackdel med förkortning som domännamn

En förkortning hjälper ingenting när det gäller sökmotoroptimeringen, förutom om det är just det nyckelordet och enbart det ni önskar, hoppas och förväntar er att folk ska söka på för att hitta till just er webbsida!

Potentiell fördel med förkortning som domännamn

Om ni istället inte har mycket hopp om att bli hittade i sökmotorer men vill att alla era uppraggade kunder eller stambesökare ska med enkelhet kunna skriva in en enkel adress i adressfältet som är ”lätt” att komma ihåg och snabb att skriva in så kan ju detta kanske vara aktuellt i sådana fall. Men tänk på att ni begränsar era sökmotoroptimerings möjligheter för stunden- såväl som för framtiden så länge ni behåller samma domännamn för er webbsida!

En blandning av båda världar är det bästa

Dock så kan jag gott tycka att ni bör satsa på både-och när ni väljer ert domännamn – både sökmotorvänlighet såväl som hur svårt det är att minnas/skriva in i adressfältet.

Inte för långt helt enkelt, använd gärna bindestreck (-) om nödvändigt för lättläsligare domännamn, och ha gärna ett sökmotoroptimerings vänligt domännamn – med vilket jag menar att det ska vara lätt att komma ihåg för potentiella besökare, såväl som lätt att hitta till genom sökningar på sökmotorer.

Besökares ålder kan spela roll

Er inriktning för vilka typer av besökare som är avsedda att använda er webbsida kan även spela roll här då äldre kanske inte har lika lätt att hantera längre och mer sofistikerade URL:er och adresser som skall skrivas in i adressfält, medan yngre individer kanske är betydligt flexiblare inom detta och kan hantera det utan problem som kontrast till de äldre.

Tänk på era besökare och deras behov/möjligheter över vad ni själva tycker verkar bra

Som ni ser finns där mycket att överväga och tänka på innan man köper sina domännamn, men se bara till att ni själva är nöjda såväl som att adressen ni väljer inte är något som bara ni själva kan förstå eller som blir för krånglig för allmänheten att hantera så ska saker och ting nog lösa sig ska ni se ;)

Det är ju trots allt inte direkt ni som ska gå in på webbsidan, mer än för att ändra innehållet på sidan, och för detta kvittar det ju vilken länkadress ni har.

Användbara länkar att känna till för sökmotoroptimering

SEOCert.net – Webbverktyg för att göra bedömning av värde för en publicerad webbplats baserat på dess sökmotoroptimering

Sokmotorkonsult.se – Har en hel del goda tips och svarar även på frågor via e-post om man undrar något om sökmotoroptimering :)

Sokmotorkonsult.se: On-page SEO analys verktyg – Analysera din publicerade webbsida på specifika nyckelord och se hur väl du lyckats :)

MOZ.com blog – Sökmotoroptimerings blogg på engelska med väldigt användbart och bra innehåll

Metatags.info – För mer information om meta-data taggar

Slutkläm

Det var allt för on-page sökmotoroptimering för den här gången, en summa av 6 inlägg som uppdelat går igenom i detalj de olika delarna jag såhär på rak arm kunde komma på för området :)

Skulle det vara något ni själva kommer på som jag missat, eller att ni anser jag har o-informerad/fel uppfattning om eller bara har förslag på tillskott jag skulle kunna lägga in som ni tror kunde vara intressant för denna sidans läsare att ta del av – så får ni jättegärna kontakta mig i kommentarerna eller via övrigt kontaktsätt (se kontaktsidan) :)

Stort tack för att ni hade tålamodet och intresset att följa med i detta inläggskluster ;) Ses i nästa post ^^

av ·0 kommentarer

Denna del av Introduktion till On-page sökmotoroptimering (SEO) syftar till att informera er om vikten av att ha bra och kvalitativt innehåll på ens webbsida.

Detta har blivit desto viktigare på senaste tiden då sökmotorerna lägger mer och mer fokus på indexering av en webbsidas själva innehåll. Så då kan det vara smart att skriva väl genomtänkta texter eller anlita någon för att göra det om man är i jättebehov av stark sökmotoroptimering, tror de brukar kallas CopyWriters, de som jobbar med att skriva sökmotorinriktade texter till webbplatser.

De brukar ta betalt per ord som skall skrivas, vissa tar till och med betalt per tid som lagts ned på att göra research och skriva texten. Om det inte är sån kris dock så ni överväger att anlita någon för att göra det till ett ”professionellt jobb”, så hade ni kunnat försöka att bara tänka lite extra på vad innehållet säger, till vem innehållet talar, vilka ord som använts i innehållet – avancerade (mindre del av befolkningen som känner till orden?), för enkla (kan få det att verka som texter är skrivna av folk utan utbildning), ha rubriker som fångar intresset av dig själv framförallt, men som du även kan föreställa dig att folk hade kunnat söka på för att läsa mer om just det ämnet.

Rubriker är speciellt viktigt då dessa verkar utgöra en stor roll för innehålls sökmotoroptimeringen. Plus att de på ett bra sätt erbjuder en god struktur för sidans textinnehåll som är lätt för både dig själv som skriver, såväl som dina besökare att följa med i, än om du inte hade haft några rubriker överhuvudtaget, och bara ren text i stora mängder t ex.

Dålig erfarenhet och eventuell nackdel med professionella CopyWriters

Ibland funkar det, ibland inte lika bra. Jag har varit med om att en webbplats ägare anlitade copywriters som antingen saknade kunskap/intresse för vad hans sida stod för och gjorde, och förmodligen var alldeles för fokuserade på vilka ord som skulle framhävas att de helt hade tappat greppet om bra svenska meningsbyggnader, röd tråd i texterna, och liknande. Detta gjorde att allt bara lät som skit när man läste det. Det var svårt att följa med i texterna, där fanns inget sammanhang överhuvudtaget, var på gränsen till Lorem Ipsum Dummytext fast med inriktning på ”x” antal specifika termer :P Det kan helt enkelt bli för mycket av det goda ;)

Eventuella nackdelen med professionella copywriters är som ovan exempel visade dels – att de kanske maler sönder alla texter på sidan för att inte säga någonting till dina besökare, utan i stort sett bara till sökmotorindexerings robotarna, en annan eventuell ”nackdel” kan vara att de inte känner din verksamhet/webbplats som du själv gör och det kanske därför hade gett bättre resultat om du själv hade skrivit texterna för webbsidan. Å andra sidan är det mycket jobb, men det är helt upp till er, er webbsida, ert innehåll :)

Blir ju också en liten extra kostnad som man får ta med i beräkningarna för om det beräknas vara värt det jämfört med potentiella sökmotoroptimerings resultat producerade texterna kan ge.

Låt dock inte en dålig erfarenhet förstöra helheten

Professionella CopyWriters finns nog både som bra och dåliga – som allt annat här i världen, och de som verkligen kan sin sak, de är fantastiskt duktiga! De får texterna att kännas ”perfekta” när man läser de, varenda ord känns genomtänkt utan att falla ur sammanhanget och har ständig koll på sin röda tråd. Där finns inte ett för mycket överflödiga ord för att få sagt det man vill säga med sin text, och där finns inte heller ett för lite ord, allting är perfekt balanserat. Rubrikerna brukar vara slagkraftiga och koncisa med exakt rätt mängd ord.

Slutkläm

Termen jag använde i min rubriktext: ”Content-Aware-Typing” var ett eget påhitt som jag tyckte passade vad denna del av sökmotoroptimering handlade om – tror dock inte att det är en formellt antagen term, men man vet aldrig – idag verkar vi ju trots allt ha termer för nästan allting i vårt samhälle ;P På svenska skulle ju Content-Aware-Typing motsvara: innehållsmedvetet skrivande, eller något i den stilen :)

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!