How to set title and meta tags?

#1

For my web app, I would like to set the title tag of the page, so that users can see the current state in the tab.

Also, would be ideal if I could also set meta tags, so that I could set things like preloading of assets, meta description etc.

How can this be achieved in LiveWire?

#2

Maybe something like a meta/title stack would work; similar to how the JS stacks work: https://laravel-livewire.com/docs/inline-scripts/

1 Like
#3

Yeah that could work indeed, thanks.

Isn’t this something that should be a first-class citizen of the framework? I can imagine the XHR might contain a head section that will automatically set head tags for you.

#4

Hi,

I use this package to set the title page and the meta tags I need in a page.

1st

Put SEO::generate() in your master layout file (Eg. resources/views/layout/app.blade.php)

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {!! SEO::generate() !!}
    ...
</head>
<body>
    ...
</body>
</html>

2nd

In the mount() function of your Livewire Component set the tags for your page, like:
examples taken from Livewire doc and Seotools doc.



use Livewire\Component;
use Artesaos\SEOTools\Facades\SEOTools;

class ShowContact extends Component
{
    public $name;
    public $email;

    public function mount($id)
    {
        $contact = User::find($id);

        $this->name = $contact->name;
        $this->email = $contact->email;

        SEOTools::setTitle('Home');
        SEOTools::setDescription('This is my page description');
        SEOTools::opengraph()->setUrl('http://current.url.com');
        SEOTools::setCanonical('https://codecasts.com.br/lesson');
        SEOTools::opengraph()->addProperty('type', 'articles');
        SEOTools::twitter()->setSite('@LuizVinicius73');
        SEOTools::jsonLd()->addImage('https://codecasts.com.br/img/logo.jpg');
    }

    ...
}

I hope this help you :grinning:

Cheers,
—Maurizio