Shopify è una piattaforma molto semplice e immediata da usare per creare un e-commerce. Tuttavia, ha delle limitazioni tecniche da conoscere per poter posizionare e ottenere buoni risultati.
Tuttavia, ci sono delle caratteristiche specifiche da conoscere quando bisogna ottimizzarlo. In questo articolo, quindi, approfondirò quelle che sono le tematiche specifiche per questa piattaforma.
Mi presento: sono Filippo Jatta, sono consulente dal 2007.
Mi sono laureato e specializzato nel 2007 in Economia, Organizzazione e Sistemi Informativi presso l’Università Bocconi di Milano.
La piattaforma rende semplice per i proprietari di negozi principianti il lancio dei loro e-commerce, ma questa convenienza significa che molti degli aspetti tecnici sono stati decisi per te. Questo introduce alcune stranezze specifiche che potresti incontrare quando ottimizzi l’architettura, la struttura dell’URL e l’uso di JavaScript.
In questa guida, ti aiuterò a mettere a punto le criticità tecniche per aiutare i motori di ricerca a eseguire la scansione e l’indicizzazione delle pagine.
Indice
SEO Shopify: Problemi Tecnici e Duplicazioni
Shopify implementa le raccolte per raggruppare i prodotti in categorie, facilitando la ricerca da parte dei clienti. Uno svantaggio di ciò è che i prodotti appartenenti alle pagine di raccolta creano un problema di URL duplicato.
Tecnicamente parlando, le collezioni sono un array per la memorizzazione semantica dei prodotti collegati per convenzione (anziché tramite ID) all’instradamento delle risorse.
/config/routes.rb
resources :products do
collection do
get ‘collections’
end
end
In questo modo l’URL viene mappato su una raccolta di risorse del prodotto corrispondente “collections” e risorse.
Quando associ un prodotto a una pagina di collections (come è probabile che facciano quasi tutti i commercianti che vendono più di una manciata di articoli), genera automaticamente un secondo URL a quella pagina di prodotto come parte della collezione.
Ciò significa che avrai due URL che puntano allo stesso prodotto; gli URL appariranno come segue:
- /collections/shirts-collection/products/blue-shirt
- /products/blue-shirt
Il contenuto duplicato rende più difficile per i motori di ricerca determinare quale URL indicizzare e ranking.
Inoltre, avere più URL per la stessa pagina può dividere il tuo potere di link building perché i referrer possono usare entrambi gli URL. Con l’uso del tag canonical hai una soluzione adeguata al primo problema, ma non per il secondo.
Il tag canonico è stato introdotto dai motori di ricerca per designare quale ortografia degli URL (che carica lo stesso contenuto) è l’ortografia preferita per i risultati di ricerca. Esistono molti modi in cui è possibile ottenere più ortografia e l’utilizzo delle collections genera URL duplicati per i prodotti che appartengono alle raccolte. I tag canonical della pagina di raccolta dei punti sulla pagina del prodotto, il che è eccellente, ma non risolve il problema dei collegamenti divisi.
Ecco i passi da compiere per fare SEO su Shopify:
Elimina e Gestisci gli URL Alternativi
Fortunatamente, esiste una soluzione nota che puoi utilizzare per risolvere il problema all’interno dei tuoi template e non dovresti necessariamente avere familiarità con la sintassi (nota come Liquid) con cui è costruito il template.
Sebbene la tua esperienza varierà a seconda del tema che stai utilizzando, la modifica che utilizzeresti dovrebbe essere abbastanza semplice e coinvolgere un filtro di output “within: collection.”
Per iniziare con questa soluzione, devi prima accedere al tuo account. Da lì, accedi al tema del tuo negozio facendo clic su Negozio online e quindi su Temi dalla barra laterale di sinistra.
Quindi, fai clic su Personalizza nella sezione Tema corrente dell’interfaccia, come mostrato di seguito.
Nella schermata successiva, fai clic su Azioni tematiche (situate nella parte inferiore della barra laterale di sinistra), quindi su Modifica codice.
Si aprirà una nuova finestra, che mostra i modelli di codice del tema per trovare il file che genera i link della raccolta. Nel nostro caso, abbiamo aperto la cartella Snippets e fatto clic su “{/} product-card.liquid” per individuare il codice che dovevamo modificare. Appare sulla riga 11, come indicato di seguito.
Dovrai modificare quella riga di codice da:
<a href=”{{ product.url | within: collection }}” class=”product-card”>
a:
<a href=”{{ product.url }}” class=”product-card”>
Questo può essere fatto cancellando la parte del codice “ | within: collection”. I modelli di template Liquid precedenti fanno riferimento a current_collection ora deprecato che corrisponde alla soluzione nel link del forum fornito sopra.
La cosa importante da trovare è il “|” passare al nome del filtro “within” per le raccolte e rimuoverlo.
Il filtro “within” crea il collegamento del prodotto come parte della raccolta nel contesto della raccolta corrente cambiando quella che altrimenti sarebbe una rotta fissa fatta di “/products/:id” to “/collections/collection-name/products/:id” per esempio.
Poiché ciò che vogliamo è che tali frammenti creino collegamenti solo a URL canonici per il prodotto, rimuoviamo semplicemente l’intero filtro “within” e funziona.
Sta attento all’Architettura e ai Limiti Tecnici
Un altro problema fastidioso associato al CMS è che l’architettura fa parte della rigida struttura dell’implementazione delle guide: è meno flessibile di WordPress, ad esempio.
Se desideri eseguire ottimizzazioni apparentemente semplici per l’architettura, non c’è sempre un modo ovvio per farlo.
Shopify genera automaticamente l’URL per le pagine dei dettagli del prodotto utilizzando la seguente struttura: sito.com/products/product-name.
I proprietari dei negozi possono personalizzare solo l’ultima parte dell’URL, che deriva dal titolo della pagina.
Se desideri rimuovere la directory “/ products” per riordinare i tuoi URL, Shopify non ha questa opzione pronta all’uso. Il vantaggio di URL puliti è che gli utenti potrebbero essere più propensi a fare clic sui risultati della ricerca e altri webmaster potrebbero avere maggiori probabilità di collegarsi a URL che sembrano più autorevoli in base alla progettazione.
Gli URL con un percorso verso una pagina di directory di base insinuano l’autorità in virtù di un rango di directory al primo posto e “/ products” interferisce con questo. Tuttavia, questi percorsi sono fondamentali per il backend per produrre i suoi contenuti dinamici.
Fortunatamente, esiste una soluzione esterna per questa limitazione.
Il problema sorge con i framework di sistema convenzionali, che spesso utilizzano stringhe di richiesta per la logica organizzativa per accedere a diverse risorse in modo che ai modelli diversi vengano fornite le risorse di cui hanno bisogno per pubblicare contenuti e/o servizi di pagine dinamiche.
Si tratta della convenzione di routing Ruby on Rails, in cui “/ products /: id” associa gli URL alle risorse del prodotto.
Siamo ora entrati in un territorio in cui potresti valutare di contattare uno sviluppatore web a meno che tu non sappia scrivere JavaScript e Ruby.
Queste sono correzioni più complesse per alcuni problemi tecnici che solo uno sviluppatore dovrebbe implementare.
Personalizza l’Architettura con Cloud Workers
L’uso di Cloud Workers dai fornitori di soluzioni di memorizzazione nella cache può consentire percorsi di consegna alternativi e persino fornire risorse alternative per le richieste. I Cloud Worker possono mascherare efficacemente i percorsi URL “/ products” e “/ pages”.
Con JavaScript Workers nel cloud, hai un maggiore controllo su ciò che è disponibile per te nel ciclo di richiesta / risposta, il che può significare un controllo praticamente su qualsiasi cosa. Gli esempi includono l’acquisizione di richieste per sitemap.xml e robots.txt e la pubblicazione immediata di risorse alternative, l’iniezione di JavaScript in una pagina o gruppi di pagine e la pulizia di quegli fastidiosi URL per rendere le parole chiave più prominenti e i percorsi più autorevoli.
Dovresti possedere un dominio per farlo funzionare e far sì che il tuo registrar reimposti il suo sistema di nomi di dominio (DNS) per puntare a Cloudflare, che può quindi fornirti l’API JavaScript Workers nel punto in cui i tuoi utenti finali vengono indirizzati tramite Cloudflare tramite proxy al server di origine.
Quando ti iscrivi a Cloudflare, accedi e devi aggiungere i record DNS A, nonché raccogliere gli indirizzi dei nameserver Cloudflare da utilizzare con il tuo registrar di nomi di dominio.
Cerca il pulsante DNS come mostrato sopra, per accedere al modulo per la raccolta degli indirizzi del nameserver e l’inserimento dell’indirizzo IP dell’host, dove viene pubblicato il codice.
È possibile aggiungere gli indirizzi IP del server di origine del provider host aggiungendo i record DNS ‘A’ (Autorità) utilizzando l’interfaccia come mostrato sopra (evidenziato in verde) e gli indirizzi dei nameserver Cloudflare da utilizzare nel registrar del proprio dominio (di nuovo, evidenziati in verde) che dovrai inserire i campi del server dei nomi nel tuo registrar.
Utilizza JavaScript Cloudflare Workers
Iscriviti per i Cloudflare Workers e avrai hai accesso per introdurre JavaScript complessi per ogni genere di cose. Configura quali pagine vuoi iniziare a gestire con i Workers abbinando i criteri con i caratteri jolly per richiedere strutture URL e ti viene quindi conferito il potere con gli oggetti richiesta e risposta a cui codificare.
L’esempio seguente indirizzerebbe tutti gli URL immaginabili, inclusi i sottodomini per il dominio, tramite un’API Worker su Cloudflare tramite proxy.
Facendo clic su Workers e quindi sul pulsante Add Route, ti verrà presentato un popup con il modulo per inserire i criteri di corrispondenza del percorso URL. Una sintassi jolly, che è l’unico operatore di corrispondenza dinamica che si ottiene, ed essere in grado di abbinare diversi percorsi utilizzando l’interfaccia dovrebbe essere sufficiente per soddisfare ciò che si desidera. Affina le tue strategie su un percorso alla volta poiché puoi aggiungerne diverse dirette a uno dei numerosi script.
Cloudflare ha impostato un indirizzo subdomain.workers.dev per l’hosting dello script Workers. Ottieni un’interfaccia di modifica e un parco giochi di anteprima come IDE direttamente nel front-end di Cloudflare.
Sarai in grado di cambiare i verbi HTTP e testare come risponde il tuo script Worker prima di diventare attivo.
Le soluzioni per le cose possono eseguire la gamma, dalla personalizzazione delle intestazioni di risposta, al rendering lato server (SSR), alla modifica di titoli, metadati e contenuti, il reindirizzamento o persino la pubblicazione di contenuti da altri host. In questo modo, sei abilitato ad eseguire migrazioni e / o completi, incluse modifiche all’architettura come il respelling di “/ pages” e “/ products”.
Mentre ci sono riferimenti ad altri blocchi e la linea 7 è incompleta, questo blocco analizzerà un URL dall’oggetto richiesta assegnandolo alla variabile denominata “path” e lo utilizzerà in un’istruzione switch JavaScript per servire robots.txt e sitemap.xml Oggetti di risposta, scrivendoli direttamente senza colpire affatto il server di origine.
Nel caso di una particolare richiesta designata sulla riga 8, servirà invece una pagina di un altro dominio e, prima di un default fall-through, la riga 9 inserirà un’inclusione con la home page.
Questo esempio dovrebbe fornirti un sacco di spunti di riflessione sulla risoluzione dei problemi, incluso quello che puoi fare per i problemi.
Tuttavia, al momento Cloudflare non lo offre come prodotto self-service, ma lo farà dopo un periodo di test iniziale. Il servizio è attivo da oltre un anno a disposizione dei non Shopify.
“Il problema era che in precedenza il nostro sistema non consentiva a un cliente diretto di eseguire il proxy di fronte a un altro cliente, ad esempio, se sei andato su cloudflare.com e hai registrato il tuo store.com come zona, ti impedivamo di inviare il proxy per vari motivi tecnici “, ha dichiarato Patrick Donahue, direttore della gestione dei prodotti di Cloudflare.
Il team di vendita di Cloudflare sta attualmente lavorando direttamente con i commercianti che desiderano essere coinvolti perché ci sono passaggi manuali che richiedono assistenza da parte dei loro tecnici, ha spiegato Donahue. Cloudflare prevede di rendere questa opzione più ampiamente disponibile entro la fine dell’anno.
Altre Soluzioni SEO per Shopify Potrebbero Essere all’Orizzonte
Ora che Cloudflare ha risolto il problema dell’ordinamento delle impostazioni di configurazione del proxy, si spera che altri fornitori di soluzioni di memorizzazione nella cache offriranno servizi simili a quelli che Cloudflare.
