Dynamically add ld+json schema in angular SPA index.html

Question

I'm working on an angular app. Every page of my app is, basically, index.html:

<!doctype html>
<html lang="en">
<head>
    <base href="/my-app/">
    <title>MyApp</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link...>
    <script> ... </script>
</head>

<body>
    <app-root></app-root>
</body>
</html>

I want to add a schema.org's DataCatalog to this but with dynamic values. Imagine I've a list of items displayed, each item has a name, I want those names to appear in the DataCatalog's keywords (just imagine):

<!doctype html>
<html lang="en">
<head>
    <base href="/my-app/">
    <title>MyApp</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link...>
    <script> ... </script>
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "DataCatalog",
            "description": "MyApp Description",
            "keywords": [
                "dynamicValue1",
                "dynamicValue2"
            ],
            "license": "https://www.gnu.org/licenses/gpl-3.0.en.html",
            "name": "MyApp",
            ...
        }
    </script>
</head>

<body>
    <app-root></app-root>
</body>
</html>

Can anyone help me on how to do this? I feel like I've search the whole internet and no one seems to have a similar issue.

What I've tried:

Add :

<script type="application/ld+json" src="src/datacatalog.json"></script>

in index.html and fill datacatalog.json. It doesn't seem to work, when I check the page source code, datacatalog.json seems unknown. When I right-click and save the target, I get this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /src/datacatalog.json</pre>
</body>
</html>

I'm not sure what to do with this.

Also tried to programatically add the script in an Angular component (from another SO thread I saw) but it did nothing.

Thank you

Follow this advice from Trevor Fox: https://trevorfox.com/2017/03/json-ld-files-with-javascript/ — Jay Gray, May 27 '23 at 17:22
Does this answer your question? [Adding script tags in Angular component template](https://stackoverflow.com/questions/38088996/adding-script-tags-in-angular-component-template) — Brian Tompsett - 汤莱恩, Jun 02 '23 at 07:54

score 0 · Accepted Answer · answered Jun 01 '23 at 15:20

I've manage to solve my issue with the help of this thread

Basically, you can write in index.html from an angular component. The component loaded just happens to be the one making request to my backend to get all the data I need to fill the schema.

Schema.org and google's validator recognize my schema and it works well.

Dynamically add ld+json schema in angular SPA index.html

1 Answers1