Guide · #364

How to Set Up Author Schema on Any Stack in 10 Minutes

Add author schema to your site in 10 minutes. Copy-paste snippets for Webflow, Next.js, WordPress, Shopify, and Lovable. Boost EEAT signals fast.

Filed

March 14, 2026

Read

15 min

Author

The Seoable Team

Why Author Schema Matters More Than You Think

Author schema is the structured data signal that tells Google—and AI engines like Perplexity and ChatGPT—who wrote your content and why they're credible. It's not optional. It's foundational.

Without author schema, your byline is just text. With it, Google understands authorship, builds trust, and uses it to evaluate E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness). That matters for ranking. It matters more for AI indexing.

The brutal truth: most founders skip this. They ship content without schema. They wonder why their blog doesn't rank. Then they spend $5,000 on an SEO agency to add what should have taken 10 minutes.

This guide cuts through that. You'll copy-paste author schema snippets for five stacks in under 10 minutes. No fluff. Just the code, the steps, and the validation.

Prerequisites: What You Need Before Starting

Before you add author schema, get these in place:

A live website on one of these stacks: Webflow, Next.js, WordPress, Shopify, or Lovable
Author details ready: Full name, bio, and social profile URLs (Twitter, LinkedIn, GitHub—whatever applies)
Access to your site's code or admin panel: You need to edit HTML, templates, or plugin settings
Google Search Console verified for your domain (if you want to validate schema and monitor rich results)
A schema validation tool: Google's Rich Results Test or Schema.org's Live Tester (both free)

If you haven't verified Google Search Console yet, step through the setup in 10 minutes first. It takes five minutes and unlocks visibility into how Google sees your schema.

Also, if you're new to schema markup in general, start with Organization schema—it's simpler and teaches the fundamentals. Then come back here.

Understanding Author Schema: The Three Formats

Author schema can be implemented three ways. Know the difference before you pick one.

JSON-LD (Recommended)

JSON-LD is the format Google prefers. It's a <script> tag in your page's <head> or <body>. It's separate from your HTML, so it doesn't break your markup. It's also the easiest to manage programmatically.

Example structure:

{
  "@context": "https://schema.org",
  "@type": "Article",
  "author": {
    "@type": "Person",
    "name": "Jane Doe",
    "url": "https://yoursite.com/authors/jane-doe"
  }
}

Microdata (HTML Attributes)

Microdata uses HTML attributes like itemscope, itemtype, and itemprop. It's inline with your content. It works, but it's harder to read and maintain in large templates.

RDFa (Rare)

RDFa is rarely used for author schema. Skip it unless you have a specific reason.

For this guide, we'll use JSON-LD everywhere. It's the cleanest, fastest, and most maintainable approach.

Author Schema Properties: What to Include

Author schema has multiple properties. You don't need all of them. But these are the ones that move the needle:

@type: Always "Person" for individual authors
name: Full name of the author (required)
url: Link to the author's profile page on your site (recommended)
sameAs: Links to author's social profiles—Twitter, LinkedIn, GitHub, etc. (recommended for EEAT)
image: Author photo URL (optional, but helps Google)
description: Short bio (optional)
email: Author's email (optional, rarely used)

The official Schema.org Person documentation lists all properties. For author schema specifically, focus on name, url, sameAs, and image. That's 80% of the value.

Google's Article schema documentation shows how author fits into article schema. The author property sits inside the Article object.

Stack-by-Stack Implementation

Webflow: Author Schema Without Code

Webflow has built-in schema support through its SEO panel. You can add author schema without touching code.

Step 1: Open Page Settings

Go to your blog post page in Webflow Designer. Click the Settings icon (gear) in the top-right. Select the "SEO" tab.

Step 2: Add Custom Code to Head

Scroll down to "Custom Code" and click "Add custom code to <head>."

Paste this snippet. Replace the values with your author's real details:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "description": "Article description",
  "image": "https://yoursite.com/image.jpg",
  "datePublished": "2025-01-15",
  "author": {
    "@type": "Person",
    "name": "Your Name",
    "url": "https://yoursite.com/authors/your-name",
    "image": "https://yoursite.com/author-photo.jpg",
    "sameAs": [
      "https://twitter.com/yourhandle",
      "https://linkedin.com/in/yourprofile"
    ]
  }
}
</script>

Step 3: Use Webflow CMS Dynamic Fields (Better)

If you're using Webflow CMS for your blog, do this instead:

In your blog template, add a code embed element. Paste this dynamic snippet:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "[Title]",
  "description": "[Description]",
  "image": "[Featured Image]",
  "datePublished": "[Publish Date]",
  "author": {
    "@type": "Person",
    "name": "[Author Name]",
    "url": "[Author URL]",
    "image": "[Author Image]",
    "sameAs": ["[Author Twitter]", "[Author LinkedIn]"]
  }
}
</script>

Replace the bracketed fields with your CMS collection fields. Webflow will auto-populate them for each post.

Step 4: Validate

Publish the page. Go to Google's Rich Results Test. Paste your URL. Confirm the Article schema shows with author details.

Next.js: Author Schema in Your Layout or Page Component

Next.js gives you two places to add author schema: in your layout (global) or in individual page components (per-post).

Option 1: Global Author Schema (All Posts)

If all your blog posts have the same author, add schema to your layout:

// app/blog/layout.tsx
import Head from 'next/head';

export default function BlogLayout({ children }) {
  const authorSchema = {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Your Name",
    "url": "https://yoursite.com/authors/your-name",
    "image": "https://yoursite.com/author-photo.jpg",
    "sameAs": [
      "https://twitter.com/yourhandle",
      "https://linkedin.com/in/yourprofile"
    ]
  };

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

Option 2: Per-Post Author Schema (Multiple Authors)

For multi-author blogs, add schema to each post component:

// app/blog/[slug]/page.tsx
import Head from 'next/head';

interface Post {
  title: string;
  slug: string;
  author: {
    name: string;
    url: string;
    image: string;
    twitter?: string;
    linkedin?: string;
  };
  publishedAt: string;
  image: string;
  description: string;
}

export default function BlogPost({ post }: { post: Post }) {
  const articleSchema = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": post.title,
    "description": post.description,
    "image": post.image,
    "datePublished": post.publishedAt,
    "author": {
      "@type": "Person",
      "name": post.author.name,
      "url": post.author.url,
      "image": post.author.image,
      "sameAs": [
        post.author.twitter,
        post.author.linkedin
      ].filter(Boolean)
    }
  };

  return (
    <>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
        />
      </Head>
      <article>
        <h1>{post.title}</h1>
        <p>By {post.author.name}</p>
        {/* Rest of your post content */}
      </article>
    </>
  );
}

Step 2: Add to next-seo (If Using It)

If you're using the next-seo package (recommended), add author schema via the ArticleJsonLd component:

import { ArticleJsonLd } from 'next-seo';

export default function BlogPost({ post }) {
  return (
    <>
      <ArticleJsonLd
        url={`https://yoursite.com/blog/${post.slug}`}
        title={post.title}
        images={[post.image]}
        datePublished={post.publishedAt}
        authorName={post.author.name}
        authorUrl={post.author.url}
        description={post.description}
      />
      <article>
        {/* Your post content */}
      </article>
    </>
  );
}

Step 3: Validate

Build and deploy. Use Google's Rich Results Test to validate the schema on your live site.

WordPress: Author Schema Via Plugin

WordPress has multiple ways to add author schema. The easiest is a plugin. The most control is manual code.

Option 1: Rank Math (Easiest)

If you're using Rank Math SEO plugin (and you should be—here's the setup guide):

Go to Rank Math → Titles & Meta → Schema
Scroll to Author Schema
Toggle it ON
Fill in your author details: Name, URL, image, social profiles
Save

Rank Math will automatically add author schema to all posts. Done.

Option 2: AIOSEO (If Using AIOSEO)

If you're using All in One SEO:

Go to All in One SEO → Search Appearance → Knowledge Graph
Select Person as your site type
Fill in your name, image, and social profiles
Go to Post Types → Posts
Enable Author Schema
Save

AIOSEO will add author schema to all posts automatically. Full AIOSEO author schema guide is here.

Option 3: Manual JSON-LD (Full Control)

If you want to add schema without a plugin, add this to your theme's functions.php:

add_action( 'wp_head', 'add_author_schema' );

function add_author_schema() {
  if ( is_single() ) {
    $author_id = get_the_author_meta( 'ID' );
    $author_name = get_the_author();
    $author_url = get_author_posts_url( $author_id );
    $author_bio = get_the_author_meta( 'description', $author_id );
    $author_image = get_the_author_meta( 'user_image_url', $author_id );

    $schema = array(
      '@context' => 'https://schema.org',
      '@type' => 'Article',
      'headline' => get_the_title(),
      'description' => get_the_excerpt(),
      'image' => get_the_post_thumbnail_url(),
      'datePublished' => get_the_date( 'c' ),
      'author' => array(
        '@type' => 'Person',
        'name' => $author_name,
        'url' => $author_url,
        'image' => $author_image,
        'description' => $author_bio
      )
    );

    echo '<script type="application/ld+json">' . wp_json_encode( $schema ) . '</script>';
  }
}

This pulls author data from WordPress and outputs JSON-LD automatically.

Step 2: Validate

Publish a post. Go to Google's Rich Results Test. Paste your post URL. Confirm Article schema with author details shows.

Shopify: Author Schema for Blog Posts

Shopify's blog editor doesn't have built-in schema support, but you can add it via theme code.

Step 1: Edit Your Blog Post Template

Go to Online Store → Themes → Edit Code. Find blog-post.liquid (or article.liquid, depending on your theme).

Step 2: Add Author Schema

Find the section where the article content renders. Add this snippet before the closing </article> tag:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": {{ article.title | json }},
  "description": {{ article.excerpt_or_content | strip_html | json }},
  "image": "{{ article.image | img_url: '1200x630' }}",
  "datePublished": "{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}",
  "author": {
    "@type": "Person",
    "name": "{{ article.author }}",
    "url": "https://yoursite.com/authors/{{ article.author | handleize }}"
  }
}
</script>

This uses Shopify's Liquid variables to pull article data dynamically.

Step 3: Add Author Details to Metafields (Optional)

If you want to include author image and social links, create custom metafields:

Go to Settings → Metafields → Articles
Create metafields: author_image, author_twitter, author_linkedin
Update the Liquid snippet to include them:

"sameAs": [
  "https://twitter.com/{{ article.metafields.custom.author_twitter }}",
  "https://linkedin.com/in/{{ article.metafields.custom.author_linkedin }}"
]

Step 4: Validate

Publish a blog post. Go to Google's Rich Results Test. Paste your post URL. Confirm the schema appears.

Lovable: Author Schema for AI-Generated Sites

Lovable (formerly GPT-4o) generates sites with React and Tailwind. You can add author schema via a custom component.

Step 1: Create an Author Schema Component

In your Lovable project, create a new component AuthorSchema.jsx:

export default function AuthorSchema({ author, article }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": article.title,
    "description": article.description,
    "image": article.image,
    "datePublished": article.datePublished,
    "author": {
      "@type": "Person",
      "name": author.name,
      "url": author.url,
      "image": author.image,
      "sameAs": author.sameAs || []
    }
  };

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

Step 2: Use It in Your Blog Post Page

In your blog post page component:

import AuthorSchema from './AuthorSchema';

export default function BlogPost() {
  const author = {
    name: "Your Name",
    url: "https://yoursite.com/authors/your-name",
    image: "https://yoursite.com/author-photo.jpg",
    sameAs: [
      "https://twitter.com/yourhandle",
      "https://linkedin.com/in/yourprofile"
    ]
  };

  const article = {
    title: "Your Article Title",
    description: "Article description",
    image: "https://yoursite.com/image.jpg",
    datePublished: "2025-01-15"
  };

  return (
    <>
      <AuthorSchema author={author} article={article} />
      <article>
        <h1>{article.title}</h1>
        <p>By {author.name}</p>
        {/* Rest of your content */}
      </article>
    </>
  );
}

Step 3: Make It Dynamic (If Using a Database)

If you're pulling article data from a database or CMS:

import AuthorSchema from './AuthorSchema';
import { useEffect, useState } from 'react';

export default function BlogPost({ postId }) {
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch(`/api/posts/${postId}`)
      .then(res => res.json())
      .then(data => setPost(data));
  }, [postId]);

  if (!post) return <div>Loading...</div>;

  return (
    <>
      <AuthorSchema author={post.author} article={post} />
      <article>
        <h1>{post.title}</h1>
        {/* Rest of your content */}
      </article>
    </>
  );
}

Step 4: Validate

Deploy your site. Use Google's Rich Results Test to validate the schema.

Validation: Make Sure Your Schema Works

Adding code is step one. Validating it is step two. Don't skip this.

Use Google's Rich Results Test

Go to Google's Rich Results Test. Paste your URL. Wait 10 seconds. Look for:

Article schema detected
Author property populated with name and URL
No errors or warnings

If you see errors, the JSON is malformed. Fix it and re-test.

Use Schema.org's Live Tester (Backup)

If Google's test doesn't work, use Schema.org's Live Tester. It catches errors Google's test misses.

Check Google Search Console

Once your schema is live, go to Google Search Console. Check Enhancements → Article to see if Google has detected your article schema. This takes 24-48 hours.

Common Mistakes and How to Fix Them

Mistake 1: Author URL Points to Homepage

Don't do this:

"url": "https://yoursite.com"

Do this:

"url": "https://yoursite.com/authors/your-name"

Google uses the author URL to understand who the person is. A dedicated author page is stronger.

Mistake 2: Missing sameAs Properties

sameAs links author schema to social profiles. Without them, Google can't cross-reference your credibility.

Always include:

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

Mistake 3: Author Schema Without Article Schema

Author schema lives inside Article schema. Don't add author schema alone.

Wrong:

{
  "@type": "Person",
  "name": "Your Name"
}

Right:

{
  "@type": "Article",
  "author": {
    "@type": "Person",
    "name": "Your Name"
  }
}

Mistake 4: Hardcoded Author Names

If you have multiple authors, hardcoding names into code creates maintenance hell.

Use dynamic fields instead. In WordPress, use get_the_author(). In Next.js, pull from your database. In Webflow, use CMS fields.

Mistake 5: Broken Author Image URLs

Author images must be valid, public URLs. Test them in your browser first.

Broken:

"image": "/images/author.jpg"

Correct:

"image": "https://yoursite.com/images/author.jpg"

Pro Tips: Going Beyond the Basics

Tip 1: Add Organization Schema Too

Author schema is stronger when paired with Organization schema. Organization schema tells Google about your company. Author schema tells Google about the person. Together, they build trust.

Tip 2: Use Author Archives for Author URLs

Instead of creating custom author pages, use your CMS's built-in author archive:

WordPress: https://yoursite.com/author/your-name
Webflow: Create an author collection and link to it
Next.js: Generate author pages from your database
Shopify: Create a custom collection page for authors

This way, the author URL is dynamic and automatically maintained.

Tip 3: Add Author Byline to Your HTML

Author schema works best when paired with visible author bylines. Add this to every post:

<p class="author-byline">
  By <a href="/authors/jane-doe">Jane Doe</a> on January 15, 2025
</p>

Google uses both the visible byline and the schema to understand authorship. Consistency matters.

Tip 4: Monitor Author Schema in Search Console

After implementing author schema, check Google Search Console for results:

Go to Enhancements → Article
Look for "Valid" articles
If any show "Errors," fix them immediately

This takes 24-48 hours to populate after you first add schema.

Tip 5: Test Author Schema in Rich Results Preview

Before publishing, test your schema using Google's Rich Results Test. This shows exactly how Google will display your article in search results.

Connecting Author Schema to Your SEO Strategy

Author schema doesn't exist in a vacuum. It's one part of a larger SEO foundation.

If you haven't set up the basics yet, start here:

Set up Google Search Console to monitor your site
Add Organization schema to build trust
Create a sitemap and submit it
Set up robots.txt and canonicals
Add author schema (this guide)
Add FAQ schema if you have FAQs

These six things together form your technical SEO foundation. Author schema is #5. It's not the first step, but it's essential.

If you want all of this done in one shot, Seoable delivers a domain audit, brand positioning, keyword roadmap, and 100 AI-generated blog posts in under 60 seconds for $99. That includes schema setup for your entire site.

The EEAT Connection: Why Author Schema Matters for AI

Google's E-E-A-T framework (Experience, Expertise, Authoritativeness, Trustworthiness) is the ranking signal. Author schema feeds directly into it.

When you add author schema with sameAs links to your social profiles and professional pages, you're telling Google: "This person is real. Here's proof."

AI engines like Perplexity and ChatGPT also use author schema to understand credibility. When they cite your content, they check the author schema to verify the source.

Without author schema, you're invisible to both. With it, you're credible.

Troubleshooting: What to Do If Schema Doesn't Appear

Problem: Google's Rich Results Test Shows No Schema

Check your JSON syntax. Use a JSON validator: jsonlint.com
Make sure the <script> tag is in the <head> or <body>
Check for special characters in author names. Escape them: "name": "O\'Brien" not "name": "O'Brien"
Wait 24 hours. Google caches pages.

Problem: Schema Shows But Author Details Are Missing

Check that author name is not empty
Verify author URL is a valid, public URL
If using sameAs, make sure social profile URLs are correct
Use Schema.org's Live Tester to see the exact issue

Problem: WordPress Plugin Isn't Adding Schema

Make sure the plugin is activated
Clear your site's cache (if using a caching plugin)
Check plugin settings to ensure author schema is enabled
Deactivate other SEO plugins (they can conflict)

Problem: Next.js Schema Doesn't Appear in Page Source

Make sure you're using dangerouslySetInnerHTML correctly
Check that the component is rendering in the <Head> or <head> section
Verify JSON.stringify() is escaping quotes properly
Test in a production build, not development mode

Summary: Your 10-Minute Author Schema Checklist

Here's what you just learned. Use this checklist to implement author schema on your stack:

Prep (2 minutes)

Gather author name, bio, photo, and social URLs
Verify Google Search Console access
Have a schema validation tool ready (Google's Rich Results Test)

Implementation (5 minutes)

Pick your stack: Webflow, Next.js, WordPress, Shopify, or Lovable
Copy the appropriate code snippet from this guide
Replace placeholder values with real author details
Deploy or publish

Validation (3 minutes)

Go to Google's Rich Results Test
Paste your URL
Confirm Article schema with author details appears
Check for errors and fix if needed

That's it. You've added author schema. You've told Google who wrote your content and why they're credible. You've built an EEAT signal that will help your content rank and get cited by AI engines.

Next steps:

If you haven't already, set up Organization schema on your homepage
Create a sitemap and submit it to Google
Add FAQ schema if you have FAQs
Set up the free SEO tool stack to monitor your progress

If you want this done across your entire site with a keyword roadmap and 100 AI-generated blog posts, Seoable does it in 60 seconds for $99.

You shipped. Now make sure Google can find you.

Free weekly newsletter

Get the next one on Sunday.

One short email a week. What is working in SEO right now. Unsubscribe in one click.

Subscribe on Substack →

Keep reading

How to Set Up Author Schema on Any Stack in 10 Minutes

Why Author Schema Matters More Than You Think

Prerequisites: What You Need Before Starting

Understanding Author Schema: The Three Formats

Author Schema Properties: What to Include

Stack-by-Stack Implementation

Webflow: Author Schema Without Code

Next.js: Author Schema in Your Layout or Page Component

WordPress: Author Schema Via Plugin

Shopify: Author Schema for Blog Posts

Lovable: Author Schema for AI-Generated Sites

Validation: Make Sure Your Schema Works

Common Mistakes and How to Fix Them

Pro Tips: Going Beyond the Basics

Connecting Author Schema to Your SEO Strategy

The EEAT Connection: Why Author Schema Matters for AI

Troubleshooting: What to Do If Schema Doesn't Appear

Summary: Your 10-Minute Author Schema Checklist

Get the next one on Sunday.

Brand Search Monitoring: Setting Up Alerts for Your Company Name

Setting Up Google Tag Manager Without Breaking Your Site

Setting Up Open Graph Tags for Better Click-Through from AI Search