教程：实施 NewsArticle Schema 标记以获取富媒体结果

正确实施 NewsArticle schema 标记，即可在 Google News、Top Stories 和搜索结果中启用富媒体结果（rich results）。

前置条件

第 1 步：确定你的 Schema 模板

静态 vs. 动态 Schema

对于新闻网站，schema 必须是动态的——即针对每篇文章生成：

第 2 步：基础模板实现

WordPress 实现

function generate_news_article_schema() {
    if (!is_single()) return;

    global $post;

    $schema = array(
        '@context' => 'https://schema.org',
        '@type' => 'NewsArticle',
        'headline' => get_the_title(),
        'datePublished' => get_the_date('c'),
        'dateModified' => get_the_modified_date('c'),
        'author' => array(
            '@type' => 'Person',
            'name' => get_the_author_meta('display_name', $post->post_author),
            'url' => get_author_posts_url($post->post_author)
        ),
        'publisher' => array(
            '@type' => 'Organization',
            'name' => get_bloginfo('name'),
            'logo' => array(
                '@type' => 'ImageObject',
                'url' => 'https://example.com/logo.png'
            )
        ),
        'image' => get_the_post_thumbnail_url($post, 'full'),
        'description' => get_the_excerpt(),
        'mainEntityOfPage' => array(
            '@type' => 'WebPage',
            '@id' => get_permalink()
        )
    );

    echo '<script type="application/ld+json">' . json_encode($schema) . '</script>';
}
add_action('wp_head', 'generate_news_article_schema');

Next.js 实现

export function NewsArticleSchema({ article }) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'NewsArticle',
    headline: article.title,
    datePublished: article.publishedAt,
    dateModified: article.updatedAt,
    author: {
      '@type': 'Person',
      name: article.author.name,
      url: `/author/${article.author.slug}`,
    },
    publisher: {
      '@type': 'Organization',
      name: 'Example News',
      logo: {
        '@type': 'ImageObject',
        url: 'https://example.com/logo.png',
      },
    },
    image: article.featuredImage,
    description: article.excerpt,
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': article.url,
    },
    articleSection: article.category,
    wordCount: article.wordCount,
  };

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

第 3 步：添加高级属性

包含全部推荐字段的完整 Schema

const fullSchema = {
  '@context': 'https://schema.org',
  '@type': 'NewsArticle',

  // Required
  headline: article.title,
  datePublished: article.publishedAt,
  dateModified: article.updatedAt,
  author: {
    '@type': 'Person',
    name: article.author.name,
    url: `/author/${article.author.slug}`,
    jobTitle: article.author.title,
    sameAs: article.author.socialLinks,
  },
  publisher: {
    '@type': 'Organization',
    name: 'Example News',
    url: 'https://example.com',
    logo: {
      '@type': 'ImageObject',
      url: 'https://example.com/logo.png',
      width: 600,
      height: 60,
    },
    sameAs: ['https://twitter.com/examplenews'],
  },
  image: {
    '@type': 'ImageObject',
    url: article.featuredImage,
    width: 1200,
    height: 630,
  },

  // Recommended
  description: article.excerpt,
  articleSection: article.category,
  wordCount: article.wordCount,
  keywords: article.tags,
  genre: 'News',
  alternativeHeadline: article.subtitle,

  // Free access
  isAccessibleForFree: !article.isPaywalled,

  // Paywall support
  ...(article.isPaywalled && {
    hasPart: {
      '@type': 'WebPageElement',
      isAccessibleForFree: false,
      cssSelector: '.paywall-content',
    },
  }),

  mainEntityOfPage: {
    '@type': 'WebPage',
    '@id': article.url,
  },
};

第 4 步：验证你的 Schema

测试流程

  1. Rich Results Test：测试每个文章 URL
  2. Schema Markup Validator：验证是否符合 schema.org 规范
  3. Search Console：监控错误
  4. Lighthouse：检查结构化数据审计项

常见验证问题修复

// Fix: Ensure headline matches H1
headline: document.querySelector('h1').textContent

// Fix: ISO 8601 date format
datePublished: new Date(article.publishedAt).toISOString()

// Fix: Proper image dimensions
image: {
  '@type': 'ImageObject',
  url: article.featuredImage,
  width: 1200,
  height: 630
}

第 5 步：监控与维护

每月 Schema 健康检查

自动化 Schema 测试

// Test schema in CI/CD pipeline
describe('NewsArticle Schema', () => {
  it('should have required fields', () => {
    const schema = getSchemaFromPage('/article/1');
    expect(schema.headline).toBeDefined();
    expect(schema.datePublished).toMatch(/^\d{4}-\d{2}-\d{2}/);
    expect(schema.author.name).toBeDefined();
    expect(schema.publisher.name).toBeDefined();
    expect(schema.image).toBeDefined();
  });
});

检查清单