OpenGraph tags not working with Inertia

Hi all, I'm busy creating a site with Laravel, Vue & Inertia and was trying to make the Open Graph tags work.

When I just hardcode the values in my app.blade.php file, everything works fine if I check the Facebook & Twitter debugger.

<meta property="og:site_name" content="ABCD">
    <meta property="og:url" content="https://abcd.be" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="ABCD" />
    <meta property="og:description" content="Lorem ipsum." />
    <meta property="og:image:url" content="{{ asset('images/sharing/share-card.png')  }}" />
    <meta property="og:image:secure_url" content="{{ asset('images/sharing/share-card.png')  }}" />
    <meta property="og:image:type" content="image/jpeg" />
    <meta property="og:image:width" content="1752" />
    <meta property="og:image:height" content="876" />

    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:site" content="@abcd" />
    <meta property="twitter:title" content="ABCD" />
    <meta property="twitter:description" content="Lorem ipsum." />
    <meta property="twitter:image" content="{{ asset('images/sharing/share-card.png')  }}" />

But if I insert the same tags within the Head component from Inertia on one of my page components, nothing is working. If I check the source code that's being generated ... everything looks fine. But the Facebook & Twitter debugger tools say 'no tags found'.

<Head>
        <title>{{ sale.name }}</title>

        <meta property="og:url" :content="sharing.url" />
        <meta property="og:title" :content="sharing.facebook.title" />
        <meta property="og:description" :content="sharing.facebook.description" />
        <meta property="og:type" content="website" />

        <meta property="og:image:url" :content="sharing.facebook.image_url" />
        <meta property="og:image:secure_url" :content="sharing.facebook.image_url" />

        <meta property="twitter:card" content="summary" />
        <meta property="twitter:site" content="@abcd" />
        <meta property="twitter:title" :content="sharing.facebook.title" />
        <meta property="twitter:description" :content="sharing.facebook.description" />
        <meta property="twitter:image" :content="sharing.facebook.image_url" />
    </Head>

Does anyone has an idea what is going wrong?

Kind regards, Frederik

Tjyoung

3 years ago

Level 14

I kind of had same issue before,

I am using following approach for my application,

// in app.blade.php
 <meta name="author" content="author name"/>
    @if(isset($page['props']['event']))
        <meta name="twitter:card"
              content="{{ (isset($page['props']['event']['card'])) ? $page['props']['event']['card'] : 'summary' }}"/>
        <meta name="twitter:site" content="@sitename"/>
        <meta property="og:title"
              content="{{ (isset($page['props']['event']['title'])) ? ('My Website | '.$page['props']['event']['title']) : 'My Website | Page' }}"/>
        <meta property="og:description"
              content="{{ (isset($page['props']['event']['description'])) ? $page['props']['event']['description'] : '' }}"/>
        <meta property="og:image"
              content="{{  (isset($page['props']['event']['image'])) ? $page['props']['event']['image'] : asset('/img/logo.png') }}"/>
    @endif
    <meta property="og:url" content="{{ url()->current() }}"/>

Now as you're using Inertia, you can pass params like following in your controller

  public function inventory()
    {
        return inertia('Inventory', [
            'event' => [
                'title' => 'Inventory',
                'image' => asset('images/banners/home.png'),
                'description' => 'My Website - Used Car inventory'
            ]
        ]);
    }

In my page view, I am passing just title

// js/pages/Inventory.vue
<template>
    <Head title="My Website - Inventory" />
    <Filter v-on:itemsChange="handleItemChange"/>
    <List :products="ListItems"/>
</template>

this approach works for me every time, note: I am checking it here: https://cards-dev.twitter.com/validator

5 likes

richardhulbert

11 months ago

Level 6

The reason you have to go through this shananigins is that Facebook or for that matter Twitter doesnt wait for Intertia to mutate the head. I my application you can dynmically add tags so i made a helper class:


class OpenGraphHelper
{
    private $page;

    function __construct($page) {
        $this->page = (object)$page;
    }

    public function meta(): string {
        $meta = '<meta property="og:title" content="' . $this->page->title . '"/>' . "\n";
        $meta .= '<meta property="og:description" content="' . $this->page->synopsis . '"/>' . "\n";
        $meta .= '<meta property="og:url" content="' . url('/') . $this->page->slug . '"/>' . "\n";
        $meta .= '<meta property="og:site_name" content="' . config('app.name', 'Laravel') . '"/>' . "\n";

        foreach ($this->page->meta as $item) {
            if (str_starts_with($item['property'], 'og:')) {
                $meta .= '<meta property="' . $item['property'] . '" content="' . $item['content'] . '"/>' . "\n";
                if ($item['property'] === 'og:image')
                    $meta .= '<meta property="twitter:image" content="' . $item['content'] . '"/>' . "\n";
            }
        }


        $meta .= '<meta property="twitter:card" content="summary_large_image"/>' . "\n";
        $meta .= '<meta property="twitter:title" content="' . $this->page->title . '"/>' . "\n";
        $meta .= '<meta property="og:description" content="' . $this->page->synopsis . '"/>' . "\n";
        return $meta;
    }

}

JussiMannisto

11 months ago

Level 50

@richardhulbert It's not about waiting. To see any dynamic changes, forums would have to fetch the HTML and related assets, then render the whole thing in a browser environment with a JS engine. They don't do that. They just fetch the HTML and check the meta tags.

Please or to participate in this conversation.