Creare SITEMAP immagini gratuitamente - GUIDA COMPLETA

[borja]

Creare SITEMAP immagini gratuitamente - GUIDA COMPLETA

Ragazzi in questi giorni ho creato un piccolo "script" con il quale creare la propria sitemap immagini in maniera completamente gratuita.
Avevo chiesto aiuto nel forum sperando che qualche anima buona mi dicesse come crearne una senza iniziare abbonamenti onerosi ma ho constatato che in giro nessun sito-web o software offre questo servizio senza alcun pagamento.
Sappiate che ho imparato a programmare da autodidatta quindi potrei utilizzare termini non propriamente corretti e forse avrei potuto scrivere codici più snelli ed efficaci. Siate clementi :bho:

Allora ho elaborato questi piccoli codici in .php che potranno essere utilizzati da chiunque abbia accesso alla directory del proprio sito-web e possa, utilizzando ad esempio l'FTP, trasferire i file sul proprio server.

Comunque anche se non avete conoscenze di programmazione non sarà così difficile.
L'importante è avere un editor di testo che possa modificare i file (io utilizzo l'editor NOTEPAD++) e che vi armiate di un pò di pazienza.

**1) Scaricate il file zippato e apritelo **(io uso l'app winRAR)

Nella file troverete la cartella "crea-sitemap-immagini" e al suo interno:

A) file "simple_html_dom.php"
B) file "proxy-sitemap.php"
**C) **file "parsing-sitemap.php"
D) cartella "sitemap" (che è vuota)

Tutti i codici sono finalizzati a creare una "sitemap immagini" del sito.
L'intera operazione avviene nel corso di 4 step:

• In primis bisogna inserire l'intera cartella "crea-sitemap-immagini" sul tuo sito (via FTP, io uso FILEZILLA)

• Modifica il file (B) e il file (C) sostituendo "www.example.com" con il link del tuo sito (i link nei miei file sono scritti con **https **quindi se il tuo sito è in **http **devi eliminare la "s" da tutti i link dei file scaricati

• Esegui il file (B) => Servirà a scaricare la tua normale sitemap salvandola nella cartella (D)

• Esegui il file **(C) => **Servirà a creare la sitemap immagini salvandola nella cartella (D)

    * La struttura creata sarà la medesima:*
  

[HTML]
<url>
<loc>https://www.example.com</loc>
image:image
image:lochttps://www.example.com/image</image:loc>
image:titleEcco il title dell'immagine</image:title>
</image:image>
</url>
[/HTML]

2) Puoi eseguire il file (B) e il file (C) quante volte vuoi ma ricorda che per eseguire (C)
nella cartella sitemap deve essere sempre presente il file della sitemap normale
**
3)** La sitemap immagini creata presenta solo l'attributo** image:loc** e l'attributo image:title
Dunque se vuoi aggiungerne altri dovrai modificare il file **(C)

REQUISITI NECESSARI

**La GUIDA funziona solo ed esclusivamente se voi avete già una sitemap "normale" ovvero quella che inviate a google per indicizzare le vostre pagine.
Il mio sito è creato usando DRUPAL e purtroppo non sono riuscito a trovare moduli aggiuntivi che mi creassero anche una sitemap immagini.
Ecco perchè è stato necessario creare questi codici.
Nel mio caso però, il modulo in questione, aggiorna la normale sitemap ogni qual volta creo o elimino una pagina e per tale motivo i file della guida possono essere utilizzati in qualsiasi momento.
Se ad esempio ora create una pagina sul vostro sito che contiene 10 immagini e avete già una nuova sitemap "normale" nella quale è presente anche la nuova risorsa allora fate cosi:
Scaricate la nuova "sitemap normale" eseguendo il file **proxy-sitemap.php **e poi (dopo esservi assicurati che nella cartella sitemap ci sia il nuovo file aggiornato) eseguite **parsing-sitemap.php **che vi creerà sempre nella stessa cartella la nuova sitemap immagini.

**EVENTUALI MODIFICHE
**
Al di la della modifica riguardante i link (che è necessaria) potreste effettuare un'ulteriore piccola modifica.
Il codice **parsing-sitemap.php **scansiona uno alla volta gli url presenti nella sitemap normale e cerca in ogni url (in quindi in ogni vostra pagina indicizzata) qualsiasi tag <img>, magari anche quelle immagini inutili presenti nel footer o in altre sezioni dove si ripetono e che quindi non vorreste far indicizzare da Google.
Magari a voi interessano solo le immagini presenti nel content della pagina.

Per far ciò bisogna modificare leggermente **parsing-sitemap.php **(sempre utilizzando l'editor) e la modifica riguarda alcune linee di codice presenti nella funzione che dovreste trovare alla riga #96

[PHP]function struttura_immagini($link, $homepage)[/PHP]

Nello specifico dovete modificare la linea di codice #102:

[PHP]foreach($doc-> find("img") as $item){[/PHP]

Ad esempio nel mio caso io voglio analizzare solo le immagini presenti nel div #content (ovvero la parte della pagina dove è presente l'articolo) considerando però solo le immagini che hanno la classe *CSS *".prova"
Quindi modifico quella linea e ne aggiungo una prima:
[PHP]
if($doc-> find("div[id='content']",0)){
foreach($doc-> getElementById('content')-> find("img[class='prova']") as $item){
[/PHP]

Contestualmente sempre in quella funzione andate alla riga #122 e #123 dove trovate queste linee:

[PHP]
$element_image= $element_image.'image:imageimage:loc'.$src.'</image:loc>'.$title_element.'</image:image>';
}
[/PHP]

e modificate aggiungendo un'altra parentesi graffa...così:

[PHP]
$element_image= $element_image.'image:imageimage:loc'.$src.'</image:loc>'.$title_element.'</image:image>';
}
}
[/PHP]

Se invece volte far analizzare le immagini presenti in un altro elemento html considerando però qualsiasi immagine in esso presente (al di la delle eventuali classi CSS aggiunte ai tag <img>) dovete modificare la prima parte così:

[PHP]
if($doc-> find("div[id='INSERITE ID ELEMENTO QUI']",0)){
foreach($doc-> getElementById('inserite id elemento qui')-> find("img") as $item){
[/PHP]

e poi la seconda parte aggiugendo la famosa parentesi graffa:

[PHP]
$element_image= $element_image.'image:imageimage:loc'.$src.'</image:loc>'.$title_element.'</image:image>';
}
}
[/PHP]

**RISULTATI

**Nel mio caso i codici funzionano alla grande e non ho riscontrato alcun problema.
Considerate che io ho circa 1100 url nella sitemap normale e per creare la sitemap immagini ci sono voluti forse anche più di 5 minuti.
Quindi pazientate...

Non so cosa potrebbe succedere con sitemap ancora più grandi...
Forse il browser dopo tot minuti interrompe l'esecuzione del file ?
Può essere ma non so dirvelo con certezza.

Comunque ogni file è commentato perciò se non capite qualcosa potrebbero esservi d'aiuto.

**CONCLUSIONI
**Spero tanto che questa guida possa essere d'aiuto per molti disgraziati come me
Fatemi sapere !

P.S: fra poco Giorgio provvederà ad allegare in qualche modo i file in questione.

Saluti da Borja

Tipo:
Altri

[giorgiotave]

Ciao Borja,
grazie grazie grazie.

In pieno spirito di condivisione, hai chiesto come si fa, ti sono stati dati consigli e tu ricondividi! Bellissimo esempio

Ho messo il file qui
http://www.giorgiotave.it/forum/sorgenti/guida-image-sitemap.zip

[borja]

E' un piacere essere d'aiuto :):)

[vedova]

@Borja said:

Non so cosa potrebbe succedere con sitemap ancora più grandi...
Forse il browser dopo tot minuti interrompe l'esecuzione del file ?
Può essere ma non so dirvelo con certezza.

Se ti riferisci al fatto che si possano ricevere messaggi del tipo "Maximum execution time of 30 seconds exceeded”.

Nel caso modificare il file .htaccess del proprio spazio hosting web.

es. php_value max_execution_time 300

oppure il file php.ini

es. max_execution_time = 300

incrementandone il valore. Nell'esempio di cui sopra è espresso in secondi. 300 secondi = 5 minuti.

[borja]

Esatto qualcosa di simile...
Comunque io ho eseguito i file per generare la sitemap e forse ci sono voluti anche più di 5 minuti.
Eppure nessun errore.
Sarebbe interessante se qualche utente, con una sitemap più grande della mia (con più di 1100 url) provasse a utilizzare i codici della guida.

[giuggiola.fra]

cancellare

[borja]

Ciao
la sitemap ?normale? quella inviata ai motori di ricerca per indicizzare le pagine quanti url ha ?
L?hai creata con il CMS ?

hai inserito il file della sitemap nella cartella...
Come si chiama il file ?

Hai effettuato quelle piccole modifiche richieste?
(Sostituire il www.example.com con il tuo link)

E cosa piu importante puoi caricare un porzione della tua sitemap ?
La prima parte con il primo url

[giuggiola]

@Borja said:

Esatto qualcosa di simile...
Comunque io ho eseguito i file per generare la sitemap e forse ci sono voluti anche più di 5 minuti.
Eppure nessun errore.
Sarebbe interessante se qualche utente, con una sitemap più grande della mia (con più di 1100 url) provasse a utilizzare i codici della guida.

Ciao Borja,
ho provato il tuo script su un sito con 2500 url. Purtroppo però la sitemap immagini generata non è completa, perché guardando il file xml generato, si basa solo su 50 url.
Ho provato in due modi:

1. generando la sitemap tramite il tuo script su proxy-sitemap.php e successivamente parsing-sitemap.php per generare la sitemap immagini
2. generando la sitemap con un plugin del cms (il sito è fatto con Magento), caricandola dentro a /crea-sitemap-immagini/sitemap/ e poi facendo partire lo script parsing-sitemap.php
   ma in tutti e due i casi la sitemap immagini generata è identica.

Non so se è un problema derivato dal numero di url superiore rispetto a quelle del tuo sito, oppure del server che interrompe lo script.
Provo ad indagare e nel caso aggiorno la discussione

[giuggiola]

@Borja said:

Ciao
la sitemap “normale” quella inviata ai motori di ricerca per indicizzare le pagine quanti url ha ?
L’hai creata con il CMS ?

Ha 2521 url (controllato con Google Search Console dopo averla caricata lì)
Ho fatto 2 prove

1. generata tramite il tuo script
2. generata con plugin del CMS
   [RIGHT][/RIGHT]

@Borja said:

hai inserito il file della sitemap nella cartella...
Come si chiama il file ?
sitemap.xml

@Borja said:

Hai effettuato quelle piccole modifiche richieste?
(Sostituire il www.example.com con il tuo link)
Sì

@Borja said:

E cosa piu importante puoi caricare un porzione della tua sitemap ?
La prima parte con il primo url
Della Sitemap "normale" oppure quella immagini?

[borja]

Metti un estratto di entrambe le sitemap (quella normale e quella immagini)

magari la prima parte fino al primo url

[borja]

@giuggiola said:

Ha 2521 url (controllato con Google Search Console dopo averla caricata lì)
Ho fatto 2 prove

1. generata tramite il tuo script
2. generata con plugin del CMS
   [RIGHT][/RIGHT]

sitemap.xml

Sì

Della Sitemap "normale" oppure quella immagini?

Cavolo ho capito il perchè ! ora ti spiego...spero che @giorgiotave possa modificare il primo post

[borja]

**+++MODIFICA NECESSARIA+++

**Ragazzi dovete modificare questa porzione di codice del file parsing-sitemap.php
Nella parte di codice inserita alla fine del **foreach **(linea 83 dovrebbe essere)

Avete queste linee di codice:

[PHP]
/* Se vuoi scansionare solo i primi 400 links della tua sitemap.xml decommenta questa parte
*/
$index++;
if($index == 50){
break;
}
[/PHP]

Voi potete muovermi in due modi.

A) commentando quella parte di codice così non sarà eseguita

[PHP]
/* Se vuoi scansionare solo i primi 400 links della tua sitemap.xml decommenta questa parte
$index++;
if($index == 50){
break;
}
*/
[/PHP]

B) oppure eliminandola del tutto
+++

E' una modifica veramente semplice da realizzare e mi dispiace che si sia resa necessaria.
Praticamente avevo inserito quel blocco di codice convinto che fosse commentato !
Così facendo l'utente avrebbe dovuto semplicemente decommentarlo se avesse voluto creare una sitemap-immagini analizzando solo i primi 50 url della "sitemap normale".

Quindi eliminatelo o commentatelo e sarà creata una sitemap-immagini completa grazie all'analisi di tutti gli url.
Se ad esempio invece volete analizzare solo i primi 400 url della sitemap "normale" basterà modificare 50 in **400

Ringrazio @giuggiola **perchè forse è il primo utente del forum che prova la guida, quindi questi piccoli problemi sarebbero emersi solo con i primi test.
Comunque giuggiola fai questa piccola modifica e fammi sapere !

Ah ovviamente non è necessario che tu inserisca le porzioni delle sitemap.
Il problema era in quella piccola parte di codice.

P.S: ho cercato di commentare tutti i file affinchè anche gli utenti meno esperti fossero guidati nella creazione della sitemap-immagini....che dispiacere aver dimenticato quella parte non commentata!

[giuggiola]

Grandissimo @Borja!
Ho commentato la parte che hai indicato, impostato max_execution_time a 10000 (esagerata lo so , ma 1000 non era abbastanza!) e la sitemap immagini è stata generata!

Grazie davvero, ottimo script!

[borja]

@giuggiola said:

Grandissimo @Borja!
Ho commentato la parte che hai indicato, impostato max_execution_time a 10000 (esagerata lo so , ma 1000 non era abbastanza!) e la sitemap immagini è stata generata!

Grazie davvero, ottimo script!

Ohhhhh che bello !
Sono veramente contento che funzioni anche con siti web più grandi del mio.

Mi auguro la guida possa servire per moltissimi altri utenti

Per ora i primi ad averla utilizzata dovremmo essere io e te

Saluti !

[giorgiotave]

Borja che hai delle modifiche che vuoi apportare al file oppure vuoi darmi più versioni: fallo!

[borja]

@Giorgiotave said:

Borja che hai delle modifiche che vuoi apportare al file oppure vuoi darmi più versioni: fallo!

Non ti volevo inviare l'ennesima mail :bho:
Comunque ti ho appena inviato il nuovo pacchetto zip con i file corretti.

Ora la modifica effettuata da @giuggiola non sarà più necessaria.
La guida funzionerà semplicemente realizzando ciò che ho scritto nel mio primo post.

[giorgiotave]

Ma figurati! Ho aggiornato, è quello corretto?

[borja]

Yess

[gmd]

Ciao Borja,
grazie per il tuo utilissimo script che ho appena implementato sul mio e-commerce in Prestashop 1.7.
Prestashop ha da sempre un grande problema per la sitemap di immagini, il tuo script permette di risolvere in parte la problematica.

Ho fatto delle piccole modifiche per fare in modo che la sitemap riportasse solo le immagini dei prodotti thickbox_default che ho settato a 1200px di larghezza non considerando tutte le immagini più piccole.
Praticamente seguendo le tue indicazioni ho puntato lo script verso le immagini con classe "img-fluid" presenti nel div con id=product-images-large. Per far ciò ho dovuto cambiare "src" con "data-image-large-src".
Inoltre ho aggiunto l'attributo caption alla sitemap.

Premetto che sono un semplice "smanettone" e non sò programmare ma lo script sembra girare. Il codice foreach dopo le modifiche è questo:

//ciclo e cerco i tag img (se volete fare qualche modifica andate alle ultime righe del file)if($doc-> find("div[id='product-images-large']",0)){
	foreach($doc-> getElementById('product-images-large')-> find("img[class='img-fluid']") as $item){
		$src =  $item->getAttribute('data-image-large-src');	//estrapolo l'attributo 'src' del tag 'img' (sarebbe l'url dell'immagine)
		$title= $item->getAttribute('title');	//estrapolo l'attributo 'title' del tag 'img'
		$caption= $item->getAttribute('alt');	//estrapolo l'attributo 'caption' del tag 'img'
		
		/*
		se si tratta di un "path relativo" allora il primo carattere sarà "/" 
		in questo caso però dobbiamo dare alla sitemap-immagini il path assoluto dell'immagine
		*/
		if(strpos($src,"/") == 0){
			$src= $homepage.$src;	//uniamo link della homepage e path relativo 
		}
		
		if($title != ""){ //se il tag 'img' possiede un title creo l'elemento xml
			$title_element= '<image:title>'.$title.'</image:title>';
		}
		else{ //altrimenti nessun elemento title xml 
			$title_element= '';
		}
		
		if($caption != ""){ //se il tag 'img' possiede un alt creo l'elemento xml
			$caption_element= '<image:caption>'.$caption.'</image:caption>';
		}
		else{ //altrimenti nessun elemento alt xml 
			$caption_element= '';
		}
		
		//creo la struttura xml per ogni singola immagine estrapolata dalla pagina
		$element_image=	$element_image.'<image:image><image:loc>'.$src.'</image:loc>'.$title_element.' '.$caption_element.'</image:image>';
	}
}	

Grazie ancora.

[borja]

Ciao GMD sono contento tu l'abbia trovato utile.
In fin dei conti il mio script è abbastanza generico però può essere adattato a seconda delle varie esigenze (ad esempio nel mio caso considero solo le immagini che abbiano determinate classi).

Comunque in merito a ciò che hai scritto ho solo due perplessità:

1. hai modificato "src" con "data-image-large-src" ma quale sarebbe il valore presente nel tuo attributo **data-image-large-src ? **(mi auguro sia il percorso in cui è presente l'immagine)

2. Nel codice che hai postato ho notato che la tua prima linea di codice si trova sulla stessa linea commentata (devono essere linee diverse altrimenti non funziona)...