why inertia head did not work for twitter

Hi, I added below code in the template and import the Head component from inertia. The meta tags are in the head but twitter card did not appear when the page is shared.

<template>
    <Head>
        <title> {{ story.title }}</title>
        <meta name="twitter:card" content="summary">
        <meta name="twitter:site" content="@makerstorage">
        <meta name="twitter:title" :content="story.title">
        <meta name="twitter:image" :content="imageUrl">
    </Head>
...
<script setup>
import { Head } from '@inertiajs/vue3'

gych

2 years ago

Level 29

Do you use server side rendering? If not you might have to use a different approach to add these meta tags in the page head.

nerginer

2 years ago

Level 6

I am not using SSR

gych

2 years ago

Level 29

@nerginer Twitter can't render javascript

So you have to either use SSR or use another approach to inject the meta tags in the head via the controller

nerginer

2 years ago

Best Answer

Level 6

thanks @gych I want to share what I did for the others

in app.blade.php

    @if(isset($page['props']['event']))
    <meta name="twitter:card" content="{{ (isset($page['props']['event']['card'])) ? $page['props']['event']['card'] : '' }}" />
    <meta name="twitter:site" content="{{ (isset($page['props']['event']['site'])) ? $page['props']['event']['site'] : '' }}" />
    <meta property="og:url" content="{{ (isset($page['props']['event']['url'])) ? $page['props']['event']['url'] : '' }}" />
    <meta property="og:title" content="{{ (isset($page['props']['event']['twitterTitle'])) ? $page['props']['event']['twitterTitle'] : '' }}" />
    <meta property="og:description" content="Story created by story-blocks" />
    <meta property="og:image" content="{{ (isset($page['props']['event']['image'])) ? $page['props']['event']['image'] : '' }}" />
    @endif

then in the controller


       return Inertia::render('Story', [
            'event' => [
                'card' => 'summary',
                'site' => '@makerstorage',
                'url' => url('/') . '/stories/' . $story->story_id,
                'twitterTitle' => $story->title,
                'image' => url('/') . $url,
            ],
            'story' => $story,
            'imageUrl' => $url
        ]);

gych

2 years ago

Level 29

@nerginer Ok just keep in mind that for others using SSR might be a better solution.

Also by using your solution the defined meta tags will always be added in the head of the page, even if the content for the meta tag is empty.

Its better to have more flexibility to inject the complete desired meta tags from the controller to the head.

Below I've added a more complete alternative to your solution which can be used with all kinds of meta tags.

Create file with Seo class in app/Seo/Seo.php

namespace App\Seo;

class Seo
{
    protected static $meta = [];

    public static function add($type, $name, $content)
    {
        if ($type == 'meta') static::$meta[$name] = $content;
    }

    public static function render($type)
    {
        if ($type == 'meta') {
            $html = '';
            foreach (static::$meta as $name => $content) {
                $html .= '<meta name="' . $name . '" content="' . $content . '" />' . PHP_EOL;
            }
            return $html;
        } 
    }
}

Add this in app.blade head

    {!! \App\Seo\Seo::render('meta') !!}

In the controller add this

use App\Seo\Seo;

Use this in controller method to inject meta tags

        Seo::add('meta', 'twitter:card', 'summary');
		Seo::add('meta', 'twitter:site',  '@makerstorage');
		// ... rest of the desired meta tags

This approach can even be extended to also add canonical urls and schema's to the head. If you also want info on this let me know and I add these to the example.

Please or to participate in this conversation.