Elemente web utilizate corect pentru SEO

Ultima actualizare pe 16 ianuarie 2019

Majoritatea paginilor web sunt formate din 3 elemente de bază, HTML, CSS și JavaScript. Aceste blocuri constituie toate paginile web, indiferent de ce folosesc pentru a le reda. Fiecare element web are locul său corespunzător. Deși pot exista unele suprapuneri, utilizarea lor în mod intenționat ajută la crearea unei pagini optimizate pentru SEO. Așadar, cum ar trebui să fie utilizate aceste elemente și care sunt câteva modalități prin care pot fi utilizate abuziv?

Funcțiile elementului web de bază

Să comparăm o pagină web cu o casă. O casă are mai multe părți, fiecare la locul ei și servindu-și scopul. În pagina noastră web, HTML-ul seamănă cu elementele web structurale, fermele, pereții, fundația. HTML oferă un aspect important al conținutului paginii, subliniind ordinea acesteia și ce elemente apar unde.

CSS ar trebui să fie folosit pentru stil. Dacă rămânem cu ilustrația casei, aceasta ar fi culoarea pereților dvs., dulapurile dvs., ce tip de pardoseală aveți, etc. Culorile paginii dvs., dimensiunile fonturilor, aspectul real al paginii pot fi, de asemenea, definite în CSS. Dar stai, nu ar trebui aspectul să fie în HTML? Buna intrebare. În timp ce HTML-ul ar trebui să dispună elementele care vor fi pe pagina ta, CSS ar trebui să controleze modul în care aceste elemente vor fi afișate pe pagina respectivă. CSS este responsabil pentru o mare parte din capacitatea de răspuns a web-ului.

Acum că casa ta este construită, este timpul pentru unele utilități, cum ar fi electricitatea și apa curentă. JavaScript ar trebui să fie folosit pentru elementele interactive ale paginii dvs., cum ar fi modificarea elementelor când faceți clic, afișarea datelor și așa mai departe. JavaScript poate fi folosit pentru a schimba întregul aspect al paginii dvs., ceea ce funcționează bine dacă o adaptați unui anumit public sau caz de utilizare.

De ce le separați?

Deci, dacă puteți folosi HTML și CSS atât pentru aspect, cât și JavaScript și CSS pentru stil, de ce le separați? Când Google indexează pagina dvs., caută indicatori cheie despre ce este pagina dvs. și cum funcționează. Dacă utilizați unul dintre elemente în mod necorespunzător, puteți trimite semnale greșite și vă puteți afecta clasamentul. Acest lucru se poate întâmpla adesea atunci când lucrați cu editori CMS care stilează folosind presetări pentru elemente sau care rulează JavaScript inutil care încetinesc paginile pentru a face lucruri care ar putea fi făcute în CSS.

Deci, haideți să trecem în revistă câteva dintre abuzurile obișnuite.

Folosirea greșită a etichetelor de titlu

Una dintre cele mai frecvente abuzuri este utilizarea etichetelor de titlu pentru a stila elementele web. Etichetele titluri conturează subiectele principale pe o pagină, de la cea mai importantă etichetă H1 (fiecare pagină ar trebui să aibă) până la H6. Când obișnuiești să stilezi elemente, îi spui lui Google că acele cuvinte sunt despre ceea ce este vorba în pagina ta. Sau, ați putea folosi o etichetă de titlu greșită (cum ar fi folosirea unui h3 în loc de un h2 pentru că vă place mai mult dimensiunea fontului). În ambele cazuri, trimiteți un mesaj greșit. În schimb, ar trebui să utilizați CSS pentru a stila elementele la dimensiunea sau fontul potrivit pe care doriți.

Etichete duble H1

O altă problemă comună este apariția a 2 sau mai multe etichete H1 pe o pagină. Eticheta dvs. H1 ar trebui să fie ideea principală a paginii; ar trebui să spună tuturor (și fiecărui bot de crawling) care vizitează pagina despre ce este vorba și, ca atare, ar trebui să aveți doar unul. A avea două etichete H1 este ca și cum ai trimite două semnale diferite pe pagină. Unii oameni și chiar teme profesionale tind să-și pună logo-ul într-o etichetă H1. Așa că fii atent pentru a te asigura că există doar unul pe pagină.

Toate imaginile sunt imagini de fundal.

Nu este nimic în neregulă cu un fundal de imagine. Imaginile sunt atrăgătoare și pot adăuga multă valoare site-ului dvs. și pot determina utilizatorii să cumpere produse sau servicii. Dar toate imaginile tale nu ar trebui să fie imagini de fundal. Lucrând recent pe un site, am găsit CMS-ul transformând toate imaginile în imagini de fundal. Intenția aici este să le stilizezi și să le redimensionăm mai ușor. Deși poate să arate mai bine, pierzi o parte vitală a beneficiilor imaginilor de pe pagina ta: textul alternativ. Textul alternativ descrie ce se află în imagine și este folosit de cititorii de ecran pentru a identifica ce este într-o imagine. Făcând toate imaginile dvs. imagini de fundal, reduceți accesibilitatea paginii, ceea ce face mai dificilă pentru persoanele cu dizabilități și puteți primi un hit de la Google în clasamentele dvs.

Redarea CSS cu JavaScript

Servirea inutil de CSS prin JavaScript adaugă timpii de încărcare a paginilor. Este mult mai bine să legați fișierul CSS în antet în loc să îl treceți prin acel pas suplimentar. De asemenea, utilizarea JavaScript pentru animații simple sau efecte de trecere cu mouse-ul crește timpul de încărcare atunci când se poate face mult mai rapid prin CSS. Chiar și adăugarea de cadre JavaScript atunci când nu este necesar poate adăuga timpii de încărcare. Cum ar fi încărcarea jQuery pentru a anima un buton. În loc să scrieți JavaScript vanilla, sau și mai bine, folosind elementele de animație în CSS sau chiar o foaie de stil de animație CSS, se încarcă mult mai repede.

Stilizarea elementelor web în HTML

Stilizarea elementelor direct în fișierul HTML este un subiect controversat. Multe teme și pluginuri din WordPress și alte CMS-uri se bazează continuu pe suprascrierea foilor de stil și a altor plugin-uri. Acest lucru este de obicei privit ca o practică proastă. Unii creatori de conținut scriu stiluri direct în conținutul lor, deoarece doresc să-și schimbe stilurile temei. Care este problema cu asta? Adesea provoacă probleme CSS atunci când stilurile scrise direct în elementele HTML suprascriu stilurile din fișierul CSS. Pentru a evita acest lucru, în loc să îl scrieți direct în HTML, atribuiți elementelor web o clasă și adăugați o nouă foaie de stil la care adăugați stilurile. Acest lucru poate evita problemele cu foile aflate în conflict care vă pot rupe sau vă pot stila site-ul incorect.

Folosirea HTML pentru stilarea machetelor

Acesta este puțin complicat, deoarece temele cuplează adesea selectoarele CSS cu structura HTML. Acest lucru face ca o persoană să facă mai greu modificări în structura HTML fără a rupe stilurile vitale care fac pagina lizibilă și funcțională. De exemplu:

În exemplu, dacă modificați structura HTML-ului celui dintâi, veți pierde toate stilurile pentru acel element, deoarece era dependent de structură. În schimb, decuplarea stilului de structură, ca în cursurile ulterioare, vă va permite să vă reutilizați CSS chiar dacă modificați structura HTML.

O pagină formatată corect este o pagină bine optimizată.

Conținutul paginii dvs. este un factor important în clasament. La fel și utilizarea corectă a elementelor paginii web. Mai exact, HTML, CSS și JavaScript joacă un rol la fel de important în optimizarea SEO a paginii tale. Cunoscând rolul fiecărui element web și folosindu-l în mod corespunzător, îți poți crește clasamentul. Pur și simplu construiți o pagină care este atât funcțională, cât și atractivă. Dacă vă gândiți să schimbați temele pentru un CMS sau să adăugați CSS sau JavaScript personalizat în paginile dvs., aruncați o privire și asigurați-vă că utilizați corect elementele dvs. web.