Part 3 of 4

Can I Make Google Happy?

View full series →

Completed

Tech·Beginner

JSON-LD Schema: The Secret Language That Talks Directly to Google

Apr 5, 2026·7 min read·1,382 words

#nextjs #seo #json-ld #structured-data #schema-org #google-rich-results #next-js-app-router-seo #frontend-developer-seo

𝕏 in

Key Takeaways

→JSON-LD structured data is a machine-readable layer Google invented so pages can describe themselves beyond HTML
→The Person schema can get your portfolio into Google's Knowledge Graph and unlock rich results
→sameAs is the most powerful field — it links your portfolio to your LinkedIn, GitHub, and other profiles so Google can verify your entity
→Always use absolute URLs in JSON-LD (not relative paths) — this JSON is parsed outside page context
→Validate with Google's Rich Results Test before pushing to production

This post is Part 3 of the Can I Make Google Happy? series.

Introduction

Open Graph tells social platforms how to preview your link. Your metadata tells Google your title and description. But there's a third layer that most developers completely skip — one that can get you rich results in Google Search.

It's called JSON-LD structured data, and it's literally a language Google invented so websites can describe themselves in a way machines understand perfectly.

In this blog, I'll walk through the Person schema you should embed in your portfolio and show you how to verify it's working in Google Search Console's Rich Results report.

What Is Structured Data?

When Google crawls your page, it reads HTML — but HTML is designed for humans, not machines. A <h1> tag says "this is a heading" but it doesn't say *what kind* of heading or *what it means*.

Structured data fixes this. It's a block of JSON you embed in your page that tells Google:

"I am a Person. My name is Your Name. My job title is Frontend Developer. Here are my social profiles."

→Build Knowledge Panels (the info box on the right side of search results)
→Generate Rich Results (enhanced search listings with extra info)
→Better understand entity relationships (you + your employer + your skills)

The Schema to Add to Your Portfolio

In src/app/layout.tsx, add this right inside the <body> tag:

tsx

const personSchema = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: "Your Name",
  url: "https://yourname.dev",
  jobTitle: "Frontend Developer",
  description:
    "Frontend Developer building production React & Next.js applications.",
  email: "youremail@gmail.com",
  address: {
    "@type": "PostalAddress",
    addressLocality: "Your City",
    addressRegion: "Your Region",
    addressCountry: "US",
  },
  image: "https://yourname.dev/assets/profile.jpg",
  sameAs: [
    "https://linkedin.com/in/yourprofile",
    "https://github.com/yourusername",
  ],
};

// Inside the layout JSX:
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(personSchema) }}
/>

## Breaking Down Every Schema Property

`@context`

json

"@context": "https://schema.org"

This tells Google which vocabulary you're using. Always https://schema.org — it's the universal standard supported by Google, Bing, and Yandex.

`@type`

json

"@type": "Person"

The schema type. Person is correct for a personal portfolio. Other types include Organization, Article, Product, JobPosting, etc. For a portfolio, Person unlocks the ability to appear in Google's Knowledge Graph.

`name`, `url`, `jobTitle`

json

"name": "Your Name",
"url": "https://yourname.dev",
"jobTitle": "Frontend Developer"

Core identity fields. jobTitle maps to what Google shows in a Knowledge Panel. Keep it consistent with your OG title and your actual LinkedIn job title.

`description`

json

"description": "Frontend Developer building production React & Next.js applications."

Machine-readable context. Not shown to users directly, but Google uses it to understand your expertise and surface your site for relevant queries.

`address`

json

"address": {
  "@type": "PostalAddress",
  "addressLocality": "Your City",
  "addressRegion": "Your Region",
  "addressCountry": "US"
}

This is why local SEO works. When someone searches "frontend developer near me" or "hire React developer [your city]", this address field tells Google you're the right match.

The @type: "PostalAddress" is a nested schema type — structured data can reference other schema types inside it.

Country code: Use ISO 3166-1 alpha-2 codes (IN for India, US for United States, GB for UK).

`image`

json

"image": "https://yourname.dev/assets/profile.jpg"

The photo Google may use in your Knowledge Panel. Always use an absolute URL (not a relative path) — this JSON is parsed outside the page context.

→Clear, professional photo
→At least 160×160 pixels
→Publicly accessible (not behind auth)

`sameAs` — The Authority Builder

json

"sameAs": [
  "https://linkedin.com/in/yourprofile",
  "https://github.com/yourusername"
]

sameAs is the most powerful field for building entity authority.

Google's Knowledge Graph works by connecting entities. When you list your LinkedIn and GitHub here, you're telling Google:

"The person on this portfolio is the same person on LinkedIn and GitHub."

Google cross-references all three pages, sees consistent information, and becomes more confident your entity deserves a Knowledge Panel.

→Twitter/X profile
→Dev.to profile
→Stack Overflow profile
→NPM profile

Why `dangerouslySetInnerHTML` Is Safe Here

The name sounds alarming, but here it's completely safe because:

1.personSchema is a hardcoded JavaScript object defined in the same file
2.There is no user input anywhere in this object
3.JSON.stringify() escapes the content before insertion

The alternative is importing a JSON file:

tsx

import personSchema from "@/lib/schema.json";

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(personSchema) }}
/>

Both approaches are equivalent in safety. The concern with dangerouslySetInnerHTML is injecting unsanitized user input — this is the opposite of that.

Testing Your Schema

Method 1: Google's Rich Results Test

1.Go to search.google.com/test/rich-results
2.Paste your URL or paste your JSON-LD code directly
3.Click "Test URL" or "Test Code"

The results panel shows three sections — Detected items (which schema types Google found), Valid items (green checkmark), and Errors/Warnings (anything missing or incorrect).

Method 2: Schema.org Validator

1.Go to validator.schema.org
2.Paste your URL
3.It shows all structured data found on the page, parsed and formatted

Google Search Console: Rich Results Report

After Google crawls your page (usually 3–7 days after publishing), check the Rich Results report:

Step 1: Open Google Search Console

Step 2: In the left sidebar, click Enhancements → Rich Results

Step 3: The report groups pages into three states:

→Valid — schema is correct and eligible for rich results
→Valid with warnings — working but could be improved
→Error — invalid schema that won't generate rich results

Step 4: Click any item to see exactly which URL has issues and what the error is.

Important: Not every valid schema results in a rich result. Google decides whether to show it based on its own quality signals. Valid schema is necessary — but not sufficient.

What Schema Types to Add Next

Once Person is working, here are the next schemas worth adding for a portfolio:

Schema Type	Where to Add	Benefit
`WebSite`	`layout.tsx`	Enables Google Sitelinks Search Box
`BreadcrumbList`	Individual pages	Breadcrumbs in search results
`Article`	Blog posts	Article rich results
`FAQPage`	FAQ section	FAQ dropdowns in search results

Summary Checklist

→Person schema defined with name, url, jobTitle, description
→address with city, region, and country code
→image using an absolute URL to your photo
→sameAs with all social profiles (LinkedIn, GitHub, Twitter)
→<script type="application/ld+json"> injected in <body>
→Validated with Google Rich Results Test — zero errors
→Checked GSC Rich Results report after indexing

Resources

→Schema.org/Person — full list of available Person properties
→Google Rich Results Test — validate your schema instantly
→Schema.org Validator — alternative validator with detailed output
→Google Search Console — monitor Rich Results after indexing

FAQ

Do I need structured data to rank on Google?

No — structured data is not a ranking factor. But it unlocks rich results, which get significantly higher click-through rates than plain blue links. It's one of the highest-ROI additions you can make to a portfolio.

Can I add multiple schema types to one page?

Yes. You can have Person, WebSite, and BreadcrumbList all on the same page. Each goes in its own <script type="application/ld+json"> tag, or you can use an array at the top level: [{...Person}, {...WebSite}].

Why hasn't my Knowledge Panel appeared yet?

Knowledge Panels are at Google's discretion — valid schema makes you *eligible*, not guaranteed. Factors that help: consistent information across your website, LinkedIn, and GitHub; inbound links from credible sources; and age of your domain. Most developer portfolios see Knowledge Panel results after 2–6 months of consistent presence.

// you just read about nextjs→ you might like

#nextjs

Sitemaps + robots.txt: How to Tell Google Every Page of Your Portfolio

Part 4

8 min read · 2026-04-07

↳ also: nextjs, seo, next-js-app-router-seo, frontend-developer-seo

#nextjs

Open Graph + Twitter Cards: Making Links Look Great on Social

Part 2

6 min read · 2026-04-03

↳ also: nextjs, seo, next-js-app-router-seo, frontend-developer-seo

#nextjs

How I Set Up SEO in My Next.js Portfolio from Zero

Part 1

7 min read · 2026-04-01

↳ also: nextjs, seo, next-js-app-router-seo, frontend-developer-seo

JSON-LD Schema: The Secret Language That Talks Directly to Google

Key Takeaways

Introduction

What Is Structured Data?

The Schema to Add to Your Portfolio

@context

@type

name, url, jobTitle

description

address

image

sameAs — The Authority Builder

Why `dangerouslySetInnerHTML` Is Safe Here

Testing Your Schema

Method 1: Google's Rich Results Test

Method 2: Schema.org Validator

Google Search Console: Rich Results Report

What Schema Types to Add Next

Summary Checklist

Resources

FAQ

Do I need structured data to rank on Google?

Can I add multiple schema types to one page?

Why hasn't my Knowledge Panel appeared yet?

`@context`

`@type`

`name`, `url`, `jobTitle`

`description`

`address`

`image`

`sameAs` — The Authority Builder