Straightfor SEO pentru Webdesigners

Îngrijorat de mulți webdesigneri, SEO pare adesea ca o durere de cap mai bine lăsată la coderi sau analiști de marketing, dar nu există nici un motiv pentru a sta în jurul valorii de pe margine. În acest tutorial rapid vom construi un șablon HTML simplu în timp ce vom stabili câteva bune practici care pot influența SEO site-ul dvs. direct de la cuvântul merge.


Introducere

SEO sau optimizarea motorului de căutare este modul în care ați creat site-ul dvs. să fie clasat mai mult de motoarele de căutare și să influențeze modul în care informațiile sunt afișate în rezultatele căutării. Au dispărut zilele în care a cumpărat Google Adwords a fost cea mai bună modalitate de a apărea în partea de sus a unei interogări de căutare, mai ales că mulți agenți de publicitate nu sunt relevanți pentru rezultatele căutării, ceea ce a dus la faptul că utilizatorii nu au mai multă încredere în legăturile sponsorizate. AdWords va reveni, dar există modalități de a influența astăzi motorul dvs. de căutare.

În primul rând, trebuie să înțelegem că crawlerele motoarelor de căutare, în special păianjenul Google, citesc sursa paginilor dvs. făcând ipoteze în funcție de conținut și marcare. Logica ierarhiei HTML este esențială pentru determinarea importanței conținutului, dar buzz-ul pe internet ne spune că Google începe, de asemenea, să își bazeze rezultatele pe prezența dvs. socială, precum și pe pagina dvs. Asta-i drept, puteți uita despre Facebook și Twitter ca instrumente simple de joc, ei ar putea ajuta sau să vă rupă site-ul.


Jumping spider de Rundstedt B. Rovillos, pe Flickr

Pasul 1: Structura HTML de bază

Să începem prin a privi câteva marcări HTML fundamentale:

     SEO Webdesign tutorial     

Această structură respectă standardele stabilite, astfel încât browserele să știe ce să facă din pagină. În partea de sus a codului nostru stabilim ce fel de document este și în ce limbă este scris. Între noi tag-uri, informăm browserul că folosim setul standard utf-8. Apoi, avem titlul site-ului nostru și am adăugat o declarație condiționată pentru a încărca shiv HTML5 care compensează problemele de compatibilitate cu IE 9. etichetele, desigur, stabiliți unde va apărea conținutul paginii noastre.

Dreptul ușor și direct? Dar, în realitate, am lăsat deja informații importante.


Pasul 2: Adăugarea de etichete Meta

Să ne întoarcem la începutul codului nostru și să adăugăm următoarea linie de cod imediat după deschidere etichetă:

 

Această linie spune motoarelor de căutare ce trebuie afișate în rezultatele căutării chiar sub titlul paginii. În acest caz, rezultatele pe Google ar putea fi prezentate ca atare:

Notă: Un punct care este foarte important și este adesea trecute cu vederea este că trebuie să adaptați atât titlu și meta etichete a fiecărei pagini din site-ul dvs. în mod specific pentru conținutul fiecărei pagini. Pentru titlu poate fi la fel de simplu ca Tutorial SEO Webdesign: pagina HTML.

Codul din cadrul nostru tag-urile arată acum:

    SEO Webdesign tutorial  

Notă: Pentru informații despre motivul pentru care am neglijat includerea cuvintelor cheie meta, consultați discuția din comentarii.


Pasul 3: Legarea la CSS și JS

Comună în aproape toate paginile web sunt linkuri către fișiere CSS și cod Javascript sau biblioteci. Dacă vom urma sugestiile de codare Google, ar trebui să încercăm să păstrăm la minimum întrebările noastre externe (solicitări HTTP), astfel încât să păstrăm activele CSS și Javascript la un singur fișier, dacă este posibil. Să adăugăm în șablonul nostru cereri generice pentru fișierele externe.

Mai întâi, vom conecta la foaia de stiluri externe prin adăugarea următorului cod chiar înainte de tag-ul de închidere:

 

Apoi vom face același lucru pentru fișierul Javascript adăugând următoarea linie:

 

Adăugăm javascriptul la sfârșitul paginii noastre, chiar înainte de tag-ul de închidere, astfel încât codul nostru se termină după cum urmează:

      SEO Webdesign tutorial       

De ce am adăugat interogarea Javascript la sfârșitul paginii? Două motive:

  • Acest lucru permite încărcarea directă a conținutului paginii, în loc să aștepte ca Javascript să fie procesat.
  • De asemenea, ajută motoarele de căutare în citirea conținutului paginii. De ce? Dacă gândim logic, crawlerul începe în partea de sus a paginii și rulează codul. Dacă Javascript-ul este adăugat în partea de sus a paginii, motorul de căutare trece prin Javascript înainte de a ajunge la conținutul paginii dvs. Este înteles că vrem ca motorul de căutare să meargă direct la conținutul nostru pentru o indexare mai eficientă. Orice referință Javascript, atât externă, cât și internă, trebuie adăugată la sfârșitul paginii.

O altă regulă de reținut este că, dacă aveți mai mult de un fișier CSS sau Javascript, urmați mereu regulile ierarhiei și puneți mai întâi fișierul cel mai important, adăugând restul consecutiv. La urma urmei, nu puteți utiliza o funcție incredibilă de Javascript care utilizează biblioteca jQuery, dacă nu mai apelați mai întâi biblioteca jQuery.


Pasul 4: Finalizarea modelului nostru

Aproape că am terminat șablonul, dar am putea să adăugăm conținut. Odată cu introducerea HTML5 a face site-ul dvs. SEO prietenos a devenit mult mai ușor; semantica adecvată oferă motoarelor de căutare instrucțiuni foarte specifice cu privire la ce să găsească și unde să o găsească. Să adăugăm câteva elemente comune pe care le vom folosi, probabil, în majoritatea site-urilor pe care le proiectăm.

Chiar sub tag și înainte de tag, să adăugăm următoarele rânduri de cod:

  

Numele site-ului

Antetul articolului

Un text simplu care ne ajută

Citeste mai mult?

Drepturi de autor

Codul nostru ar trebui să apară acum după cum urmează:

      SEO Webdesign tutorial      

Numele site-ului

Antetul articolului

Un text simplu care ne ajută

Citeste mai mult?

Drepturi de autor

Unde am fi folosit o dată pe containere div, am implementat acum o marcare descriptivă. ,