Migliora il SEO del tuo progetto Laravel con la potenza di artesãos/seotools

artesãos/seotools è un interessante pacchetto Laravel che vi sarà di grande aiuto nello sviluppo di siti web che necessitano di SEO per posizionarsi ai primi posti nei risultati di ricerca di Google.

La SEO, o ottimizzazione per i motori di ricerca, sono quell’insieme di attività per ottimizzare le pagine di un sito web in modo che si posizionino ai primi posti nei risultati di ricerca di Google.

1. Installazione e utilizzo

L’installazione e l’utilizzo di questo pacchetto sono relativamente semplici e non richiedono molta configurazione. La documentazione sulla pagina GitHub del pacchetto è inoltre piuttosto completa e facile da seguire. Per installare questo pacchetto nel tuo progetto Laravel, è sufficiente eseguire il seguente comando nella riga di comando (assicurati di trovarti nella directory del progetto Laravel):

composer require artesaos/seotools

Questo installerà automaticamente il pacchetto e aggiornerà il composer.jsonfile. Dopodiché, apri il config/app.phpfile e aggiorna l’ providersarray in questo modo:

<?php

return [
    // ...
    'providers' => [
        Artesaos\SEOTools\Providers\SEOToolsServiceProvider::class,
        // ...
    ],
    // ...
];

Successivamente, scorri un po’ verso il basso nello stesso file per aggiornare l’array `aliases`:

<?php

return [
    // ...
    'aliases' => [
        'SEOMeta'     => Artesaos\SEOTools\Facades\SEOMeta::class,
        'OpenGraph'   => Artesaos\SEOTools\Facades\OpenGraph::class,
        'Twitter'     => Artesaos\SEOTools\Facades\TwitterCard::class,
        'JsonLd'      => Artesaos\SEOTools\Facades\JsonLd::class,
        'JsonLdMulti' => Artesaos\SEOTools\Facades\JsonLdMulti::class,        
    ],
    // ...
];

Dopo aver configurato il config/app.phpfile, eseguire il seguente comando per pubblicare la configurazione del pacchetto:

php artisan vendor:publish --provider="Artesaos\SEOTools\Providers\SEOToolsServiceProvider"

Inoltre, per evitare che il titolo predefinito termini con la stringa “- Oltre 9000 mila!”, è necessario modificare il titolo predefinito nel config/seotools.phpfile. È sufficiente impostare la chiave title su false negli array meta, opengraph, e , come mostrato di seguito:json-ld

<?php
return [
    "meta" => [
        "defaults" => [
            "title" => false, // set false to total remove
            //...
        ]
            //...
    "opengraph" => [
        "defaults" => [
            "title" => false, // set false to total remove
            //...
        ],
    ],
           //...
    "json-ld" => [
        "defaults" => [
            "title" => false, // set false to total remove
            //...
        ],
    ],
];

Questo conclude la configurazione. Ora passiamo a come utilizzare il pacchetto nel Controller e nella Blade View.

2. Utilizzo di SEOTools nel Controller

È possibile personalizzare l’utilizzo di SEOTools nel controller per generare gli elementi SEO necessari. Nell’esempio seguente, mostrerò come generare l’ottimizzazione SEO per la homepage utilizzando tutte le interfacce SEOTools disponibili.

use Artesaos\SEOTools\Facades\SEOMeta;
use Artesaos\SEOTools\Facades\OpenGraph;
use Artesaos\SEOTools\Facades\TwitterCard;
use Artesaos\SEOTools\Facades\JsonLd;
//...
public function index(){
    $setting = Setting::first();
    SEOMeta::setTitle('Home');
    SEOMeta::setDescription(strip_tags($setting->about_us));
    SEOMeta::setCanonical($setting->link);
    OpenGraph::setDescription(strip_tags($setting->about_us));
    OpenGraph::setTitle('Home');
    OpenGraph::setUrl($setting->link);
    OpenGraph::addProperty('type', 'articles');
    TwitterCard::setTitle('Home');
    TwitterCard::setSite('@TwitterUsername');
    JsonLd::setTitle('Home');
    JsonLd::setDescription(strip_tags($setting->about_us));
    JsonLd::addImage(Storage::url('cms_images/'.$setting->logo));
    //...
    return view('front.theme1.index'));
}

Qui utilizziamo quattro facade: SEOMeta, OpenGraph, TwitterCard, e JsonLd. La facade SEOMeta genera meta tag come il titolo, la descrizione e il link canonico. La facade OpenGraph genera tag OG che consentono alle piattaforme di social media di riconoscere la pagina. La facade TwitterCard genera meta tag Twitter Card e la facade JsonLd genera markup schema per i dati strutturati.

3. Visualizzazione dei risultati SEO generati nelle viste Blade

Una volta generati gli elementi SEO nel controller, visualizzali nel file Blade View, in particolare all’interno del <head>tag, in questo modo:

<!DOCTYPE html>
  <head>
      {!! SEOMeta::generate() !!}
      {!! OpenGraph::generate() !!}
      {!! Twitter::generate() !!}
      {!! JsonLd::generate() !!}
  
      <!-- atau -->
      {!! SEO::generate() !!}
      //...
  </head>
  <body>
      //...
  </body>
</html>

Quando viene visualizzato nel browser, questo codice genererà i corrispondenti meta tag e il markup schema, in modo simile al seguente:

<!DOCTYPE html>
  <head>
      <title>Title - Over 9000 Thousand!</title>
      <meta name="description" content="Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.">
      <link rel="canonical" href="https://www.example.com">
      <meta property="og:description"content="description..." />
      <meta property="og:title"content="Title" />
      <meta property="og:url"content="http://current.url.com" />
      
      <meta property="og:image"content="http://image.url.com/cover.jpg" />
      <meta property="og:image"content="http://image.url.com/img1.jpg" />
      <meta property="og:image"content="http://image.url.com/img2.jpg" />
      <meta property="og:image"content="http://image.url.com/img3.jpg" />
      <meta property="og:image:url"content="http://image.url.com/cover.jpg" />
      <meta property="og:image:size"content="300" />
  
      <meta name="twitter:card"content="summary" />
      <meta name="twitter:title"content="Title" />
      <meta name="twitter:site"content="@LuizVinicius73" />
      
      <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","name":"Title - Over 9000 Thousand!"}</script>
      <!-- OR with multi -->
      <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","name":"Title - Over 9000 Thousand!"}</script>
      <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"Title - Over 9000 Thousand!"}</script>
  </head>
  <body>
       //...
  </body>
</html>

Per verificare quali elementi SEO potrebbero mancare o necessitare di miglioramenti, è possibile utilizzare strumenti SEO come SiteChecker o altri presenti sul WEB.