json-ld – Tarik Billa

Add ld+json script tag in client-side React

January 3, 2024 by Tarik

For me, React Helmet works well. <Helmet> <script className=”structured-data-list” type=”application/ld+json”>{structuredJSON}</script> </Helmet> Where structuredJSON is something like result of such function: export const structuredDataSingle = (prod, imgPath, availability) => { let data = { “@context”: “http://schema.org/”, “@type”: “Product”, “name”: `${prod.title}`, “image”: prod.images.map((item) => imgPath + item), “description”: prod[‘description’], “url”: location.href, “offers”: { “@type”: “Offer”, “priceCurrency”: `${prod[‘currency’] … Read more

Get route by name and params for vue-router

December 9, 2023 by Tarik

You are looking for the Router instance’s resolve method: Given location in form same as used in <router-link/>, returns object with the following resolved properties: { location: Location; route: Route; href: string; } In your case you could do something like this to get the url: let props = this.$router.resolve({ name: ‘ProductDetail’, params: { id: … Read more

Microdata or JSON-LD? I’m confused

March 10, 2023 by Tarik

Consumers that support Microdata support Microdata, no matter if or where Microdata is specified. It’s conceivable that new consumers might decide not to support it, but the syntax is still very popular and still part of WHATWG’s HTML Living Standard, so it’s probably not going to vanish. About the consumer Google Some years ago, JSON-LD … Read more

Microdata, RDFa or JSON-LD Appropriate or best usage?

March 8, 2023 by Tarik

Schema.org is a vocabulary that can, like any other vocabulary, be used in many forms. The website http://schema.org/ has examples using Microdata and the RDF syntaxes RDFa and JSON-LD, but these are not the only syntaxes it can be used with. You could, for example, use it with any other RDF syntax like Turtle or … Read more

Adding script tags in Angular component template

February 28, 2023 by Tarik

Maybe a little late to the party here, but since the above answers do not work well with Angular SSR (e.g. document is not defined server-side or document.createElement is not a function), I decided to write a version that works for Angular 4+, in both server and browser context: Component Implementation import { Renderer2, OnInit, … Read more

Best JSON-LD practices: using multiple elements?

January 31, 2023 by Tarik

There is no benefit in having single or multiple data blocks, other than limitations around how you might store and manage schema data in your website. For example, you might need them separate if different components within your website are responsible for generating each data block independently. Alternatively, if your website is able to manage … Read more

What’s a `{jsonObj}` in a `head` section do?

January 28, 2023 by Tarik

In your example, the script element is used as data block, which contains JSON-LD (type=”application/ld+json”). JSON-LD is a RDF serialization. It allows you to publish Linked Data (or structured data) using JSON. In your example, the vocabulary Schema.org is used (“@context”: “http://schema.org”). This structured data can be used by any interested consumer. Prominent consumers are … Read more

Schema.org – JSON-LD – Where to Place?

December 27, 2022 by Tarik

The data can be placed anywhere. From Google’s documentation: The data, enclosed within the <script type=”application/ld+json”> … </script> tags as shown in the examples below, may be placed in either the <HEAD> or <BODY> region of the page that displays that event. You can also use data dynamically fetched using AJAX: JSON-LD markup inserted by … Read more