Most sites focus on page-level schema (Article, Product, Recipe) and skip WebSite and WebPage schema — the foundational layer that helps Google understand your site's identity, structure, and internal searchability. WebSite schema is also the gateway to Google's sitelinks searchbox, the search bar that appears in branded results for major sites.

1. WebSite Schema: Homepage Template

Add this to every page (ideally in your site-wide layout) — the @id property links this identifier to the Organization schema.

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "@id": "https://example.com/#website",
  "url": "https://example.com",
  "name": "Your Site Name",
  "description": "One sentence describing what your site does.",
  "publisher": {
    "@id": "https://example.com/#organization"
  },
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate":
        "https://example.com/search?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}

⚠️ Sitelinks searchbox: when to include potentialAction

Only include the potentialAction block if your website has a working search at the URL template you specify. The URL must return search results when the query string is passed. If your search URL structure is different (e.g., /search?s=), update urlTemplate accordingly.

2. Linking WebSite, Organization and WebPage with @id

The @id pattern lets you create a knowledge graph within your site — Google can see that the WebSite entity, the Organization entity, and each WebPage are all connected. This is especially powerful for branded search.

// Paste both of these in your site-wide layout (e.g. layout.tsx)

// 1. Organization entity
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "https://example.com/#organization",
  "name": "Your Company",
  "url": "https://example.com",
  "logo": {
    "@type": "ImageObject",
    "url": "https://example.com/logo.png"
  }
}

// 2. WebSite entity (references Organization via @id)
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "@id": "https://example.com/#website",
  "url": "https://example.com",
  "name": "Your Company",
  "publisher": {
    "@id": "https://example.com/#organization"
  }
}

3. WebPage Schema Types

Beyond the base WebPage type, Schema.org has specialised subtypes for different page purposes:

Schema.org Type	Use for
WebPage	Generic pages, landing pages, homepages
AboutPage	Your /about page
ContactPage	Your /contact page
FAQPage	Pages with FAQ sections (also triggers FAQ rich results)
ItemPage	Product detail pages (combined with Product schema)
ProfilePage	Author profiles, user profiles
CollectionPage	Category pages, archive pages, search results
CheckoutPage	E-commerce checkout pages
SearchResultsPage	Internal search results pages

4. WebPage Schema Template

{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "@id": "https://example.com/about/#webpage",
  "url": "https://example.com/about",
  "name": "About Us | Your Company",
  "description": "Learn about Your Company's mission
    and the team behind it.",
  "isPartOf": {
    "@id": "https://example.com/#website"
  },
  "about": {
    "@id": "https://example.com/#organization"
  },
  "datePublished": "2024-01-01T00:00:00Z",
  "dateModified": "2026-02-25T00:00:00Z"
}

5. Next.js Implementation: layout.tsx

// app/layout.tsx
const websiteSchema = {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "@id": "https://yoursite.com/#website",
  "url": "https://yoursite.com",
  "name": "Your Site Name",
  "publisher": { "@id": "https://yoursite.com/#organization" }
};

const orgSchema = {
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "https://yoursite.com/#organization",
  "name": "Your Company",
  "url": "https://yoursite.com",
  "logo": {
    "@type": "ImageObject",
    "url": "https://yoursite.com/logo.png"
  }
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(websiteSchema)
          }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(orgSchema)
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

6. Frequently Asked Questions

Does every website need WebSite schema?▼

Yes — WebSite schema and Organization schema are foundational for every site. They define your brand entity, enable Google to understand your site’s identity, and are prerequisites for the sitelinks searchbox feature. They take under 10 minutes to implement and last indefinitely once added to your layout.

What is the sitelinks searchbox and how do I get it?▼

The sitelinks searchbox is a search bar that appears in branded Google results (e.g. when someone searches for your brand name), letting users search inside your site directly from the SERP. To be eligible, add the potentialAction SearchAction block in WebSite schema with a URL template that returns actual search results.

Should I use WebPage schema on every page?▼

Yes. WebPage schema on every page ties each page into your entity graph via isPartOf (linking to your WebSite @id). More specifically, use the correct WebPage subtype: AboutPage for /about, ContactPage for /contact, FAQPage for FAQ pages, ItemPage for product pages. This helps Google categorize page purpose accurately.

What is the @id pattern and why does it matter?▼

The @id is a unique URL-based identifier for each entity (Organization, WebSite, WebPage). Using @id allows you to reference an entity from any page without repeating its full description. This creates an entity graph that Google can traverse — strengthening your brand’s Knowledge Graph presence.

Can I add WebSite schema to just the homepage, or do all pages need it?▼

WebSite schema belongs only on the homepage (or sitewide in the layout tag). It defines your site as a whole, not individual pages. WebPage schema (with isPartOf referencing your WebSite @id) belongs on every page. The Organization entity also belongs sitewide — in your layout file.

What happens if my WebSite @id is different from my Organization @id?▼

They should be different. The standard pattern is https://example.com/#website for the WebSite entity and https://example.com/#organization for the Organization entity. The WebSite publisher property then references the Organization @id. Using the same @id for both would conflate two different entities.

Does WebSite schema help with Google Knowledge Panel?▼

WebSite schema alone is not sufficient for a Knowledge Panel. You need Organization schema with a well-populated sameAs list (Wikipedia, Wikidata, LinkedIn, Crunchbase). WebSite schema supports this by linking the site to the Organization entity, contributing to the overall entity signal cluster.

How do I implement WebSite and Organization schema in Next.js?▼

Add both as JSON-LD script tags inside your app/layout.tsx. Since layout.tsx is a Server Component and renders on the server, the schema is included in the initial HTML — fully crawlable by Googlebot. Use dangerouslySetInnerHTML with JSON.stringify on a plain object literal for each schema type.

Validate Your WebSite Schema

Test your homepage URL to see all detected entities and check @id references are valid.

Validate Website Schema →

WebSite Schema Markup: The Foundation Every Site Should Implement