av ·0 kommentarer

Step 1: Suggested File & Folder Structure

MainFolder
   -file:   index.php
   -file:   index.html (base-template file)
   -folder: incl/ (for includes)
      -file:   incl/header.php
      -file:   incl/footer.php
      -file:   incl/config.php (PHP settings)
      -file:   incl/functions.php (PHP functionality for all pages)
   -folder: css/
      -file:   css/mainstyles.css
   -folder: img/

Step 2: Creating the base-template file (index.html)

This is where we build our website as a normal .html file with header, body and footer sections (the whole layout in a single file)!

Later on this will in turn be used as our base template that we will disect into 3 separate pieces:

  • header.php for header code
  • index.php for body and page-specific code
  • footer.php for endpage and footer code

Our base-template file will be very basic and simple and can be seen below:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>This will be our first Dynamic website using PHP dynamic templating techniques :)</title>

   <!-- Make browser understand this is responsive site and not in need of 'pinch-zoom-ins' - Commented for now- remove if u want to use this--> 
   <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->

   <!-- Below is our main stylesheet for the page -->
   <link href="css/mainstyles.css" rel="stylesheet" type="text/css" media="all" />

   <!-- Below adds a 'shortcut-icon' a.k.a. 'bookmark/favorite icon'-->
   <link rel="shortcut icon" href="img/favicon.ico">

   <!-- Below allows for addition of this particular page's description for SEO -->
   <meta name="description" content="" />

   <!-- Below Meta-tags tells SE-Indexation spiders to index page and follow pagelinks of site -->
   <meta name="robots" content="index, follow" />
</head>
<body>
<div id="mainContainer"> <!-- Wrapper for page -->
   <header>
      <img src="img/logo.jpg" width="200" height="60" alt="" />
      <h1>Our homepage</h1>
      <p>- Slogan for this website</p>
   </header>
   <nav>
      <ul>
         <li><a href="#" target="_top">Home</a></li>
         <li><a href="#" target="_top">Portfolio</a></li>
         <li><a href="#" target="_top">About us</a></li>
         <li><a href="#" target="_top">Contact</a></li>
      </ul>
   </nav>
   <article>
      <h1>Content area for site is here...</h1>
      <p>And this is where all the content for the individual pages will end up.</p>
   </article>
   <footer>
      <p>&copy; Copyright <?php echo date('Y'); ?>. All rights reserved.</p>
      <hr />
      <a href="#" target="_top">Sitemap</a>
      <a href="#" target="_top">FAQ</a>
      <p>Phone: 070X-XX-XX-XX &bull; Email: test-[at]-testsite.org &bull; Address: Fictionstreet 32B, CA, USA</p>
   </footer>
</div> <!-- End of Wrapper for the page -->
</body>
</html>

Step 3: Process breakdown of how this is going to work

Okay, so the idea is to divide this website that we just created into different pieces (header, content and footer).
We do this by analyzing which parts will be recurring throughout every single subpage of the website.

For example: We can be pretty sure that all the code belonging to the ”header” section (including the main menu) will be available on every single subpage- as will the footer code!

This means that we can take all this code and place it in separate files.
In our case we call these files header.php & footer.php and have them placed in a folder named: incl, which is short for ”includes”.

Why do we do this then? Well the idea is to later include these separated external files, which together contains all the code for the entire page layout!

In this way we ”re-create” the website section by section by including these different parts into the ”main-subpage-file” – such as index.php for the mainpage, and contact.php for the contact page for example, etc.

Step 4: Start disecting & dividing the different sections of the website

###- header.php - can be seen below
###################################
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>This will be our first Dynamic website using PHP dynamic templating techniques :)</title>

   <!-- Make browser understand this is a responsive site and not in need of 'pinch-zoom-ins' - Commented for now- remove if you want to use this --> 
   <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->

   <!-- Below is our main stylesheet for the page -->
   <link href="css/mainstyles.css" rel="stylesheet" type="text/css" media="all" />

   <!-- Below adds a 'shortcut-icon' a.k.a. 'bookmark/favorite icon' -->
   <link rel="shortcut icon" href="img/favicon.ico">

   <!-- Below allows for addition of this particular page's description for SEO -->
   <meta name="description" content="" />

   <!-- Below Meta-tags tells SE-Indexation spiders to index page and follow pagelinks of site -->
   <meta name="robots" content="index, follow" />
</head>
<body>
<div id="mainContainer"> <!-- Wrapper for page -->
   <header>
      <img src="img/logo.jpg" width="200" height="60" alt="" />
      <h1>Our homepage</h1>
      <p>- Slogan for this website</p>
   </header>
   <nav>
      <ul>
         <li><a href="#" target="_top">Home</a></li>
         <li><a href="#" target="_top">Portfolio</a></li>
         <li><a href="#" target="_top">About us</a></li>
         <li><a href="#" target="_top">Contact</a></li>
      </ul>
   </nav>
   <article>
-----------------------------------
###- footer.php - can be seen below
###################################
   </article>
   <footer>
      <p>&copy; Copyright <?php echo date('Y'); ?>. All rights reserved.</p>
      <hr />
      <a href="#" target="_top">Sitemap</a>
      <a href="#" target="_top">FAQ</a>
      <p>Phone: 070X-XX-XX-XX &bull; Email: test@testsite.org &bull; Address: Fictionstreet 32B, CA, USA</p>
   </footer>
</div> <!-- End of Wrapper for the page -->
</body>
</html>
###################################

Now as you can probably can see, we included the ”<article>” in the header.php file, while we included the ”</article>” in the footer.php file, but totally ”ignored” the content of <article> in both files.

We did this because we plan ahead!

Every subpage of the website will probably have the need for a ”general content-container” to place that particular page’s contents in – so we make the <article> container itself become recurring, while the content of the container- is not.

So perhaps you’re asking yourselves now whats next? Well, we need to put the website back together again after having disected it- thats our next move- including the header.php & footer.php in the index.php for the websites main-subpage.

###- index.php - can be seen below:
###################################
<?php include('incl/header.php'); ?>

<!-- Here comes the HTML content specific to this Mainpage (will be placed inside of <article> in header.php since that is the last piece of code included with the header.php file) -->

<?php include('incl/footer.php'); ?>
###################################

Now the website will have been recreated in index.php, since it first includes header.php (and all the code this file holds), then the HTML-content for that specific subpage, and last but not least- the footer.php file and the code that file holds.

Step 5: config.php & functions.php Explained

Okay, so you might be wondering now that we seem to be done already why we made 2 extra files in the incl/ folder?

Well this is simply for the purpose of ”looking & planning ahead”.

In the future the idea is that the config.php file will hold configuration code for the entire page (settings if you will). While the functions.php file will hold useful PHP functionality – which later can be included into the header.php to be available for all of the respective subpages.

And another thing worth pointing out- the footer.php will be able to hold all of the JavaScript code file inclusions that you want to load at the end of all subpages!

Step 6: Adding dynamic SEO content (title & meta-desc) for each individual page

There are tons of more fun and powerful/useful stuff you can do with a Dynamic website template like this in PHP!

For example if we want unique <title> texts for each individual subpage, we only replace our current HTML content in the header.php file between <title> & </title> with something like:
<?php echo $subPageTitleVariable; ?>

Then all thats left to do is to within index.php Above where we include header.php -> place:

$subPageTitleVariable = "our specific subpage &lt;title&gt; text";

And this would be available for the header.php file to make use of- seeing as how we placed it Above where header.php was included within the file and PHP works vertically through the code from top->bottom. Where top-placed code will be available for bottom-placed code in the code file/page. See below example:

###- index.php - can be seen below:
###################################
<?php $subPageTitleVariable = "This is our dynamic index page specific title text"; ?>
<?php include('incl/header.php'); ?>

<!-- Here comes the HTML content specific to this Mainpage (will be placed inside of <article> in header.php since that is the last piece of code included with the header.php file) -->

<?php include('incl/footer.php'); ?> 
###################################

This method and technique can also be utilized- and comes in very handy for On-Page SEO- where you need to specify specific meta-descriptions for each individual subpage!

As one last thing worth to mention is that I recommend you to start the config.php file by placing:

<?php error_reporting(-1); ?>

To report ALL Possible (PHP) errors on the page for debugging (recommended to be turned off when publish page – 0 as value instead of -1).

Also- include config.php Above header.php inside the index.php file, so that the Error Reporting is active for the Entire page.

Good Luck with all your Coding out there now ;)

Hope you learned something new and/or get some new ideas for your next projects ;) Was a pleasure helping out and hopefully inspiring to new creativity :) 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!

av ·0 kommentarer

För några år sedan (i skrivande stund) så var det betydligt populärare än vad det är idag med taggar som meta-keyword. Idag fokuserar indexerings robotarna mer och mer på själva innehållet som finns skrivet på en webbsida – därav den stora vikt som kom med HTML5-semantiska uppmärkningen av innehållet så indexeringsrobotarna förstår innehållet betydligt bättre och kan samla in ytterligare mer data än vad bara innehållet består av som t ex. även beskrivning av innehållet på ett språk bottarna själva kan förstå.

Men låt oss börja gå igenom de tre mest kända meta-data taggarna och se lite mer detaljerat på hur dessa fungerar och hur man kan nyttja de på ett bra sätt:

Meta-data taggen för: keywords – för nyckelord för ens webbsida till sökmotorerna

Denna meta-data tagg var betydligt populärare förr, dock på grund av att många missbrukade den på sätt som att ”spamma” alla möjliga ord, oavsett hur irrelevanta orden/termerna var för deras egna sidas faktiska innehåll – i hopp om att snappa upp trafik på sökningar på andra populära ord och termer, så tappade sökmotorer intresset. Många missförstod också hur meta-data taggen för keywords var tänkt att användas, vilket resulterade i att folk skriv flera instanser av samma ord, fast med olika variation på versaler och gemener för ordet – t ex. SmAk och smak och SMAK – för att göra- vad de förmdodligen trodde var- att täcka alla möjliga sökningar för ordet – utifall sökningarna var s.k. ”case-sensitive” och kunde ge olika sökresultat baserat på stora och små bokstäver.

Där var till och med tillfällen då någon hörde talas om ett rykte att så länge ordet ”existerade” på sidan, så blev det helt plötsligt ”tyngre” sökmotoroptimeringsmässigt, vilket ibland ledde till att folk som försökte fuska med sökmotoroptimeringen skrev in text på sin webbsida, och gav sedan texten stilar för att ”verka osynlig” för besökare på sidan, men som fortfarande kunde snappas upp av indexeringsrobotarna.

Efter ett tag blev bl. a. Google så trött på allt missbruk så de beslutade sig för att straffa folk som försökte fuska genom att sänka deras ranking (har jag för mig ;p).

Men för dem som faktiskt använde meta-data taggen för keywords på ett korrekt sätt, så kunde den användas för att tagga innehåll som fanns på sidan, såväl som inte fanns på sidan för att indikera vad sidan handlade om, även om just sidan inte specifikt berättade det i innehållet på sidan själv.

Detta tyckte jag själv var oerhört bra och användbart att ha tillgång till, men numera verkar det som meta-data taggen för keywords mer eller mindre slopas helt och hållet för indexeringsprocessen.

Att ha möjlighet till en metod för att in-direkt kunna deklarera vad ens sida handlade om för sökmotoroptimering tycker jag själv hade varit riktigt awesome!

Jag använde själv meta-data taggen för keywords ganska aktivt ända tills jag såg en diskussionstråd på MOZ.com som gav mig en tankeställare och fick mig att inse att det kanske inte gjorde så mycket längre som jag trodde/hade hoppats på: Moz.com diskussionstråd

Dock på den ljusa sidan innebär detta mindre tid till att komma på klyftiga nyckelord, och mer tid och fokus att lägga på faktiska webbsidan och det som verkligen spelar roll idag – såsom innehållet.

Meta-data taggen för: description – för beskrivning av ens webbsida till sökmotorerna

Meta-data taggen för description är en bra tagg att använda. Google visar t ex. meta-data taggen för description under länken till sidan för sökresultatet. Detta är användbart och bra då en beskrivning av specifika sidor och undersidor kan visas genom att ge dessa beskrivningar till meta-data taggen för description, som sedan visas för besökare på Googles egna sökresultats sida – som ni kan se nedan:

Meta-description visad både i kod såväl som resultat i sökmotor

Enligt vår SEO-referenssida (Moz.com) så är en rekommenderad längd på 155 tecken att föredra för vår Meta-description.

Tänk på att texten skall locka in besökare på din webbsida när de får upp din sida som ett av sökresultaten hos t ex. Google, och därför bör skriva texten så marknadsförande och lockande som möjligt på 155 tecken (inkluderar mellanslag).

Exempel på hur Meta-description skrivs kan ses nedan:

<meta name="description" content="Här placerar vi vår beskrivning av denna undersida" />

Meta-data taggen för: robots – för instruktion om hur en webbsida skall sökmotorindexeras

Meta-data taggen för robots används för att bestämma vilken typ av åtkomst som indexeringsrobotar är tillåtna att ha på din webbsida när de skall indexera den – vart de får lov att indexera, såväl som vad för något de får lov att indexera.

För meta-data taggar som finns tillgängliga finns en väldigt bra referenssida på nätet kallad Metatags.info, kolla gärna in den sidan för mer information om ni skulle vara intresserade, finns även tillgänglig på vår Länkar-sida.

De vanligaste värdena jag själv har använt för meta-data taggen för robots har varit "noindex, nofollow" när jag önskat att en viss undersida eller webbsida inte skulle bli indexerad, såväl som "index, follow" om jag vill att undersidan/sidan ska indexeras, såväl som att följa länkar på sidan och även indexera de sidorna, se kodexempel nedan:

<meta name="robots" content="index, follow" /> <!-- För indexering av hela hemsidan -->

<meta name="robots" content="noindex, nofollow" /> <!-- För ingen indexering -->

Och för mer information om Meta-robots taggen kan ni kolla referenssidan Metatags.info för mer detaljer ;)