Article Schema Example

<script setup lang="ts">
useSchema({
  context: 'https://schema.org',
  type: 'Article',
  headline: 'Article Title',
  description: 'Article description',
  datePublished: '2024-01-15',
  dateModified: '2024-01-20',
  author: {
    type: 'Person',
    name: 'John Doe',
  },
  publisher: {
    type: 'Organization',
    name: 'Example Company',
  },
  renderHtml: true, // Generate semantic HTML
  visuallyHidden: true, // Visually hide
})
</script>

<script setup lang="ts">
// Article data with mixed absolute and relative URLs
const article = {
  headline: 'Getting Started with Nuxt AEO Module',
  description: 'Learn how to implement AI Engine Optimization in your Nuxt application using Schema.org JSON-LD structured data.',
  image: '/images/nuxt-aeo.jpg', // Relative URL - will be normalized to absolute
  datePublished: '2024-01-15',
  dateModified: '2024-01-20',
  author: {
    name: 'Yeonju Lee',
    jobTitle: 'Software Engineer / CDO',
    image: '/images/authors/yeonju.jpg', // Relative URL - will be normalized to absolute
    url: 'https://example.com/authors/yeonju', // Absolute URL - used as-is
  },
  publisher: {
    name: 'Nuxt AEO Project',
    logo: {
      url: '/logo.png', // Relative URL - will be normalized to absolute
    },
  },
  keywords: ['Nuxt', 'AEO', 'Schema.org', 'SEO', 'AI'],
  articleBody: `
    <h2>Introduction</h2>
    <p>Nuxt AEO is a powerful module that helps you implement AI Engine Optimization (AEO) in your Nuxt applications. By using Schema.org JSON-LD structured data, you can make your content more understandable to AI models and search engines.</p>
    
    <h2>Installation</h2>
    <p>To get started, install the module using your preferred package manager:</p>
    <pre><code>npm install nuxt-aeo</code></pre>
    
    <h2>Configuration</h2>
    <p>Add the module to your <code>nuxt.config.ts</code>:</p>
    <pre><code>export default defineNuxtConfig({
  modules: ['nuxt-aeo']
})</code></pre>
    
    <h2>Conclusion</h2>
    <p>With Nuxt AEO, you can easily add structured data to your pages and improve how AI models understand your content.</p>
  `,
}

// Format date helper
function formatDate(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

// Add Article Schema
useSchema({
  context: 'https://schema.org',
  type: 'Article',
  headline: article.headline,
  description: article.description,
  image: article.image,
  datePublished: article.datePublished,
  dateModified: article.dateModified,
  author: {
    type: 'Person',
    name: article.author.name,
    jobTitle: article.author.jobTitle,
    image: article.author.image,
    url: article.author.url,
  },
  publisher: {
    type: 'Organization',
    name: article.publisher.name,
    logo: {
      type: 'ImageObject',
      url: article.publisher.logo.url,
    },
  },
  keywords: article.keywords.join(', '),
  articleBody: article.articleBody,
  renderHtml: true,
  visuallyHidden: true,
})
</script>

<script setup lang="ts">
useSchema({
  context: 'https://schema.org',
  type: 'TechArticle',
  headline: 'How to Use TypeScript with Nuxt 3',
  description: 'A comprehensive guide to setting up TypeScript in your Nuxt 3 project.',
  datePublished: '2024-01-15',
  author: {
    type: 'Person',
    name: 'Jane Smith',
  },
  proficiencyLevel: 'Beginner',
  dependencies: 'Nuxt 3, TypeScript 5.0+',
  renderHtml: true,
  visuallyHidden: true,
})
</script>

<script setup lang="ts">
useSchema({
  context: 'https://schema.org',
  type: 'NewsArticle',
  headline: 'Breaking: New Features in Nuxt 4',
  description: 'Latest updates and features announced for Nuxt 4.',
  datePublished: '2024-01-15T10:00:00Z',
  dateModified: '2024-01-15T10:00:00Z',
  author: {
    type: 'Person',
    name: 'News Reporter',
  },
  publisher: {
    type: 'Organization',
    name: 'Tech News',
  },
  renderHtml: true,
  visuallyHidden: true,
})
</script>

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Getting Started with Nuxt AEO Module",
  "description": "Learn how to implement AI Engine Optimization in your Nuxt application using Schema.org JSON-LD structured data.",
  "image": "https://example.com/images/nuxt-aeo.jpg",
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "author": {
    "@type": "Person",
    "name": "Yeonju Lee",
    "jobTitle": "Software Engineer / CDO",
    "image": "https://example.com/authors/yeonju.jpg",
    "url": "https://example.com/authors/yeonju"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Nuxt AEO Project",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "keywords": "Nuxt, AEO, Schema.org, SEO, AI",
  "articleBody": "<h2>Introduction</h2><p>Nuxt AEO is a powerful module...</p>"
}

<div class="nuxt-aeo-semantic-article nuxt-aeo-visually-hidden" aria-hidden="true">
  <div itemscope itemtype="https://schema.org/Article">
    <span itemprop="headline">Getting Started with Nuxt AEO Module</span>
    <span itemprop="description">Learn how to implement AI Engine Optimization...</span>
    <span itemprop="datePublished">2024-01-15</span>
    <span itemprop="dateModified">2024-01-20</span>
    <a itemprop="image" href="https://example.com/images/nuxt-aeo.jpg">https://example.com/images/nuxt-aeo.jpg</a>
    <!-- More properties... -->
  </div>
</div>

{
  type: 'Person',
  name: string,           // Required
  jobTitle?: string,
  image?: string,
  url?: string,
  [key: string]: unknown
}

{
  type: 'Organization',
  name: string,           // Required
  logo?: {
    type: 'ImageObject',
    url: string
  },
  [key: string]: unknown
}

// Check semantic HTML
document.querySelectorAll('.nuxt-aeo-semantic-article').forEach(el => {
  console.log('✅ Article 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'] === 'Article' || schema['@type'] === 'TechArticle' || schema['@type'] === 'NewsArticle') {
    console.log('✅ Article JSON-LD:', schema)
  }
})

<script setup lang="ts">
useSchemaFaq({
  mainEntity: [
    {
      name: 'When should I use Article Schema?',
      acceptedAnswer: {
        text: 'Article Schema is used to structure content such as blog posts, news articles, tutorials, and technical documentation. It helps AI models and search engines better understand metadata such as title, author, publication date, and modification date. It may also appear in Google\'s rich results.',
      },
    },
    {
      name: 'What is the difference between TechArticle and NewsArticle?',
      acceptedAnswer: {
        text: 'TechArticle is used for technical documentation or tutorials and supports technical properties such as proficiencyLevel (proficiency level) and dependencies. NewsArticle is used for news articles and supports news-related properties such as dateline (place of publication) and articleSection (article section). For general blog posts, you can use the basic Article type.',
      },
    },
    {
      name: 'What format should datePublished be in?',
      acceptedAnswer: {
        text: 'datePublished and dateModified must use the ISO 8601 format. For date only, use the format "2024-01-15", and for date with time, use "2024-01-15T10:00:00Z". This format is an international standard, so search engines and AI models can accurately parse dates.',
      },
    },
    {
      name: 'What is the difference between author and publisher?',
      acceptedAnswer: {
        text: 'author represents the person who actually wrote the article and is an object of type Person. It can include properties such as name, jobTitle, image, and url. publisher represents the organization that published the article and is an object of type Organization. It can include name and logo properties. For example, if an individual writes an article published on a company blog, author is the writer and publisher is the company.',
      },
    },
    {
      name: 'What are the required properties?',
      acceptedAnswer: {
        text: 'The required properties of Article Schema are headline (article title) and datePublished (publication date). Properties such as description, image, dateModified, author, publisher, articleBody, and keywords are recommended and can provide richer information. Including author and publisher especially helps search engines better understand the source of the content.',
      },
    },
  ],
})
</script>