AI Author Bio Generator.

Describe the writer and MeDo generates an author bio block — a face that matches the byline, a two-sentence case for their expertise on this specific subject, links a skeptical reader can verify, and a more-from-this-author entry at the end of every article you publish.

Readers Trust Writers, Not Domains

An article ends at the moment of peak curiosity about its own source: the reader has just spent ten minutes deciding whether the advice holds, and now they want to know who is behind it. An author bio block is that answer, and it only works when it argues relevance — a credential that connects this specific writer to this specific subject. 'Maya has shipped payment infrastructure for nine years' earns an article about checkout UX; 'Maya loves coffee and clean code' earns nothing. That specificity is exactly what search quality evaluators probe when assessing experience and expertise, and what AI answer engines weigh when deciding which source to cite: named people with checkable histories, not a brand voice with no face. The block has one more job that usually gets skipped — routing. A reader convinced by the article should be one click from everything else that author wrote, which is how a byline becomes a following instead of a caption.

4 個のテンプレート

生成できる Author Bio テンプレート

どのテンプレートもスクリーンショットではなく実際のプロンプトです。任意の AI エディタに貼り付けるか、MeDo で実行して React + Tailwind のコードを受け取れます。

StandardEnd-of-Post Card

The Classic Closing Byline

The default placement: a bordered card after the last paragraph, where curiosity about the source is at its highest. Works for blogs of any size.

Create an author bio card for the end of a blog post: a horizontal card with a 72px circular photo, the name in 16px semibold, and a two-sentence bio whose first sentence names one credential relevant to this article's topic. Add two icon links — LinkedIn and a personal site — with aria-labels opening in new tabs, and a 'More from Maya' text link aligned right that routes to the author archive. Styling: 1px zinc-200 border, 24px padding, 8px radius. On mobile, stack the photo above the text and keep links visible without hover. Wrap it in a section with aria-label 'About the author', put the name in an h3, and write descriptive alt text for the photo.

MeDoで試す

CompactTop Byline Row

Identity Strip Under the Headline

A one-line strip at the top of the article — avatar, name, date, read time. Sets expectations before the first paragraph; the full bio stays at the bottom.

Create a compact byline row that sits directly under an article headline: a 32px circular avatar, the author name in 14px semibold zinc-900 as a link to the author page, then the publish date, a middle dot, and a read-time estimate in 14px zinc-500. The name underlines on hover, and the avatar and name share one link target. Keep the row under 48px tall, left-aligned with the article column, and render it from the same author object the end-of-post card uses so photo and name cannot drift apart. Include a visually hidden 'Published' label before the date for screen readers, and let the row wrap on mobile — date and read time may drop to a second line.

MeDoで試す

Long readsSidebar Contributor

Sticky Rail Bio for Long Features

For 3,000-word pieces: a vertical card pinned in the rail, so the author stays visible the whole way down — the format magazines use for columnists.

Create a sticky sidebar author card for a long-form article layout: a vertical card 280px wide, position sticky with a 96px top offset to clear the header. Contents top to bottom: a 96px circular photo, the name in 16px semibold, a one-line beat description in 13px zinc-500 such as 'Payments infrastructure, nine years', two social icon links with labels, and a 'More from Maya' text link. Card background zinc-50, 20px padding, 12px radius. Below the xl breakpoint do not render the rail — the end-of-article card carries the bio instead — so build it as one component with a placement variant, fed by the same author record.

MeDoで試す

Guest postGuest Spotlight

Fuller Card for Outside Writers

Guest authors carry no built-in trust with your audience, so the block works harder: fuller bio, stronger proof, and recent posts that establish depth fast.

Create a guest-author spotlight card, slightly larger than a standard bio: a 96px circular photo, the name, a one-line intro naming the guest's own company or publication, and a three-sentence bio answering 'who is this and why are they on this blog' — include one external proof point such as a book, product, or conference talk, each with its link. Beneath the card render a 'More from Maya' strip: the two most recent posts by the same author as compact rows with dates, so visitors can judge depth before following the archive link. Add a small 'Guest post' badge at the card's top edge in indigo-50 with indigo-700 text, and label every external link for screen readers.

MeDoで試す

Author Bio をカスタマイズする方法

Write the credential line per topic, not per person

The same author may need different bios on different articles: the payment-systems credential belongs under the checkout post, not the design-systems one. Ask MeDo to generate the bio from a small profile object holding topic-tagged credential lines, and select the line that matches the article. A bio that argues relevance always beats one that recites a resume.

Link for verification, not decoration

Two or three links, each one a skeptical reader would actually use to check the claim: LinkedIn for history, GitHub for engineers, a personal site for writers. A row of six social icons signals profile completeness, not credibility — every extra icon dilutes the ones that could survive a click.

Reuse the byline's photo object

The avatar under the headline and the photo in the end card must resolve to the same image, or the page quietly implies two different people. Generate both from one author record with explicit dimensions so the browser reserves space before load and the face matches at every size.

End with a route, not a period

A bio that terminates is a dead end; its last element should always be a next step — more from this author, the author's newsletter, a follow link. Pair it with a compact byline row at the top of the article: the row sets expectations before reading, the card converts after.

Author Bio コンポーネントを使うのは誰か

Multi-author company blog

An end-of-post card under every article, each bio swapping to the credential line that matches that post's topic, with a More-from-the-author link into a styled archive page.

Digital magazine

A contributor card carrying the writer's beat and location — 'Maya Chen covers European fintech from Berlin' — linking to everything published on that beat.

Developer tutorial site

A bio whose proof is code: a GitHub link and the shipped project the tutorial builds, so the credential is verifiable in one click rather than asserted in prose.

Newsletter archive

The host's bio above the fold of the archive, converting visitors who landed on an old issue and need a reason to subscribe to the person behind all of them.

サイト種別ごとの Author Bio パターン

同じ author bio コンポーネントを、掲載するサイトの種類に合わせて調整します。

01 / 04

Multi-Author Company Blogs

Every post ends with its author's card, and the credential line is chosen per topic. The archive page reuses the same author records, so byline, card, and archive never disagree about who wrote what.

Author Bio のスタイルとバリアント

ページ全体のトーンに合うバリアントを選び、そのまま生成します。

01 / 04

Photo-Forward Card

A large circular photo with the text beside it — the strongest-trust option, and the one that only works with a real photo, for the same reasons a team grid punishes stock imagery.

React・Next.js・Vue・Svelte での Author Bio

React、Next.js、Vue 3、SvelteKit、Astro、素の HTML — 同じ author bio を 6 通りの方法で組み込めます。

01 / 03

React Author Bio

One author object in, one card out. The initials fallback lives beside the photo branch, and the credential line arrives pre-selected per topic so the component stays dumb.

src/components/AuthorBio.tsx

type Author = {
  name: string
  photo?: string
  credential: string
  archiveHref: string
}

export function AuthorBio({ author }: { author: Author }) {
  const initials = author.name.split(' ').map((p) => p[0]).join('')
  return (
    <section aria-label='About the author'
             className='flex gap-4 rounded-lg border border-zinc-200 p-6'>
      {author.photo ? (
        <img src={author.photo} alt={author.name}
             className='h-[72px] w-[72px] rounded-full object-cover' />
      ) : (
        <div className='grid h-[72px] w-[72px] place-items-center
                        rounded-full bg-zinc-100 font-semibold text-zinc-700'>
          {initials}
        </div>
      )}
      <div>
        <h3 className='font-semibold text-zinc-900'>{author.name}</h3>
        <p className='text-[15px] text-zinc-600'>{author.credential}</p>
        <a href={author.archiveHref} className='text-sm text-indigo-600'>
          More from {author.name.split(' ')[0]}
        </a>
      </div>
    </section>
  )
}

Author Bio をプロジェクトに追加する方法

author bio テンプレートを選んで本番に載せるまでの 4 ステップ。

01~15min

Write the Credential Line First

Before touching layout, write the one sentence that connects this writer to this subject — years shipping it, a product, a beat covered. If that sentence does not exist, the bio is decoration and no layout will fix it.

02~10min

Choose Placement and Proof Links

End-of-post card, top byline row, or sticky rail for long features — most sites combine a top row with a bottom card. Pick two or three links a skeptic would actually click to verify the claim.

03~2min

Generate in MeDo

Paste the profile — name, photo URL, credential line, links, archive route — and name the placement. MeDo returns the block as React + Tailwind with the initials fallback and accessible labels already in.

04~10min

Check Identity Consistency and Ship

Confirm the byline avatar and the card photo resolve to the same image, links open in new tabs with aria-labels, and the more-from-author route lists their actual posts. Then add the block to the article template so it appears everywhere automatically.

Author Bioに関するよくある質問

Do author bios actually help SEO, or is E-E-A-T just a buzzword?

E-E-A-T is not a ranking factor you can implement directly; it is the lens Google's quality evaluators — and increasingly AI answer engines — use to judge who deserves to be cited. A named author with a checkable history and a subject-relevant credential is one of the clearest signals on the page, and it costs one block. The honest framing: the bio will not outrank anyone on its own, but anonymous content loses ties it used to win, and the reader-following-writer conversion value exists even where SEO does not.

Isn't this just a one-person version of the team section?

They share a photo and a name and little else. A team section is an org trust grid: it answers 'who is behind this company' with roles and faces at organizational scale. An author bio is an argument for one person's fitness for one subject — its key field is a credential tied to the topic, which no team card contains. Content sites often need both, on different pages; collapsing them means the about page gets an argument it does not need while the articles lose the one they do.

We publish everything under the brand name. Do we really need authors?

Brand bylines are losing value at the margin: evaluators and AI engines both look for a human with a track record, and readers follow people more reliably than logos. You do not need to invent personalities — name the specialists who actually did the work, even with a two-line bio, and keep 'Editorial review by the <brand> team' as a secondary line. The compromise preserves one brand voice while giving every article a verifiable human.

How long should the bio be?

Two sentences on the page: one establishing the relevant credential, one optional line of role or personality. Everything else belongs behind the links — the archive carries the depth, not the card. Past four sentences, readers stop mid-way, which is indistinguishable from not having written the last two.

How is this different from an avatar component?

An avatar is a single identity object — the image, its fallbacks, its sizes. The author bio is the argument built around that object: credential, verification links, and a route to more work. You will use both together, and generating them from the same author record is exactly how the face, the name, and the claim stay consistent across the site.

author bioを今すぐ生成。

プロンプトを試す — 無料、登録不要。

無料で構築開始料金を見る

アバター

プロンプト1つで、本番投入できるアバターを生成します。写真、Notion風イラスト、イニシャルのフォールバック、プレゼンスバッジ、スタックグループ、アップローダーの6つのオープンソースパターン。すべてTailwind + shadcn製で、アクセシブル、テーマ変更可能、MITライセンスです。コードをコピーしても、Lovable、Bolt、v0、Cursorのプロジェクトへ直接再生成してもかまいません。

関連コンポーネント

Team Section

List your people and MeDo generates a team section — a grid of member cards with real photo slots, honest initials fallbacks, role clarity, and the variants most generators skip: founder-first ordering for small teams, a one-person "team of one" layout, and a hiring CTA for teams that are growing.

関連コンポーネント

ブログセクション

希望するブログレイアウト — カードスタイル、記事数、注目記事、カテゴリーフィルター — を説明するだけで、MeDoが完全なコンポーネントを生成します。CSSグリッドのプロパティに一切触れることなく、洗練されたブログセクションを仕上げましょう。

関連コンポーネント

Social Share

Describe your audience and MeDo generates the bar that catches the impulse — channel intent links with canonical URLs, copy link with real feedback, the native share sheet on phones — and the placement guidance to put it where conviction forms, not where templates default.

関連コンポーネント