4. JSON-LD

Introduction

JSON-LD (JavaScript Object Notation for Linked Data) is a W3C recommended standard widely used for embedding structured data in web pages. Google supports the JSON-LD format to help website owners provide richer contextual information to search engines, thereby enhancing search result displays (such as knowledge graphs, rich results, etc.).

Documentation

Google JSON-LD Definition https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=en

JSON-LD Components

Component File
app/components/JsonLD/WebSite.vue This defines the website's basic information in json-ld data.
Usage in Vue SPA.

<JsonLDWebSite />

Output

<script type="application/ld+json">[{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "SaaS Fast INFO",
  "alternateName": "SaaS Fast - SaaS Fast Development Template - Nuxtjs",
  "description": "SaaS Fast - Welcome to use SaaS Fast Development Template! We will show you how to significantly improve work efficiency, optimize resource allocation, and free up your valuable time using our product.",
  "url": "https://saas.ducafecat.com/",
  "logo": "https://saas.ducafecat.com/logo.svg",
  "foundingDate": "2024",
  "email": "ducafecat@gmail.com",
  "sameAs": ["https://www.youtube.com/@ducafecat", "https://space.bilibili.com/404904528"],
  "founder": [{
    "@type": "Person",
    "name": "Ducafe cat",
    "jobTitle": "CEO"
  }]
}, {
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Ducafe cat",
  "alternateName": "CEO",
  "description": "Ducafecat is a highly experienced independent software developer.",
  "url": "https://saas.ducafecat.com/data",
  "image": "https://saas.ducafecat.com/logo.svg",
  "jobTitle": "CEO",
  "memberOf": {
    "@type": "Organization",
    "name": "ducafecat INFO"
  },
  "worksFor": {
    "@type": "Organization",
    "name": "ducafecat INFO",
    "url": "https://saas.ducafecat.com.com/"
  },
  "sameAs": ["https://www.youtube.com/@ducafecat", "https://space.bilibili.com/404904528"]
}, {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "SaaS Fast",
  "alternateName": "SaaS Fast - SaaS Fast Development Template - Nuxtjs",
  "description": "SaaS Fast - Welcome to use SaaS Fast Development Template! We will show you how to significantly improve work efficiency, optimize resource allocation, and free up your valuable time using our product.",
  "keywords": "SaaS Fast Development Template, Code Download, Independent Developer Resources",
  "url": "https://saas.ducafecat.com",
  "image": "https://saas.ducafecat.com/logo.svg"
}]</script>

Check if JSON-LD is Correct

Google URL: https://search.google.com/test/rich-results

Google JSON-LD Testing

end