Aplicații web progresive (PWA) și optimizare pentru motoarele de căutare (SEO)

Progressive Web App (PWA) este un software de aplicație furnizat prin web. Este construit folosind tehnologii web standard, cum ar fi HTML, CSS, JavaScript etc. PWA-urile sunt utilizate în mod obișnuit pentru a crește rata de conversie și traficul site-ului web. Din 2021, PWA sunt acceptate (în totalitate sau parțial) de Google Chrome, Apple Safari, Firefox pentru Android și Microsoft Edge.

Fiind o dezvoltare relativ nouă, optimizarea PWA încă conduce la rezultate pozitive în majoritatea cazurilor și are statistici uimitoare. PWA Stats raportează în mod constant despre beneficiile obținute de serviciile care au implementat PWA.

În general, conform raportului TOP 30 PWA, „rata medie de conversie pentru aplicațiile web progresive a fost cu 36% mai mare decât cea pentru aplicațiile mobile native”.

PWA sunt de mare ajutor atunci când vine vorba de marketing online. De aceea sunt populare printre mulțimea SEO. Cu toate acestea, la fel ca React și SEO, combinația PWA SEO are dificultățile sale. În acest articol, vom face lumină asupra modului în care PWA funcționează cu SEO.

Exemple și principalele beneficii ale PWA

Orice serviciu web poate fi un PWA. Există trei cerințe principale pentru asta:

1. Funcționează sub HTTPS.
2. Include un manifest al aplicației web.
3. Implementează un lucrător de service.

Scopul principal al PWA este de a oferi funcționalități superioare pentru fiecare utilizator. Iată lista principalelor avantaje oferite de PWA:

1. PWA aduce noi oportunități și creștere literalmente oricărei afaceri. Combină cele mai bune calități de aplicație și web, fiind receptiv și capabil să funcționeze pe orice dispozitiv și nu necesită neapărat o rețea rapidă.
2. Securitatea stratului de transport îl face sigur.
3. Service worker (un script special pe care browserul dvs. îl rulează în fundal) permite PWA-urilor să funcționeze în modul offline.

Să ne uităm la câteva dintre cele mai bune exemple de adoptare a PWA:

Recomandat pentru dvs.: Cele mai populare cadre pentru construirea de aplicații web progresive (PWA).

1. Starbucks

Sistemul de comandă PWA al Starbucks este simplu și ușor de utilizat. Arată exact ca aplicația lor nativă, dar are capacitatea de a rula offline atunci când un utilizator răsfoiește meniul și adaugă articole în coș. Cel mai bun beneficiu al unei astfel de soluții este faptul că PWA este de aproape două ori mai mic decât aplicația standard Starbucks. Din acest motiv, compania a crescut semnificativ numărul de utilizatori web.

2. Pinterest

După ce s-a descoperit că doar 1% dintre utilizatorii de telefonie mobilă Pinterest descarcă o aplicație și se conectează din cauza performanței sale slabe, aplicația mobilă a fost reconstruită pe baza tehnologiei PWA. Datorită acestui fapt, indicatori precum timpul petrecut, veniturile din reclame și angajamentele de bază au crescut cu până la 40% – 60%.

3. Uber

Aplicația web Uber a fost reconstruită ca PWA cu scopul de a oferi servicii rapide pe rețelele de viteză redusă și pe smartphone-uri vechi care nu sunt compatibile cu aplicația nativă Uber. Datorită acestui fapt, o aplicație de bază super-ușoară se încarcă în aproximativ 3 secunde pe rețelele 2G.

Importanța SEO

SEO se referă la optimizarea site-ului dvs. pentru motoarele de căutare (SE). Scopul său principal este de a îmbunătăți clasarea site-ului în rezultatele căutării și de a atrage vizitatorii. Se bazează pe algoritmi SE și folosește cuvinte cheie pentru a ajuta motoarele de căutare să arate conținut relevant și să atragă un public vizat către site-uri web. Acesta este modul în care SEO poate aduce trafic organic pe site-ul dvs., care este cel mai bun de un fel. Spre deosebire de traficul direct și plătit, acesta poate transforma majoritatea vizitatorilor tăi în clienți și clienți.

SEO pentru aplicații web progresive: care este problema?

În ciuda tuturor beneficiilor oferite de PWA, mulți proprietari de site-uri web încă ezită să implementeze tehnologia. Există două motive principale pentru aceasta:

1. Teama de a schimba sistemul existent care deja funcționează bine.
2. Înțelegerea slabă a modului în care PWA funcționează cu SEO.

După cum a afirmat John Mueller (analist la Google), „PWA-urile în prezent nu au niciun avantaj în Căutarea Google”.

Multe PWA sunt construite folosind cadre JS care nu sunt cunoscute pentru natura lor prietenoasă cu SEO.

Deci, spre deosebire de site-urile web tradiționale bazate pe HTML, PWA-urile dependente de JavaScript sunt provocatoare pentru SEO. De aceea nu oferă niciun avantaj în ceea ce privește căutarea. Cu toate acestea, contrar credinței populare, acest lucru nu înseamnă că aplicațiile web progresive nu pot fi indexate de motoarele de căutare. Trebuie doar să folosești diferite tehnici pentru asta.

Redare pe partea serverului și randare pe partea clientului

Majoritatea site-urilor web folosesc server-Side Rendering (SSR). Este cea mai simplă abordare în care pagina este redată pe partea serverului în loc să fie redată în browser. Cu toate acestea, întregul HTML se încarcă de fiecare dată când un utilizator solicită pagina, ceea ce poate fi problematic atunci când conexiunea la internet nu este suficient de stabilă sau de rapidă.

PWA-urile bazate pe JavaScript folosesc randarea client-side (CSR), unde conținutul este redat în browserul clientului. Nu trimite o pagină HTML întreagă de fiecare dată când un utilizator solicită pagina. Fișierul JavaScript afișează doar partea necesară a informațiilor din pagină din browserul clientului. De aceea pagina se încarcă mai repede chiar și cu o conexiune slabă la internet.

Cu toate acestea, de ce mulți proprietari de site-uri refuză în continuare să folosească CSR? Problema este robotul Google. Poate citi conținutul site-ului web în codul care este complet vizibil în documentul HTML. CSR, în cazul său, se bazează pe deplin pe capacitatea unui motor de căutare de a procesa JavaScript. De aceea, există opinia că aplicațiile CSR nu pot fi indexate. Cu toate acestea, de fapt, dintre toate motoarele de căutare, Google este cel mai bun la procesarea JavaScript.

Cu toate acestea, acest lucru încă nu înseamnă că problema cu JavaScript și SEO este rezolvată: Google admite că procesarea JS nu este perfectă. Și anume, procesul de accesare cu crawlere a unei pagini bazate pe JavaScript durează mai mult decât cel al unei pagini HTML. De fapt, aceasta înseamnă că va trebui să așteptați mai mult timp pentru ca conținutul JavaScript să apară în paginile cu rezultate ale motorului de căutare.

Toate acestea fac dificil pentru proprietarii de site-uri să îmbunătățească experiența de utilizare a vizitatorilor lor și să își optimizeze conținutul pentru motoarele de căutare.

Cum să implementați PWA fără a vă pierde optimizarea pentru motoarele de căutare?

S-ar putea să vă placă: Magento PWA Studio: Instrumentul pentru aplicații web progresive pentru Magento!

1. Aplicați randarea dinamică

Redarea dinamică arată versiuni diferite de conținut către diferite surse. Vizitatorul primește o versiune CSR, iar crawlerul primește o versiune redată pe server. Acest lucru permite îmbunătățirea indexării paginilor bazate pe JavaScript de către botul Google. În acest fel, veți oferi cea mai convenabilă experiență de utilizator pentru clienții dvs. fără a risca SEO site-ului.

2. Combinați SSR și CSR

Asigurați-vă că crawler-ul va vedea cele mai importante părți ale conținutului (care trebuie să fie transmise cu siguranță către motoarele de căutare) folosind randarea pe server. Aceste informații vor fi selectate de crawler imediat ce descoperă pagina. Informațiile rămase vor fi procesate automat prin randare la nivelul clientului în timpul celei de-a doua etape a procesului.

3. Construiți-vă PWA folosind un cadru JavaScript prietenos cu SEO

Marea noastră recomandare este GatsbyJS. Este destul de ușor să construiești un site web PWA folosind acest cadru (precum și să transformi site-ul web Gatsby existent într-un PWA). Pre-rendează site-ul dvs. într-un pas de construcție pentru o performanță strălucitoare, fără întârzieri, chiar dacă conexiunea la internet este lentă. Datorită acestui fapt, vizitatorii dvs. beneficiază de o experiență de navigare asemănătoare aplicației.

4. Apelați la soluții PWA gata de utilizare

Astăzi, PWA-urile sunt mai accesibile ca niciodată. Așadar, dacă nu vrei să pierzi mult timp și resurse cu dezvoltarea PWA, poți folosi câteva soluții PWA gata de utilizare, care sunt realizate după principiile SEO și testate temeinic, astfel încât să fii sigur de calitate. a codului.

5. Studio PWA

PWA Studio a fost lansat în 2019 ca standard de tehnologie web conceput pentru a oferi o experiență asemănătoare aplicației. De fapt, nu este chiar o soluție gata de utilizare: este mai degrabă o colecție de instrumente și caracteristici pentru dezvoltarea PWA. Această soluție este destul de complexă și impresionantă, dar necesită ajustări suplimentare.

6. ScandiPWA

ScandiPWA este o soluție open-source, bazată pe React și Redux. Este conceput cu scopul de a îmbunătăți site-urile web cu viteza și capacitatea de a lucra offline. De asemenea, se actualizează constant, astfel încât veți primi mereu funcții noi.

7. Vitrina Vue

Aceasta este una dintre primele soluții PWA disponibile pe piață. De fapt, Vue Storefront este o soluție universală, all-in-one, dar necesită resurse suplimentare de întreținere.

Cum să evitați greșelile legate de SEO în timpul implementării PWA?

Pentru a dezvolta un PWA bine conceput, care vă va ajuta să câștigați la SEO oferind o experiență îmbunătățită a utilizatorului, ar trebui să:

1. Efectuați un audit SEO. Acest lucru va ajuta la identificarea și rezolvarea tuturor problemelor legate de SEO.
2. Consultați specialiștii SEO. Când îți construiești PWA folosind React (de exemplu), specialiștii tăi SEO ar trebui să știe exact cum să combine React și SEO. În acest fel, veți evita majoritatea problemelor posibile care pot apărea după implementare.
3. Respectați principiile fundamentale SEO atunci când dezvoltați PWA. În articolul legat de Progressive Web Apps SEO, publicat de Google, compania oferă sfaturi despre cum să construiești PWA-uri indexabile. Unele dintre ele sunt ca atare:
   • Fiecare pagină ar trebui să fie disponibilă printr-o anumită adresă URL. Datorită acestui fapt, fiecare pagină va fi accesată cu crawlere independent.
   • Site-ul ar trebui să aibă un design responsive și să fie optimizat pentru dispozitive mobile.
   • Utilizați îmbunătățirea progresivă. Datorită acestei strategii, PWA funcționează bine chiar și pe browsere vechi.
   • Verificați modul în care Google redă pagina dvs. utilizând Google Search Console în mod regulat. Astfel, veți ști întotdeauna când este timpul să faceți upgrade sau să schimbați ceva.
   • Urmăriți timpul de încărcare a paginii. Google măsoară viteza de încărcare a fiecărei pagini și, dacă viteza de încărcare a paginii dvs. scade, Google o va scădea în clasament.

Vă poate plăcea și: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

Concluzia

Optimizarea PWA oferă o mulțime de oportunități pentru marketing online și aduce creștere marii majorități a afacerilor. De fapt, cea mai bună practică SEO aplicată de obicei de PWA este interfața ușor de utilizat: este receptivă, structurată și se redă rapid. Cu toate acestea, PWA-urile încă nu oferă un avantaj direct SEO, iar problemele legate de SEO sunt cele care îi împiedică pe mulți comercianți să implementeze PWA pe site-urile lor web. De aceea este important să fiți atenți și să utilizați diferite tehnici, cum ar fi randarea dinamică, combinația dintre SSR și CSR sau soluții PWA gata de utilizat. De asemenea, ar trebui să implicați specialiști SEO în proces încă de la început.

După cum puteți vedea, puteți utiliza atât SEO, cât și PWA combinându-le cu succes. De asemenea, trebuie remarcat faptul că PWA este un tip de software tânăr și inovator, așa că sunt de așteptat îmbunătățiri.

 Acest articol este scris de Ivan Jones. Ivan este specialist SEO la Clockwise.Software cu peste 5 ani de experiență în industrie. El cunoaște nuanțele care l-au ajutat să mențină site-urile web în topul rezultatelor căutării Google de ani de zile. Fiind un învățător pasionat, este dornic să testeze noi abordări care pot beneficia de rezultatele SEO.