Bună dimineața Dragi prieteni! Sa dovedit că săptămâna este dedicată o mai mare măsură, optimizarea și accelerarea paginii de aterizare de încărcare. Astăzi, să continuăm să "revărsați" în acest domeniu. Codul CSS de optimizare a coadă. Vă voi spune despre serviciul online pentru a optimiza mesele de stil.

Aceste servicii sunt destul de simple și funcționează în conformitate cu principiul:

"A introdus un cod ne-optimizat. A așteptat câteva secunde. Copiat cod optimizat "

După cum puteți vedea, este destul de simplu și nu scump, dar nu toată lumea găsesc timp să o facă. Și în zadar!

Optimizarea CSS online

În primul rând, trebuie înțeles că nu este necesar să se grăbească în extreme. Faptul este că, de exemplu, fluxurile și transferurile de șir măresc greutatea totală a paginii. După ce ați învățat despre el, puteți începe să le ștergeți pe toate. Ca rezultat, veți avea un cod CSS complet citit, dar optimizat.

Acest lucru este bun numai atunci când lucrați unul, iar masa de stiluri nu va fi niciodată editată, bine sau aproape niciodată. De când lucrați într-o echipă, o persoană care citește codul dvs. va fi foarte greu în ea pentru a face față.

Dar chiar dacă vă uitați la stilurile dvs. în șase luni, este puțin probabil ca să înțelegeți cu ușurință ceea ce este responsabil pentru ce.

Prin urmare, optimizăm, dar nu mergem nebun - acesta este primul.

Al doilea este că atunci când utilizați servicii care oferă codul de optimizare CSS, este important să înțelegem ce se întâmplă acolo și ceea ce este optimizat. Acum vă voi arăta câteva exemple.

De exemplu, culorile. De obicei, le specificăm în standardul RGB. Fundalul alb pentru element este setat după cum urmează.

Fundal: #ffffff;

Dar nu toată lumea știe că, dacă se repetă primele 3 valori, atunci puteți să le lăsați numai. De exemplu, deci:

Fundal: #fff; Context: # 000; Culoare: # 123;

Următorul lucru vine în minte este liniuță (padding și margine)

Padding: 10px 20px 10px 20px; / * în loc de * / padding: 10px 20px; Marja: 15px 20px 15px 20px; / * în loc de * / margine: 15px 20px;

De asemenea, optimizați codul CSS se poate datora locului de muncă abreviat:

Font: Bold 18px Verdana, Arial, Sans-Seif;

Font-dimensiune: 18px; Font-Family: Verdana, Arial, Sans-Seif; Greutate font: Bold;

După cum puteți vedea - o linie împotriva a trei. Astfel, uneori, este posibil să se reducă greutatea tabelului de stil cu 20 - 30%.

Cel de-al treilea merită amintit este că întotdeauna înainte de orice optimizare, fie că este vorba de imagini sau CSS, trebuie să faceți backup (în cazul unei erori neprevăzute sau altceva). Doar luați-vă o regulă întotdeauna faceți o copie înainte de editare.

Asta este. Du-te la serviciu.

Prezentare generală a serviciului pentru codul de optimizare CSS online.

Majoritatea oamenilor se bucură de site-uri populare pentru a optimiza codul CSS:

alexvaleev.ru/cssoptimizer.

css-school.ru/optimise.

Funcționalitatea este de fapt aceeași, simplă și de înțeles. Dar, după ce am analizat, am găsit atât avantajele și dezavantajele. Să ne uităm la unul dintre ei - CSS-SCHOOL.RU/OPTIMISER

În fereastra din stânga pentru a introduce codul CSS și în partea dreaptă pentru a configura parametrii de optimizare. Vom analiza mai multă fereastră.

Rata compresiei.

Pentru ca textul să rămână citit, este necesar să se pună un raport standard de compresie, în acest caz, fiecare proprietate nouă va fi scrisă dintr-o nouă linie. Dacă setați "înălțime" sau "maxim", atunci dimensiunea fișierului va fi mai mică, dar totul va fi înregistrat într-o singură linie. Nu este foarte convenabil pentru reduri suplimentare, dar dacă nu sunt, atunci puteți pune în siguranță "maxim".

Următoarea fereastră merge să specifice șabloanele sale de optimizare, dor de ea.

Apoi este fila care vă permite să alegeți, să combinați selectoarele cu aceleași proprietăți. Totul depinde de proiect și de sarcini. Dacă ați scris codul CSS strict într-o secvență specifică și aveți totul strict după prietenia mea, nu trebuie să alegeți combinația de selectori. Deci, va fi mai ușor să navigați în cod.

Optimizarea stilului. Concediu - "sigur"

Comprimarea culorilor și a proprietăților fontului sunt ceea ce ți-am spus. Deși cu comprimarea proprietăților fonturilor - problema. Nu optimizează codul așa cum ți-am spus mai sus.

Setările rămase nu provoacă întrebări. În general, am observat că toate serviciile de limbă rusesc optimizarea codului CSS online, suferă de "boală". Ele nu optimizează codul CSS3. Ceea ce ma făcut să abandonez complet astfel de optimizatori.

De exemplu, am introdus următorul cod:

Special scris cu rânduri, totul este detaliat, etc. Și mă așteptam să văd ceva similar:

H1 (Culoare: #fff; Padding: 20px 25px; Font: 700 18px Verdana, Arial, Sans-Seif)

Dar, din păcate, sa dovedit numai așa:

Șapte linii, în loc de cinci. Nu mi-a plăcut. Am vrut să găsesc și să vă spun despre un material mai bun. Așa cum înțeleg că unii nu sunt familiarizați cu tipurile de stiluri abreviate.

Și unele funcționalități ale serviciilor mi se părea exces, bine sau pseudofuncțional. Pentru a crea apariția "depanare" a resurselor. Ei bine, de ce ar trebui să verific caseta de lângă "Culori tăiate". Desigur, dacă am venit să-mi optimizez codul, atunci am nevoie de o descriere mai scurtă a tot ceea ce este posibil! (Opinia mea)

Deci, am continuat căutarea și am constatat că cea mai mare resursă care mi-a satisfăcut nevoile de a optimiza codul CSS. Acesta este Devilo.Us.

Serviciul cu adevărat uimitor, pe care vă pot recomanda în siguranță. Funcționalitatea este aceeași ca în site-urile anterioare. Dar acest lucru sa confruntat cu sarcina de 100%. Vedea:

După cum ați observat, procentul de compresie este de 43,3%, iar la ultimul site a fost de 25%. În octeți - a ieșit 58\u003e 37. Aici sunt o gaură. Dar când fișierul CSS are 3000 de linii, această optimizare poate reduce de două ori greutatea documentului.

Desigur, în timp, veți învăța cum să scrieți la un cod CSS optimizat, iar astfel de servicii veți avea nevoie de mai mult și mai puțin, dar nu interferează cu dvs. Cel puțin pentru prezența unor lacune și linii inutile.

Și astăzi - toți. Pe curând.

Optimizați codul HTML și foile de stil cascading (CSS) trebuie să accelereze procesul de încărcare a site-ului și a conținutului plasat pe acesta. Economisirea timpului și a traficului, în general, o perioadă lungă de timp după optimizare, se va dovedi a fi semnificativă, chiar dacă schimbările de viteză nu vor fi foarte vizibile.

Optimizarea codului HTML

Pentru ca codul HTML să ajute la descărcarea rapidă a site-ului, trebuie să respecte mai multe condiții:

• Să fie simplă și informativă. După ce ați verificat valabilitatea, trebuie să corectați erorile astfel încât roboții să fie mai ușor de analizat. Codul trebuie să reprezinte în mod clar structura paginii.
• Principalele componente ale paginilor, cum ar fi titlurile, indicatoarele, blocurile de informații trebuie să fie ușor de determinat.
• Codul de exceptare din informațiile suplimentare, făcându-le în fișiere separate (de exemplu, puteți suporta CSS și JS), veți crește viteza de descărcare, care simplifică și lucrarea de roboți.

După ce a realizat îndeplinirea acestor condiții, site-ul poate fi făcut mai rapid, convenabil și crește eficiența indexării roboților de motoare de căutare.

Reducerea codului CSS și optimizarea

Puteți face codul site-ului mai ușor prin reducerea volumului său. Pentru aceasta trebuie să efectuați mai multe operațiuni.

În primul rând, ar trebui evitați tehnologii Flash, JavaScript, cadre, textul afișat prin imagine. Toate elementele, care poate, ar trebui să fie aranjate în fișiere separate, externe (de exemplu, CSS și JS, așa cum sa menționat deja mai sus). Va ajuta la optimizarea pluginurilor speciale ale codului. De exemplu, puteți instala pluginul de autoptimizare, care optimizează automat codul HTML, CSS, JS (dacă puneți căpușe corespunzătoare). Trebuie să configurați navigarea competentă și convenabilă prin intermediul site-ului, care va fi înțeleasă de utilizatori și recunoscută corect de motoarele de căutare. Acest lucru va crește viteza, calitatea descărcării și indexarea site-ului.

În ceea ce privește optimizarea CSS, aceasta se poate face în mod independent sau încredințată unei resurse sau unui program special. Optimizarea manuală este un proces consumator de timp și lung, în plus, puteți sări peste unele erori. Un program sau un serviciu de optimizare va fi mai bine eliminat de deficiențe, dar poate perturba unele funcții care au lucrat pe site și după verificare, conținutul nu poate fi afișat, deci trebuie să fie corectate.

Unele modalități de îmbunătățire a structurii CSS în modul manual:

• Îndepărtați golurile și rândurile inutile de șiruri de caractere care suprasolicite fișierul CSS și fac dificilă funcționarea roboților;
• Prescrieți proprietățile generalizării în loc de mai multe ori repetate comenzi similare;
• Utilizați descrieri laconice, ușor de înțeles în comentarii;
• Fonturi neobișnuite pentru a prescrie stiluri, nu imagini;
• Pentru imaginile creează Alt și titlul (diferite pentru fiecare imagine), astfel încât conținutul lor să fie recunoscut de boturile motoarelor de căutare;
• Aplicați la anteturile H1 Instrumente - și, în plus, acestea sunt recunoscute corect la indexare;
• Prescrie numai acele cuvinte cheie care sunt utilizate pe pagină pentru a minimiza numărul acestora;
• Utilizați o varietate de meta-etichete scurte.

CSS și optimizatoare HTML

Este convenabil și ușor optimizat direct în browser utilizând servicii speciale, de exemplu:

• CleanCss.com;
• CSS Optimizator;
• Compresor CSS;
• Cy-pr.com;
• pluginul de autoptimizare.

Specialiștii din SEO și sunt sfătuiți să utilizați CleanCss.com, deoarece vă permite să alegeți un raport de compresie de la scăzut la cel mai înalt sau să ridicați setările individuale. După cele mai ridicate și cele mai înalte niveluri de optimizare, codul site-ului are un aspect practic necitit, iar schimbările vor fi aproape imposibil de a face schimbări. Prin urmare, pentru a începe, utilizați optimizarea standard. Puteți selecta anumite moduri de compresie a conținutului sau puteți optimiza parametrii individuali: compresia fonturilor, imaginilor, îndepărtarea spațiilor.

Resursa CY-PR.com are, de asemenea, un instrument similar pentru optimizare, care facilitează structura CSS cu 25-30%, dar nu există posibilitatea de a crea un fișier cu codul după efectuarea operațiunii.

Restul serviciilor poate schimba radical codul astfel încât unele funcții pe site să nu mai funcționeze. Prin urmare, cu ajutorul lor, este mai bine să se producă doar schimbări locale ale parametrilor specifici ai site-ului.

După optimizare, trebuie să verificați performanța site-ului, afișând corect proiectarea, viteza de descărcare. Situația este situația în care opțiunile de pagini și site-urile utilizatorului sunt încărcate nu mai mult de 3-5 secunde.

Pentru a verifica gradul de optimizare și pentru a înțelege cât de eficient este înregistrat codul HTML, puteți utiliza astfel de servicii ca:

• optimizare.com;
• Portalul SEO-Cheklist;
• pluginul Firebug.

Aceste instrumente vor ajuta la verificarea dacă totul se face pentru a reduce cantitatea de cod HTML și pentru a-și îmbunătăți structura. La resursa SEO-Check List, puteți verifica lista, care a fost făcută deja pentru a optimiza și ceea ce nu este încă și setați marca pe afacerea perfectă.

Validare

Puteți verifica codul site-ului pentru erorile utilizând serviciile validator validator. Verificarea eficientă a codului este efectuată utilizând validator.w3c.org

Dacă sistemul din primul cec este dat mai multe erori semi-pioși, nu fi supărat. După fixarea unui anumit neajuns, puteți rula din nou testul și erorile vor deveni mult mai mici, deoarece un dezavantaj implică pe alții și vor dispărea când este corectată.

Site-ul cu un cod corectat și optimizat are mai multe șanse de poziții înalte în emiterea decât o resursă cu un cod HTML supraîncărcat în care sunt prezente erorile.

Nota: Versiunea adaptivă a site-ului este activată, care se ajustează automat la dimensiunea mică a browserului dvs. și se ascunde câteva detalii ale site-ului pentru citire. Vizionarea fericită!

Buna ziua. Astăzi vom continua subiectul optimizarea aspectului site-ului HTMLcare a început în articol despre.

Să găsim mai întâi de ce este important și apoi să ne întoarcem la sfaturi practice.

Format de site-ul Web realizat corect (sudat):

• Poate accelera în mod semnificativ încărcarea paginii (mai ales dacă înainte de a începe totul);
• Va simplifica lovirea paginilor dvs. în Utilitarul de căutare (nu numai din cauza descărcării rapide);
• Va crește șansele de browser complet, adică același afișaj al site-ului în toate browserele;
• Acesta va oferi o mică garanție că, după expirarea celor mai mulți ani, nu va trebui să vă relocați site-urile pentru browsere noi (sau pentru versiunile noi ale browserelor vechi).

Îți sugerez să merg de la lucruri simple la mai interesant.

Partea 1. Observați standardele HTML și CSS

Doar în cazul în care, voi spune că, în plus față de HTML și CSS, putem optimiza în continuare JS și PHP părți ale site-urilor noastre, care sunt mai sensibile la resurse și încetinesc semnificativ viteza de încărcare a paginii. Cu toate acestea, în plus față de viteza de descărcare a paginilor, componentele JS și PHP nu afectează promovarea site-ului (doar pentru a nu-l sparge), spre deosebire de marcajul HTML, adică, șablonul site-ului.

1.1 Închideți întotdeauna etichetele.

Inclusiv cele care nu sunt neapărat aproape, chiar dacă sunteți un standard Hater XHTML, este mai bine să adere la această regulă. Exemplu:

• Punct de listă
• Punct de listă
• Punct de listă

Fiecare etichetă Li este închisă, deși nu este necesară.

1.2 Respectați cuibarea corectă a etichetei.

Conform principiului: prima deschisă - cea din urmă închisă. Exemplu ca nu este corect:

Cât de corectă:

1.3 Nu descrie niciodată CSS și JS în interiorul aspectului HTML și atributele etichetelor.

Nu! Cu alte cuvinte, uitați de existența stilul de atribut și tag-ul stil.:

text

Descrieți toate stilurile din fișier separat.Css.

Puteți utiliza atributul de stil, trageți-l numai dinamic cu un JavaScript conform unor acțiuni. De exemplu, dacă faceți clic pe imagine, trebuie să modificați culoarea întregului text de pe pagină, apoi numai în acest caz puteți crea dinamic atributul de stil cu valorile dorite pentru eticheta dorită (în acest exemplu pentru corp). De ce? Deoarece roboții de căutare nu îl vor vedea oricum și nimeni (inclusiv utilizatorii) nu încărcați un cod excesiv, deoarece acțiunea are loc după ce pagina este plină.

Cu toate acestea, în astfel de cazuri, aș recomanda încă adăugarea unei clase CSS pre-descrise eticheta dorită, mai degrabă decât să adăugați atributul stilului. Acest lucru este cel puțin mai convenabil pentru editarea ulterioară.

Tot același lucru este adevărat pentru JS, întregul cod JS ar trebui să fie în fișier separat., nu în interiorul aspectului sau mai rău - printre atributele de etichete.

1.4 Uitați de blocarea capacelor și a literelor majuscule.

Scrieți toate etichetele, atributele și literele lor de valori (mici), același lucru se aplică meselor de stil CSS.

Aproape totul descris mai sus este în specificația oficială a HTML și CSS și se referă la valabilitatea documentului.

Astfel, ar trebui să menționez că lipirea standardelor W3C, adică prin respectarea valabilității documentului - obțineți următoarele avantaje SEO:

• Codul curat și, în consecință, încrederea suplimentară a motoarelor de căutare pe site-ul dvs.;
• Încărcarea accelerată a paginii, deoarece browserul nu trebuie să-și petreacă timpul pe depanarea unui document nevalid.

Cu toate acestea, nu merită să împrumuți validitatea, ar trebui să încercați să aderați la acesta, dar nu în detrimentul restului (timp, funcționalitate etc.).

Partea 2. Accelerați încărcarea paginii - unul dintre factorii de rang

2.1 Indicați dimensiunile actuale ale imaginilor.

Iată esența a două lucruri:

• Asigurați-vă că specificați atributele lăţime și Înălţime Pentru etichetă img.: Acest lucru va accelera încărcarea imaginilor, deoarece browserul va ști în prealabil ce dimensiune trebuie afișată.
• Asigurați-vă că introduceți imaginea de aceeași dimensiune, care specificată în atribute.

Dacă aveți nevoie de o imagine mai mare decât aveți nevoie, atunci nu aveți nevoie să economisiți timp cu privire la faptul că acesta poate fi redus cu ajutorul HTML sau CSS. Fiți amabili să vă petreceți timp, să mergeți la Photoshop sau la analogii săi și să reduceți imaginea la dimensiunile pe care doriți să le vedeți pe site, poate accelera în mod evident încărcarea paginii.

2.2 Utilizați CSS3 în loc de JS.

JS poate încetini în mod semnificativ descărcarea paginilor dvs. și, de asemenea, continuați să creați o încărcare după încărcarea paginii (o varietate de efecte, tipul de șir de rulare și alte lucruri dinamice), care poate frânge lucrarea browserului în timp ce fila cu fila Site-ul va fi deschis.

Astăzi, multe efecte frumoase și interesante pot fi realizate numai prin utilizarea proprietăților CSS3 (de exemplu, tranziția, umbra de box, raza de frontieră, opacitatea, transformarea, dimensiunea fundalului) și pricepută.

Toate cele de mai sus pot fi rezumate de o singură frază: oriunde puteți (suspectați cum) înlocuiți JS pe CSS3, utilizați CSS3 fără a fi informat! Pentru a căuta astfel de fragmente, vă sfătuiesc să explorați noile capabilități ale CSS3.

2.3 Mai puțin Photoshop - mai mult CSS 3.

Acest motto a folosit mult timp mulți webmasteri. Puteți crea butoane frumoase și elemente de proiectare cu un gradient neted, colțuri netezite, umbre (interne și externe) și un text frumos de sus datorită unui CSS. Oriunde puteți înlocui elementele de design grafic pe codul CSS - faceți-o! Exemplu:

În plus față de proprietățile CSS3 enumerate mai sus, este disponibil și formatul de descriere a culorii RGBA.

Pentru a crea un gradient încrucișat pe CSS, puteți utiliza servicii gratuite, cum ar fi acest Colorzilla.com.

2.4 Combinați imaginile în sprite CSS.

Aceste imagini pe care nu le-am putut trage cu CSS 3 ar trebui să fie unite într-un singur (în mod ideal). Acest lucru este necesar pentru a reduce numărul de solicitări către server la încărcarea paginii. Acest element poate reduce semnificativ sarcina de pe serverul dvs. web și, în același timp, și accelerează încărcarea paginii, imediat 2 Hare!

Pentru a înțelege mai bine despre ce vorbim, aruncăm o privire la CSS-ul meu sprite:

Nu e rău, nu-i așa? Imaginea de fundal este una pe toate elementele, o mutăm doar și înlocuim în fundalul unui anumit element partea dorită a imaginii datorită proprietății poziției de fundal, de exemplu, după cum urmează:

# Subs, # stânga, .mail, .Rss, .vk (fundal: URL (/ images/1.png) No-repetat) #subs (poziția de fundal: -28px -120px;) #Left (poziția de fundal: -35px -20px;) .Mail (poziția de fundal: -43px -50px;) .Rss (poziția de fundal: -12px -8px;) .vk (poziția de fundal: -34px -56px;)

Va fi mai bine să faceți un sprite manual folosind Photoshop, dar vă poate părea suficientă dificultate, astfel încât să puteți utiliza servicii gratuite care vor face totul pentru dvs., inclusiv codul CSS pentru dvs. Îmi place mai mult serviciul spiteme. Dar nu voi fi obosit să repet: Este întotdeauna mai bine să o faceți manual, în special, astfel încât sprite poate funcționa semnificativ compact (în dimensiune și, prin urmare, în greutate), ceea ce înseamnă mai eficient.

2.5 Plasați corect fișierele JS.

Toate fișierele conectate ale fișierelor JS trebuie să fie amplasate cât mai puțin posibil în cod, nu este necesar să le conectați în interiorul "capului" site-ului (între etichetele capului) - încetinește semnificativ încărcarea paginii. Cea mai bună opțiune va conecta fișierele JS în fața etichetei de închidere a corpului, adică în partea de jos a paginii, nu există loc de mai jos.

Și un sfat mai util: În mod ideal, toate fișierele JS trebuie să fie combinate într-un singur, care este, am tăiat (CTRL + X) din toate fișierele și copiați-l la unul, astfel încât în \u200b\u200bcele din urmă vă aflați în partea de jos , în fața etichetei de închidere a corpului conectat un singur fișier:

...

Se poate accelera considerabil descărcarea paginilor dvs., deoarece va reduce numărul de solicitări către serverul dvs. web. Locația fișierului JS din partea de jos a paginii va amâna descărcarea și prelucrarea acestuia, care va accelera ieșirea părții principale a paginii. Și nu uitați să tăiați (faceți o comprimare) fișierul dvs. de capăt JS.

2.6 Plasați fișierele CSS corect.

Fișierul CSS, care, apropo, ar trebui să fie, de asemenea, un singur (din aceleași motive), trebuie să postați în codul dimpotrivă, cât mai mare posibil!

Dar nu aveți nevoie să o postați mai presus de etichetă, este cel mai important pentru SEO și să îl lăsați mai bine la vârf. Personal, eu conectez fișierul CSS imediat după eticheta de titlu și toate etichetele Meta, și după ce vă puteți conecta, de exemplu, Favon (pictograma site-ului în fila browserului) și așa mai departe.

Partea 3. Layout aspect SEO dreapta

3.1 Codul de navigare a site-ului.

Toate navigarea pe site (meniu, pâine, lista de produse în magazine online și așa mai departe) trebuie implementate folosind non-fumători (etichete UL, Li) și nu folosiți Tags Div și a.

În primul rând, o astfel de scriere a meniului este considerată un ton bun, în al doilea rând, motoarele de căutare vor fi mai ușor de dat seama, unde și cum aveți navigație, deoarece sunt obișnuiți cu desenele cu liste nerealizate și nu blocuri cu legături enumerate fără griji . Exemplu ca fiind corect:

• elementul de meniu 1.
• elementul de meniu 2.
• elementul de meniu 3.

3.1.1 Subtilitățile meniului orizontal.

Dacă aveți nevoie să implementați un meniu orizontal, atunci vreau să vă dau 2 sfaturi gratuite:

• Nu folosiți niciodată proprietatea CSS a flotorului (plutitor, îi determină să curgă în jurul acesteia cu alte elemente), să utilizeze următorul cod în loc de acesta: Ul.menu Li (afișaj: bloc-blocat;)
• În cod, nu este necesar să începeți fiecare element de meniu nou dintr-o linie nouă, ca în exemplul de mai sus. Este mai bine să scrieți totul într-o singură linie și să ajustați distanța dintre elementele cu margine.. Exemplu:

• elementul de meniu 1.
• elementul de meniu 2.
• elementul de meniu 3.

Transferul liniei în HTML este egal cu spațiul, care este, dacă setați Introducerea codului între elementele de meniu, atunci utilizatorii vor apărea pe pagina site-ului între ele. Ce este rău aici? Fiecare browser poate avea o lățime spațială diferită, iar unii o pot ignora deloc. Ca rezultat, site-ul dvs. va arăta peste tot în moduri diferite și, uneori, (pe propria experiență), poate chiar să denatureze designul.

Prin urmare, am propria mea regulă atunci când minți: între oricare (nu numai în meniu) inline-bloc Elementele nu ar trebui să fie lacune și linii de șiruri de caractere! În același timp, este ușor, dar reduce greutatea totală a paginilor dvs., deoarece am scris: 1 simbol (inclusiv spații și transferuri de șir) \u003d +1 octeți în greutate din paginile dvs.

3.2 Atributul Alt pentru imagini

Asigurați-vă că specificați atributul ALT în eticheta IMG:

În primul rând, este necesar dacă doriți să verificați verificarea valabilității (în XHTML exact, pe cheltuiala HTML nu-mi amintesc, oricum, trebuie să fiți întotdeauna egală cu standardele stricte XHTML), în al doilea rând, dacă imaginea nu este încărcată, Apoi, utilizatorul în loc de imagini cel puțin un text scris pe ALT va fi afișat (despre el). În al treilea rând, va crește șansa de a vă atinge imaginile în căutarea imaginilor de la Google și Yandex, care poate atrage vizitatori suplimentari.

Și ultima: cuvintele specificate în atributul ALT sunt luate în considerare atunci când clasamentul site-ului dvs., ceea ce înseamnă că pot fi plasate cuvinte cheie, dar în nici un caz nu exagerați, mai bine pentru oameni, doar ocazional introduceți cuvinte cheie acolo.

Dacă toate atributele dvs. Alt sunt completate cu un singur cuvânt cheie, cu siguranță vom aștepta penalități.

3.3 Utilizați anteturile HTML H1-H6 la maxim.

h1. - Acesta este cel mai mare și principal titlu, acesta ar trebui să fie numele paginii dvs. curente. In timp ce h6. Cel mai mic și cel mai puțin semnificativ antet. Mulți experți SEO recomandă cu tărie utilizarea antetului H1 doar 1 timp pe pagină și este logic. Titlurile rămase pot folosi de orice număr de ori, cel mai important cu mintea.

Prezența anteturilor HTML în aspectul site-ului dvs. este deja un plus pentru promovarea căutării, iar aranjamentul priceput poate crește dublu rezultatul. Acesta este ceea ce scrie Yandex despre asta.

Paginile decorate și structurate cu atenție sunt cele mai atractive pentru utilizator, acestea sunt mult mai ușor de găsit informațiile de care aveți nevoie.

Atunci când se clasifică, nu numai conformitatea formală a textului cererii, plinătatea informațiilor prezentate și relevanța acesteia, dar și modul în care este structurată și decorată.

Cred că ați fost deja convins de importanța anteturilor atunci când puneți un aspect, numai nu trebuie să încercați să încheiați toate cuvintele cheie posibile în titluri (deși uneori fac acest lucru) a funcționat înainte, și acum nu va trece. Titlurile trebuie utilizate pentru confortul navigației de utilizator și nu pentru a manipula relevanța.

Personal, am încheiat toate subtitrările din cadrul articolului din h2., subtitrari de subtitrări în h3.și subparagraful mic h4.. În partea de jos a fiecărui articol există o formă de abonament și un bloc cu butoanele rețelelor sociale, am încheiat numele lor în h6.. În coloana dreaptă a numelor site-urilor, numele sunt încheiate h5..

După cum puteți vedea, folosesc anteturile HTML la maxim și logica de pe aparat sugerează să expună totul de sus în jos. Deși pentru Idyll complet, a fost necesar să se schimbe titlurile h6. și h5.Dar ar fi prea pedantic :) și nu atât de important.

3.4 Link-uri rapide către site.

Continuând subiectul antetelor, vreau să spun despre importanța h1. Și cum să o faci în mod corespunzător. În primul rând, vă recomandăm cu tărie să o utilizați doar o dată pe pagină! Călătorii pentru asta în CMS. În al doilea rând, H1 are un mare efect asupra SEO (în al doilea rând după titlu), oricum, dar vă sfătuiesc să duplicați textul din titlu în H1.

Yandex scrie:

Pentru a ajuta Yandex să aloce corect link-uri rapide, text în etichetă

• Categoria 1.
• Categoria 2.
• Categoria 2.1.
• Categoria 2.2.
• Categoria 3.