Sugestii & Recomandări SEO Tehnice Pentru un Website Nou

În acest articol scris de echipa Mixtazure vei găsi sugestii și recomandări tehnice ce pot fi implementate pentru un website la început de drum. Majoritatea recomandărilor sunt legate de SEO și web development, scopul lor fiind să te ajute în procesul de optimizare tehnică a website-ului.

1. Instalează Google Tag Manager (GTM)

Google Tag Manager îți aduce următoarele beneficii:

• Toate codurile de tracking pot să fie puse/adăugate prin Google Tag Manager (GTM)
• Pentru ca GTM să funcționeze, trebuie să adaugi doar 2 scripturi de tracking în codul sursa al website-ului
• Restul de tracking codes/tracking pixels (ex: Meta pixel, TikTok pixel, etc.) pot fi configurate direct în cadrul containerului de GTM
• Vei putea configura mult mai ușor un CMP (Consent Management Platform) prin GTM, și vei avea un control mai bun asupra fiecărui consent setting (pentru fiecare tracking code configurat în GTM)
• Managementul codurilor de tracking este mai ușor, și vei putea avea o imagine de ansamblu mai bună
• Se pot configura elemente specifice de conversie prin GTM; events se pot baza pe clase HTML, ID-uri, etc.
• Integrarea nativă cu alte tool-uri Google (de exemplu cu GA4)

Link-uri utile cu mai multe informații despre Google Tag Manager:

• https://tagmanager.google.com/ – website oficial Google Tag Manager
• https://support.google.com/tagmanager/answer/14842164 – tutorial oferit de Google pentru setarea GTM
• https://www.simoahava.com/ – tutoriale avansate pentru GTM scrise de Simo Ahava

2. Instalează Microsoft Clarity

Microsoft Clarity îți aduce următoarele beneficii:

• Microsoft Clarity este un heatmapping tool oferite pe gratis de către Microsft
• Seamănă foarte mult cu Hotjar din punct de vedere al funcționalității
• Se poate instala rapid prin GTM
• Vei vedea user recordings care te pot ajuta la analiza comportamentului utilizatorilor de pe website
• Există funcționalitatea de AI summary/insights, care îți va prezenta elemente cheie ale comportamentului utilizatorilor (bazate pe datele care provin din sesiunile trackuite de Microsoft Clarity)
• Te ajută mult dacă vrei să faci A/B testing și nu știi ce elemente sunt folosite de useri (sau ce elemente ar trebui să fie schimbate/îmbunătățite)
• Datele oferite de Microoft Clarity pot fi folosite pentru a dezolvata strategii noi de conversion rate optimization

Link-uri utile cu mai multe informații despre Microsoft Clarity:

• https://clarity.microsoft.com/ – website oficial Microsoft Clarity
• https://learn.microsoft.com/en-us/clarity/ – tutoriale și articole informative despre cum se poate folosi Microsoft Clarity

3. Configurează Google Analytics 4 (GA4) și Google Search Console (GSC)

Google Analytics 4 (GA4) și Google Search Console (GSC) îți aduc următoarele beneficii:

• Prin GSC vei putea trackui performanța organică a website-ului tău din cadrul Google Search:
  • Vei vedea cate Clicks si Impressions ai avut pe o perioada anume de timp
  • Vei putea vedea Average Rankings ale cuvintelor cheie pentru care ai fost afisat in SERP (search engine results page)
  • Poti identifica posibile erori tehnice (in principal erori de HTTP response codes identificate de catre Googlebot)
    
    
• Prin GA4 vei putea analiza traficul de pe website-ul tău:
  • Vei putea vedea câți utilizatori ți-au accesat website-ul pe o perioadă anume de timp
  • Poți vedea de pe ce canale digitale ai atras trafic (de exemplu de pe Social Media channels, Organic Search, Paid Ads, etc.)
    
    
• Ambele te ajută să îți măsori performanța în medul online, și datele oferite te vor ajuta să iți adaptezi (sau schimbi) strategiile

Link-uri utile cu mai multe informații despre Google Analytics și Google Search Console:

• https://search.google.com/search-console/about – website oficial Google Search Console (GSC)
• https://support.google.com/webmasters/answer/9128669 – tutorial pentru GSC
• https://marketingplatform.google.com/about/analytics/ – pagina de prezentare oficială pentru Google Analytics (GA4)
• https://support.google.com/analytics/answer/9304153 – tutorial de configurare pentru GA4
• https://developers.google.com/analytics – tutoriale de utilizare pentru GA4

4. Practici de optimizare pentru imagini

Mai jos găsești un tabel care face un rezumat rapid al practicilor de optimizare pentru imagini. Detalii extra vei găsi în continuarea tabelului.

Pentru partea de filename ale imaginilor îți recomandăm următoarele:

• Să eviți cuvinte random/generice sau șiruri de caractere fara vreun sens
• Filename să fie scris cât mai specific; îl poți baza pe tipul de produs sau serviciu al paginii pe care se află imaginea
• Ajută să incluzi cuvinte cheie organice cât timp acestea nu sunt abuzate (și ajută să explice contextul imaginii)

Pentru partea de filesize ale imaginilor îți recomandăm următoarele:

• Fiecare imagine să aibe un filesize cât mai mic, de evitat mărimi mai mari de 500KB
• Compresează imaginile înainte să le dai upload pe website
• Folosește WebP sau AVIF ca și format de imagine; aceste formate îți permit o compresie mai mare fără a pierde calitatea imaginii

Pentru partea de alt text ale imaginilor îți recomandăm următoarele:

• Toate imaginile relevante din conținutul unei pagini au nevoie de alt text
• Trebuie descrisă ideea principală a imaginii cât mai simplu și clar
• De evitat orice keyword stuffing, sau descrieri care nu au legătură cu imaginea în sine
• Pot fi menționate/folosite cuvinte cheie organice cât timp acestea au legătură directă cu imagine în sine

Pentru partea de image responsiveness îți recomandăm următoarele:

• Se pot folosi HTML tags precum srcset pentru a defini logica de responsiveness
• Vor fi folosite mai multe variante ale unei imagini, fiecare varianta avand niste dimensiuni optimizare pentru un tip anume de device (sau pentro un tip anume de dimensiune)
• Poti urmari/coda mai multe condiții pe ntru logica de responsiveness:
  • Viewport Size
  • Device Pixel ratio
  • Device width
  • Zoom level

Pentru imaginile care apar Above-the-Fold pe o pagină web îți recomandăm următoarele:

• Să nu fie folosit atributul de lazy load
• Imaginea trebuie să apară în codul HTML al paginii (să nu fie făcută referință prin CSS de exemplu)
• Atributul de Decoding va fi synchronous
• Fetchpriority=”high”, ca să fie parsate și randate cât mai repede de browser
• Se poate folosi un preload pentru imagine

Pentru imaginile care apar Below-the-Fold pe o pagină web îți recomandăm următoarele:

• Să fie lazy loaded tot timpul (se vor încarca doar când userul ajunge să le vadă în viewport)
• Atributul de Decoding va fi asynchronous
• Fetchpriority=”low”

Exemplu de cod pentru o imagine Above-the-Fold:

<img
sizes="
(max-width: 480px) and (-webkit-device-pixel-ratio: 1) 1px,
(min-width: 481px) and (-webkit-device-pixel-ratio: 1) 2px,
(max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) 3px,
(min-width: 481px) and (-webkit-min-device-pixel-ratio: 2) 16px"
srcset="
medium-1x-q75.jpg 1w,
large-1x-q75.jpg 2w,
medium-2x-q35.jpg 15w,
large-2x-q50.jpg 16w"
style="
object-fit: cover;
max-width: 800px;
max-height: 600px;
aspect-ratio: 1.33333 / 1;
width: 100%;"
src="fallback.jpg"
alt="don't forget the alt attribute"
loading="eager"
decoding="sync"
fetchpriority="high"
role="img"
/>

Exemplu de cod pentru o imagine Below-the-Fold:

<img
sizes="
(max-width: 480px) and (-webkit-device-pixel-ratio: 1) 1px,
(min-width: 481px) and (-webkit-device-pixel-ratio: 1) 2px,
(max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) 3px,
(min-width: 481px) and (-webkit-min-device-pixel-ratio: 2) 16px"
srcset="
medium-1x-q75.jpg 1w,
large-1x-q75.jpg 2w,
medium-2x-q35.jpg 15w,
large-2x-q50.jpg 16w"
style="
object-fit: cover;
max-width: 800px;
max-height: 600px;
aspect-ratio: 1.33333 / 1;
width: 100%;"
src="fallback.jpg"
alt="don't forget the alt attribute"
loading="lazy"
decoding="async"
fetchpriority="low"
role="img"
/>

5. Elemente HTML de bază pentru SEO

Mai jos îți prezentăm o listă cu elemente HTML care sunt necesare pentru un SEO eficient:

• Title Tag element: tot timpul să apară în HTML-ul pe care îl vede Googlebot pentru o pagină web; să nu fie introdus dinamic prin JavaScript (DOM manipulation)
  
  
• Meta Description element: tot timpul să apară în HTML-ul pe care îl vede Googlebot pentru o pagină web; să nu fie introdus dinamic prin JavaScript (DOM manipulation)
  
  
• Canonical element: tot timpul să apară in HTML-ul pe care îl vede Googlebot pentru o pagină web; să nu fie introdus dinamic prin JavaScript (DOM manipulation). Fiecare pagina web sa aiba un self-referencing canonical comnfigurat.
  
  
• Internal links folosind elementul de a href=””: tot timpul să apară în HTML-ul pe care îl vede Googlebot pentru o pagină web; să nu fie introduse dinamic prin JavaScript (DOM manipulation)
  
  
• Headings elements:tot timpul să apară în HTML-ul pe care îl vede Googlebot pentru o pagină web; să nu fie introduse dinamic prin JavaScript (DOM manipulation)

Ca și o regulă de aur, pentru a te asigura că Googlebot și alti crawlers îți văd corect tot conținutul este important să te folosești cât se poate de mult de elemente HTML, și să eviți JS și manipulările dinamice de conținut (care de regulă se fac prin JS și DOM manipulation).

În cazul în care website-ul tău folosește framework-uri de JS, cum ar fi Next.js, Gatsby, etc,, să te asiguri că paginile/conținutul tău sunt server-side rendered sau server-side generated. Nu te baza pe client side rendering, deoarece în multe cazuri Googlebot nu va procesa tot conținutul tău. Chiar dacă sistemul lor de rendering este avansat, am întâlnit multe situații unde Googlebot nu vedea deloc secțiuni de conținut de pe paginile web unde era folosit client side rendering.

Articole informative care intră în mai multe detalii despre rendering și JS:

• https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process#moving-forward-with-new-information – tabel informativ cu tipurile de rendering (CSR, SSR, SSG, ISR) și cum influențează ele comportamentul Googlebot
  
  
• https://ziptie.dev/blog/how-to-check-if-google-properly-renders-your-javascript-content/ – articol despre cum poți verifica rendering din perspectiva Googlebot

6. Robots.txt și regulile de blocking

În cazul fișierului robots.txt îți recomandăm următoarele:

• Nu trebuie blocat accessul la resurse precum CSS și JS; dacă ele sunt blocate atunci Googlebot și alți search engine crawlers nu vor putea face un rendering corect al conținutului
  
  
• Nu trebuie blocat accesul la imagini
  
  
• Se pot bloca anumiți parametrii precum:
  • Parametrii folosiți pentru filtre, deoarece în majoritatea cazurilor aceste filtre nu vor crea conținut nou/conținut cu „valoare” (mai mult doar adaptează/schimbă conținutul unei pagini existente)
  • Parametrii folosiți pentru paginile de search, deoarece în majoritatea cazurilor aceste pagini nu vor oferi „valoare” pentru algoritm, și ai ieși mai câștigat dacă ai crea pagini noi cu un template specific care să includă și ce apare pe acele pagini de search intern

7. Elemente de SEO On-Page și conținut

Chiar dacă nu este vorba de ceva foarte tehnic, putem totuși menționa și niste practici care se leagă de conținut și SEO On-Page și au legătură indirectă cu partea tehnică a unui website.

Vezi tabelul cu rezumatul practicilor și citește apoi mai departe pentru extra detalii.

• Să folosești un singur element H1 pe o pagină web; mai multe elemente H1 transmit semnale contradictorii către Googlebot (aka îi face mai grea munca de interpretare a conținutului)
  
  
• Restul de Headings (H2, H3) să fie folosite ierarhic în cadrul unei pagini web (H1 → H2 → H3 → H4 → H5)
  
  
• Poți folosi în principal H1 + H2 + H3; restul de elemente de tip Headings sunt de multe ori ignorate de către Googlebot
  
  
• Elementele de Headings să nu fie folosite în Header și Footer, deoarece aceste zone sunt site-wide și sunt considerate boilerplate content
  
  
• Elementele de Headings să nu fie folosite pentru design/formatare; ele trebuie să denote zone specifice de conținut
  
  
• Breadcrumbs pot fi folosite pe orice pagină pentru a ajuta crawlerul și userii (majoritar ajută Googlebot să vadă mai bine partea de internal linking)
  
  
• Elementele HTML semantice, precum <section> sau <figure>, trebuie să fie folosite cât mai mult; de evitat clasicul <div> soup care nu ajută cu nimic crawlerii când vine vorba de contextul/importanța unei secțiuni de conținut
  
  
• Tabelele HTML pot fi folosite atunci când contextul paginii/a continutulu îți permite, deoarece tipul acesta de formatting este apreciat de către Googlebot (și îl poate vedea ca un semnal extra pentru content quality)
  
  
• Ordered lists și bullet points lists pot fi folosite atunci când există o enumerare sau când există pași specifici de urmat; aceste formatări ajută pe partea de skim-reading și sunt apreciate de către Googlebot

Drimba Alexandru – autorul articolului

Specialist SEO & Co-fondator Mixtazure

Drimba Alexandru este un specialist SEO cu peste 5 ani experiență în domeniul optimizării pentru motoarele de căutare. El este co-fondatorul agenției Mixtazure. Companiile la care acesta lucrat în trecut sunt: Yardi, Inbound Fintech, SVGator.

Articole scrise de Drimba Alexandru