---
title: "Come rendere un sito SPA indicizzato correttamente (InertiaJS)"
id: "510"
type: "post"
slug: "rendere-un-sito-spa-indicizzato-inertiajs"
published_at: "2026-07-23T09:22:09+00:00"
modified_at: "2026-07-25T06:55:10+00:00"
url: "https://pierluigipapeschi.com/rendere-un-sito-spa-indicizzato-inertiajs/"
markdown_url: "https://pierluigipapeschi.com/rendere-un-sito-spa-indicizzato-inertiajs.md"
excerpt: "InertiaJS ci viene in aiuto con un sito SPA (Single Page Application). Un sito SAP ha un “punto di ingresso” HTML (di solito un div) a cui vengono agganciate tutte le pagine, tipico esempio è ReactJS, il quale a partire..."
taxonomy_category:
  - "Google"
  - "Laravel"
  - "React"
---

InertiaJS ci viene in aiuto con un sito SPA (Single Page Application). Un sito SAP ha un “punto di ingresso” HTML (di solito un **div**) a cui vengono agganciate tutte le pagine, tipico esempio è ReactJS, il quale a partire da quel punto tutte le pagine vengono generate dagli scripts Javascript.

Analizzerò un sito Laravel che usa React per la generazione delle pagine e [InertiaJS](https://inertiajs.com/)
 come strumento di generazione e utilizzo delle rotte di Laravel.

Utilizzare Inertia ci risolve già una grande quantità di problemi, quindi ne consiglio caldamente l’utilizzo quando si sviluppa un sito Laravel + React (vedi [questo articolo](https://pierluigipapeschi.com/realizzare-un-progetto-laravel-filament-reactjs-tailwindcss/)
).

## Laravel

La **view** da cui tutto il sito partirà è di norma **app.blade.php**, e questo è un tipico esempio:

```
// resources/views
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <!-- Start cookieyes banner -->
        <script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/dc1bb35facd7addaccf4e8a9/script.js"></script>
        <!-- End cookieyes banner -->
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>
        <meta name="description" content="@yield('meta_description', 'Sito che raccoglie molte delle pubblicazioni uscite nel tempo che raccontano lui e le sue opere.')">

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Styles -->
        
        <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        
        @vite(['resources/css/app.css'])

        @inertiaHead

    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>
```

Faccio subito notare 2 cose:

- il tag **<title inerita>**
- e il tag **<meta name=”description”** ecc…

Questi 2 punti sono essenziali per rendere ogni pagina “visualizzata” dai bot di Google (e gli altri motori di ricerca) diversa e impedire che venga ignorata non avendo elementi distintivi rispetto alle altre.

Per impostare questi valori in modo specifico per la pagina interessata, nel file **.jsx** va usato questo tag Javascript **<Head></Head>**

```
import { Head } from '@inertiajs/react';

export default function NomePagina() {
    return (
        <>
            <Head>
                <title>Titolo specifico di questa pagina</title>
                <meta name="description" content="Descrizione specifica di questa pagina per i motori di ricerca." />
            </Head>
            {/* Resto del contenuto pagina */}
        </>
    );
}
```

## Robots

Altro elemento da verificare è il file **robots.txt** dentro la cartella **public**, deve essere almeno così

```
User-agent: *
Allow: /
```

## Sitemap

Per aiutare i bots a trovare tutte le pagine, dare il giusto peso ad ognuna e indicare la frequenza di aggiornamento, consiglio di usare la sitemap e nello specifico di installare il plugin per Laravel [spatie/laravel-sitemap](https://spatie.be/docs/laravel-sitemap/v8/introduction)
.

Instlliamo questo plugin e pubblichiamo il suo file di configurazione

```
composer require spatie/laravel-sitemap
php artisan vendor:publish --provider="Spatie\Sitemap\SitemapServiceProvider" --tag=sitemap-config
```

Possiamo creare un comando Laravel da eseguire per far generare automaticamente la sitemap

```
php artisan make:command GenerateSitemap
```

Questo crea il file `app/Console/Commands/GenerateSitemap.php` il cui contenuto dovrebbe essere qualcosa del genere

```
<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Spatie\Sitemap\SitemapGenerator;

class GenerateSitemap extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'sitemap:generate';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Generate the sitemap';

    /**
     * Execute the console command.
     */
    public function handle(): int
    {
        SitemapGenerator::create(config('app.url'))
            ->writeToFile(public_path('sitemap.xml'));
            
        $this->info('Sitemap generated successfully.');

        return self::SUCCESS;
    }
}
```

adesso lo possiamo eseguire da console

```
php artisan sitemap:generate
```

In progetti complessi con molte pagine dinamiche può aver senso partire dalle rotte presenti nei file di Laravel (per esempio **web.php**). Prendiamo i modelli Eloquent che servono a generare le pagine e iteriamo su di esse per generare i vari url da inserire nella sitemap, per esempio vedi questo

```
Quote::query()
    ->select(['id', 'updated_at'])
    ->orderBy('id')
    ->chunkById(500, function ($quotes) use ($sitemap): void {
        foreach ($quotes as $quote) {
            $url = Url::create(
                route('show-quote', ['id' => $quote->id])
            )
                ->setPriority(0.7)
                ->setChangeFrequency(Url::CHANGE_FREQUENCY_YEARLY);

            if ($quote->updated_at !== null) {
                $url->setLastModificationDate($quote->updated_at);
            }
            $sitemap->add($url);
        }
    });
```

Vediamo che il modello di dati Quote viene filtrato, ordinato e spezzettato in chunk di 500 elementi per poi creare il suo URL, dargli una priorità e una frequenza di aggiornamento. Infine lo aggiungiamo alla sitemap.

Lanciando il comando dovremmo vedere che adesso la sitemap si popola di tutti gli url necessari.

## Google Search Console

Bene adesso passiamo questa sitemap a Google Search Console e lasciamo che vengano indicizzate le varie pagine.