De Beste HTML Code Design en SEO Gewoonten

Met ShopFactory kun je zonder er iets voor te doen al heel veel bereiken door ShopFactory’s krachtige ingebouwde point & click web editing. Maar dit kun je redelijk eenvoudig nog verder uitbouwen als je HTML/CSS voor gevorderden gebruikt. Hiermee pas je pagina HTML en CSS aan, om zo uitgebreidere layouts te creëren, met DIV design elementen en met kenmerken die zorgen voor aanvullende SEO waarde.

Met ShopFactory kun je zonder er iets voor te doen al heel veel bereiken door ShopFactory’s krachtige ingebouwde point & click web editing. Maar dit kun je redelijk eenvoudig nog verder uitbouwen als je HTML/CSS voor gevorderden gebruikt. Hiermee pas je pagina HTML en CSS aan, om zo uitgebreidere layouts te creëren, met DIV design elementen en met kenmerken die zorgen voor aanvullende SEO waarde. Maar voor de meeste webwinkeliers zijn de standaard point & click mogelijkheden al prima en toereikend. Heb je toch zin om wat extra’s te doen en wil je gebruik maken van wat er allemaal kan? Lees dan de eenvoudig te volgen tips hieronder.

Wist je dat ShopFactory je vindbaarheid op het internet al verhoogt met automatisch door ShopFactory toegevoegde H tag codes? Je hoeft hier dus eigenlijk niets aan te doen. ShopFactory heeft standaard ingebouwd dat H tags worden toegekend op de juiste plaatsen: aan je website naam, slogans, pagina titels, pagina introducties, paragraaf titels, producttitels.

ShopFactory Super Tip
Algemeen geldt voor zelf Code maken: Wees altijd heel voorzichtig en precies bij het gebruik van aangepaste HTML & CSS want zelfs het kleinste foutje kan de layout al kapot maken. Doe dit ALTIJD in een testshop en zet niets in je webwinkel voor je de code getest hebt (zie ook punt 7 in de tips hieronder).

Het belang van precisie: perfect naar een mooiere shop
Programmeren is een taal en heeft daarom ook regels, grammatica en structuren die je moet volgen voor een goed resultaat. Maar er is een groot verschil bij het zelf handmatig programmeren van code. Fouten en foutjes tellen zwaarder: in plaats van een klein spelfoutje in een verder nog goed leesbare tekst, of een verspreking in een speech die verder nog goed te volgen is, kan een fout in je programmeercode je opzadelen met totale chaos en wanorde op je webpagina. Dat wil je natuurlijk voorkomen! ShopFactory verzamelde daarom de beste tips om te zorgen dat jouw handmatige verbeteringen aan je webwinkel ook echt verbeteringen zijn.

De simpele Basics voor HTML en CSS in je webpagina’s:

1. Back-up, back-up, back-up! Sla altijd eerst je shop op. Werk altijd in een aparte testversie van je shop bij het maken van code, zowel bij het bouwen, testen en controleren van je HTML en CSS, voordat je de code kopieert naar de actieve online versie van je shop.

2. Probeer eerst te werken in NotePad / Kladblok of NotePad++ voor de bouw van de basis. Sommige HTML / CSS editors voegen automatisch allerlei extra wijzigingen toe, niet voor niets vaak “coding junk” (codeer rommel) genoemd. Met NotePad / Kladblok of NotePad++ weet je altijd dat je met schone code werkt. De allerbeste is NotePad++, iets wat niet veel mensen kennen maar dit heeft heel veel mogelijkheden en voordelen en het is ook nog eens gratis. De werkversie die je zo maakt kun je tijdelijk opslaan als aparte .html pagina, zodat je het design kunt testen in je browser. Ook handig is dat je met NotePad++ de pagina kunt openen in elke willekeurige browser en dan terwijl je eraan werkt, de pagina kunt verversen in je browser, zodat je telkens meteen kunt zien wat je hebt gedaan.
Is de code eenmaal klaar, dan upload je de HTML pagina die je hebt gemaakt naar een gratis online HTML Validator ter controle. Foutmeldingen over codes die beginnen met “SF” (ShopFactory) kun je daarbij negeren.

3. Werk in secties en bouw verder op elke sectie. En double check: controleer altijd, liefst meerdere keren, je tags aan het begin en het einde op fouten. Vooral het vergelijken van het begin en het einde is belangrijk. Je wilt niet de mensen de kost geven die zoiets simpels over het hoofd zien als deze situatie: <H1>opent de tekst en per ongeluk sluit de tekst met </H2>. Bouw daarom je basis structuur zoals in Voorbeeld 2 hieronder en vul dan de content in. Dat scheelt veel problemen en zorgt dat je plezier houdt in het programmeren.

4. Tags sluiten! Elk stukje code heeft aan het begin < > en aan het einde </ >. Die eindtag is van vitaal belang voor een goede code, en zorgt dat er gebeurt wat je wilt, op de plaats waar je dat wilt. Tags correct sluiten zorgt bijvoorbeeld dat niet ineens de hele online tekst meegaat in wat bedoeld was als een vetgedrukt woord. Dus sluit de tags!

Voorbeeld 1 - dit zijn veelvoorkomende paren begin- en eindtags:

<H1> </H1>
<H2> </H2>
<div></div>
<span></span>
<p></p>

Wist je dat ShopFactory je vindbaarheid op het internet al verhoogt met automatisch door ShopFactory toegevoegde H tag codes? Je hoeft hier dus eigenlijk niets aan te doen. ShopFactory heeft standaard ingebouwd dat H tags worden toegekend op de juiste plaatsen: aan je website naam, slogans, pagina titels, pagina introducties, paragraaf titels, producttitels. Je hoeft dus eigenlijk alleen H tags toe te voegen voor je SEO als je daar een speciale reden voor hebt, of als je sommige velden die tags genereren niet gebruikt (en dus tags zou mislopen als je ze niet zelf aanmaakt). Houd daarbij altijd in de gaten dat de H tags die je zelf maakt niet botsen met de automatische H tags. Dit kan zelfs betekenen dat je een nieuwe, andere paginastijl moet maken, waarbij de automatische H tags een ander patroon hebben. Zo’n nieuwe paginastijl hoeft helemaal niet ingewikkeld te zijn, het komt meestal heel eenvoudig neer op een kopie van je bestaande paginastijl, maar dan met <H2>verwijderd en vervangen door <div>, en de </H2> aan het eind op zijn beurt weer vervangen door </div> is het meestal al prima opgelost. Dan heb je zelf in je ShopFactory webwinkel de vrijheid om zoveel H tags gebruiken als je maar wilt.

5. Bouw eerst je statement array, voeg dan pas je content en andere structuren toe. Zoals gezegd hierboven in Tip 4 kun je dit het beste in secties doen. Witregels die je gebruikt om meer overzicht te hebben zijn daarbij zeker een aanrader, en die kun je later dan weer verwijderen om de pagina in te korten voor gebruik.
Voorbeeld 2 - Structureren:
<H1> </H1>

<div>
   <p> </p>
   <p> </p>
   <p> </p>
</div>

<span> </span>

Voorbeeld 3 - de content toevoegen:

<H1>Ja hier is content! En dit is je Koptekst die wordt getoond in een grotere en vetgedrukte letter</H1>

<div>
   <p>Deze div sectie is een sectie met meerdere paragrafen (die bij CSS design een eigen sectie kan hebben).</p>
   <p>Sommige elementen zijn aanvullende tags binnen het hoofdelement.</p>
   <p>Met ShopFactory een webwinkel beginnen is de opmaat naar succes!</p>
</div>

<span>En denk er aan: double check altijd je eindtags.</span>

6. CSS styling kun je het beste intern doen. Hoewel CSS styling mogelijk is in externe, interne en inline (in de HTML pagina tags) vorm, kun je de HTML Toevoegen Functie het beste gebruiken via een Interne style sheet op de gehele pagina. Als je ervaring hebt met CSS begrijp je meteen waarom: het zorgt dat je sneller kunt werken en dat je code schoner blijft tijdens het bouwen van HTML en CSS voor je pagina’s. Er zijn heel veel sites waar je gratis online info kunt vinden over HTML en CSS. Zelfs gratis cursussen zijn er in overvloed. Onthoud daarbij dat er verschil is tussen externe, interne en inline CSS. Zorg dus dat je de info (en eventuele cursus) vindt over de juiste soort CSS. Het meest aan te raden is dus interne CSS styling.

7. Testen, hertesten en... dat is waar ook, hertesten. Heb je de code eenmaal naar je testwinkel gekopieerd (en nogmaals, het is belangrijk dat je dit in een testomgeving doet) dan komt de fase van testen en nog eens testen. Pas als het 100 % zeker is dat alles klopt, gebruik je het in je actieve online winkel.

ShopFactory biedt overigens ook maatwerk aan op het gebied van HTML en CSS codes. Wil je iets speciaals toevoegen aan je webwinkel, informeer dan eens vrijblijvend naar tarieven en mogelijkheden.