JSON-LD code breaks blade layout

Hi. Hope you can help me. I've written a json-ld schema inside a Livewire layout, but got the error "syntax error, unexpected end of file, expecting "elseif" or "else" or "endif" ". It only works if I remove the "@" character from the '@context' and '@type' directives. I'm working in Laravel 12, PHP 8.3. The pages are all Livewire components. Here's the code from the layout file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ ($title ?? false) ? $title . ' | ' . config('app.name') : config('app.name') }}</title>


    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "headline": "Title of a News Article",
        "image": [
            "https://example.com/photos/1x1/photo.jpg",
            "https://example.com/photos/4x3/photo.jpg",
            "https://example.com/photos/16x9/photo.jpg"
        ],
        "datePublished": "2024-01-05T08:00:00+08:00",
        "dateModified": "2024-02-05T09:20:00+08:00",
        "author": [{
            "@type": "Person",
            "name": "Jane Doe",
            "url": "https://example.com/profile/janedoe123"
        }, {
            "@type": "Person",
            "name": "John Doe",
            "url": "https://example.com/profile/johndoe123"
        }]
    }
    </script>

    @vite(['resources/css/app.css'])
    @livewireStyles
</head>

<body class="bg-stone-100">
    <main>
        {{ $slot }}
    </main>
    @livewireScripts
    @livewire('notifications')
    @vite(['resources/js/app.js'])
</body>

</html>

Thanks for any ideas.

LaryAI

9 months ago

Level 58

The issue is that Blade interprets the @ character as the start of a Blade directive (like @if, @foreach, etc). When you use JSON-LD, the @context and @type keys are standard, but Blade tries to parse them, causing the syntax error.

Solution:
You need to tell Blade to ignore the contents of your <script type="application/ld+json"> block. The best way to do this is to use the @verbatim directive, which tells Blade not to parse anything inside.

How to fix your code:

Replace your JSON-LD block with the following:

<script type="application/ld+json">
@verbatim
{
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    "headline": "Title of a News Article",
    "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
    ],
    "datePublished": "2024-01-05T08:00:00+08:00",
    "dateModified": "2024-02-05T09:20:00+08:00",
    "author": [{
        "@type": "Person",
        "name": "Jane Doe",
        "url": "https://example.com/profile/janedoe123"
    }, {
        "@type": "Person",
        "name": "John Doe",
        "url": "https://example.com/profile/johndoe123"
    }]
}
@endverbatim
</script>

Note:

Place @verbatim immediately after the opening <script> tag and @endverbatim before the closing </script>.
If you need to insert dynamic PHP variables into your JSON-LD, you’ll need a different approach (let me know if you need that).

Summary:
Use @verbatim to prevent Blade from parsing @context and @type in your JSON-LD. This will resolve the syntax error.

1 like

jfranc014

9 months ago

Level 10

Yes @laryai. I need a different approach for dynamic entries in the json-ld script. Maybe, the script will be generated in the backend.

JussiMannisto

9 months ago

Level 50

@jfranc014 Did you try the @verbatim directive?

jfranc014

9 months ago

Level 10

@JussiMannisto yes. It works when I apply the @verbatim directive, but If I were to generate a schema-org json-ld from a library like spatie/schema-org I'm sure the issue will persist.

JussiMannisto

9 months ago

Level 50

@jfranc014 Why would that be the case?

jfranc014

9 months ago

Level 10

@ghabe, Oh, great! Thanks for letting me know that. I'll try it and come back to tell how it worked.

Snapey

9 months ago

Level 122

consider @verbatim is part of your layout, not part of the json-ld

Why would system generated json break it?

martinbean

9 months ago

Level 80

@jfranc014 @context is a Blade directive. You either need to escape your JSON-LD data, or generate it dynamically and use a helper like @json($schema) to print it in your template.

2 likes

Please or to participate in this conversation.