Nuxt AEONuxtAEO

Organization Schema Example

How to structure company or organization information using Organization Schema

Using Organization Schema allows you to structure information about companies, organizations, non-profit organizations, etc., so that AI models and search engines can better understand them.

Global Configuration (Recommended)

Configure it as a global schema in nuxt.config.ts to automatically inject it into all pages:

nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-aeo'],
  aeo: {
    schemas: [
      {
        type: 'Organization',
        name: 'My Company',
        url: '/', // Relative URL - will be normalized to absolute
        logo: '/images/logo.png', // Relative URL - will be normalized to absolute
        description: 'A company developing Nuxt modules for AI Engine Optimization',
        renderHtml: true, // Generate semantic HTML
        visuallyHidden: true, // Visually hide
      },
    ],
    autoInject: true,
  },
})

Page-Specific Usage

To add Organization Schema only on specific pages, use the useSchema() composable:

Note: useSchema() automatically normalizes URLs:

  • Absolute URLs (starting with http:// or https://) are used as-is
  • Relative URLs are combined with the base URL (from useRequestURL() or app.baseURL)
  • URL normalization applies recursively to nested objects and arrays (e.g., sameAs[], logo.url)
  • Processes url, image, logo, and item properties throughout the schema
pages/example.vue
<script setup lang="ts">
useSchema({
  context: 'https://schema.org',
  type: 'Organization',
  name: 'Example Company',
  url: '/', // Relative URL - will be normalized to absolute
  logo: '/images/logo.png', // Relative URL - will be normalized to absolute
  description: 'Example Company provides the best services.',
  sameAs: [
    'https://github.com/example', // Absolute URL - used as-is
    '/social/twitter', // Relative URL - will be normalized to absolute
  ],
  renderHtml: true, // Generate semantic HTML
  visuallyHidden: true, // Visually hide
})
</script>

Complete Example

Global Configuration Example

nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-aeo'],
  aeo: {
    schemas: [
      {
        type: 'Organization',
        name: 'Nuxt AEO Project',
        url: '/', // Relative URL - will be normalized to absolute
        description: 'AI Engine Optimization module for Nuxt',
        logo: '/images/logo.png', // Relative URL - will be normalized to absolute
        // Social media links
        sameAs: [
          'https://github.com/your-org/nuxt-aeo', // Absolute URL - used as-is
          '/social/twitter', // Relative URL - will be normalized to absolute
          'https://linkedin.com/company/your-org', // Absolute URL - used as-is
        ],
        // Contact information
        contactPoint: {
          type: 'ContactPoint',
          telephone: '+1-555-123-4567',
          contactType: 'Customer Service',
          email: 'support@example.com',
        },
        renderHtml: true,
        visuallyHidden: true,
      },
    ],
    autoInject: true,
  },
})

Page-Specific Usage Example

pages/example.vue
<script setup lang="ts">
// Organization data with mixed absolute and relative URLs
const organization = {
  name: 'Example Company',
  url: '/', // Relative URL - will be normalized to absolute
  description: 'Example Company provides the best services.',
  logo: '/images/logo.png', // Relative URL - will be normalized to absolute
  sameAs: [
    'https://github.com/example', // Absolute URL - used as-is
    '/social/twitter', // Relative URL - will be normalized to absolute
  ],
  contactPoint: {
    telephone: '+1-555-123-4567',
    contactType: 'Customer Service',
    email: 'support@example.com',
  },
}

// Add Organization Schema
useSchema({
  context: 'https://schema.org',
  type: 'Organization',
  name: organization.name,
  url: organization.url,
  description: organization.description,
  logo: organization.logo,
  sameAs: organization.sameAs,
  contactPoint: {
    type: 'ContactPoint',
    telephone: organization.contactPoint.telephone,
    contactType: organization.contactPoint.contactType,
    email: organization.contactPoint.email,
  },
  renderHtml: true,
  visuallyHidden: true,
})
</script>

Generated JSON-LD

The above example automatically adds the following JSON-LD script to the page <head>:

example.json
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Example Company",
  "url": "https://example.com",
  "description": "Example Company provides the best services.",
  "logo": "https://example.com/logo.png",
  "sameAs": [
    "https://github.com/example",
    "https://twitter.com/example"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-555-123-4567",
    "contactType": "Customer Service",
    "email": "support@example.com"
  }
}

Automatic Semantic HTML Generation

When using the renderHtml: true option, the following semantic HTML is automatically generated and injected into the page:

example.html
<div class="nuxt-aeo-semantic-organization nuxt-aeo-visually-hidden" aria-hidden="true">
  <div itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Example Company</span>
    <span itemprop="description">Example Company provides the best services.</span>
    <a itemprop="url" href="https://example.com">https://example.com</a>
  </div>
</div>

Key Properties

Required Properties

  • name: Organization name
  • url: Organization website URL

Recommended Properties

  • description: Description of the organization
  • logo: Organization logo image URL
  • sameAs: Array of social media profile links
  • contactPoint: Contact information

Additional Properties

Organization Schema supports many more properties. For details, refer to the Schema.org Organization documentation.

Verification

  1. Open Developer Tools (F12)
  2. Check the <script type="application/ld+json"> tag in the Elements tab
  3. Verify that semantic HTML with the nuxt-aeo-semantic-organization class is injected inside the body tag

Or you can run the following command in the Developer Tools console:

example.html
// Check semantic HTML
document.querySelectorAll('.nuxt-aeo-semantic-organization').forEach(el => {
  console.log('✅ Organization semantic HTML:', el.innerHTML)
})

// Check JSON-LD schema
document.querySelectorAll('script[type="application/ld+json"]').forEach(script => {
  const schema = JSON.parse(script.innerHTML)
  if (schema['@type'] === 'Organization') {
    console.log('✅ Organization JSON-LD:', schema)
  }
})

Notes

  • Using global configuration automatically injects Organization information into all pages
  • context and type are automatically converted to @context and @type internally
  • Using the renderHtml: true option provides both JSON-LD and semantic HTML together to further optimize LLM crawling
  • Organization Schema can be displayed in Google's Knowledge Graph

Frequently Asked Questions

This page includes FAQPage Schema to help AI models and search engines understand common questions about this topic.

pages/example.vue
<script setup lang="ts">
useSchemaFaq({
  mainEntity: [
    {
      name: 'When should I use Organization Schema?',
      acceptedAnswer: {
        text: 'Organization Schema is used to structure information about companies, organizations, non-profit organizations, etc. It can be used on company introduction pages, team pages, contact pages, and more. It helps AI models and search engines better understand organization information and may appear in Google Knowledge Graph.',
      },
    },
    {
      name: 'What are the required properties?',
      acceptedAnswer: {
        text: 'The required properties of Organization Schema are name (organization name) and url (organization website URL). These two properties must be included. Properties like description, logo, sameAs, and contactPoint are recommended and can provide richer information.',
      },
    },
    {
      name: 'How do I configure contactPoint?',
      acceptedAnswer: {
        text: 'contactPoint is configured as an object of type ContactPoint. It can include properties such as telephone (phone number), contactType (contact type, e.g., "Customer Service"), and email. To provide multiple contact points, you can set it as an array.',
      },
    },
    {
      name: 'What is the sameAs property?',
      acceptedAnswer: {
        text: 'The sameAs property represents the organization\'s social media profiles or links to other websites as an array. For example, you can include profile URLs for GitHub, Twitter, LinkedIn, etc. This allows you to connect the organization\'s various online presences.',
      },
    },
  ],
})
</script>

Question List

  • When should I use Organization Schema?: Used to structure information about companies, organizations, non-profit organizations, etc., and can be used on company introduction pages and more
  • What are the required properties?: name and url are required properties, while description, logo, sameAs, contactPoint, etc. are recommended properties
  • How do I configure contactPoint?: Configure as an object of type ContactPoint, and can include properties such as telephone, contactType, email, etc.
  • What is the sameAs property?: A property that represents the organization's social media profiles or links to other websites as an array