Website & Blog Badges

Authentic Content Badge for Your Website

Let visitors know your content is genuinely human-created. Embed a free badge in your site footer, sidebar, or blog posts with a simple HTML snippet.

Written by Human Not AI badge

Why Display a Human Content Badge on Your Website?

As AI-generated text becomes indistinguishable from human writing, visitors are growing increasingly skeptical about what they read online. Articles, product descriptions, and blog posts churned out by large language models now flood search results, making it harder for readers to know whether a real person stands behind the words. This erosion of trust affects everyone who publishes on the web.

Google's emphasis on E-E-A-T — Experience, Expertise, Authoritativeness, and Trustworthiness — underscores the importance of authentic, first-hand content. Search algorithms are getting better at rewarding pages that demonstrate genuine human expertise, while devaluing thin, mass-produced AI text. A visible "By Human, Not AI" badge on your website signals to both visitors and search engines that your content is the product of real thought, effort, and lived experience.

Displaying a human content badge differentiates your site from the growing number of AI content farms. It tells your audience that you value quality over volume, and that every article, tutorial, or review they find on your site was crafted by a person who cares. For businesses, this builds reader confidence and strengthens brand credibility. For independent bloggers and writers, it serves as a quality marker that sets your work apart in an increasingly automated landscape.

Best Badges for Websites & Blogs

Rounded designs work beautifully on the web. Use SVG for crisp rendering at any screen size.

How to Add a Badge to Your Website

🖥️ HTML & CSS

  1. Choose your badge and copy the HTML embed code from the badge card above.
  2. Open your site's HTML file (typically index.html or footer template).
  3. Paste the code where you want the badge — common spots include the footer, sidebar, or article footer.
  4. Optional: Wrap in an anchor tag to link back: <a href="https://byhumannotai.com"><img src="..." alt="..."></a>
  5. Style with CSS: max-width: 200px; for sidebar placement or max-width: 150px; for inline use.
  6. Deploy your changes.

📝 WordPress

  1. Go to Appearance > Widgets in your WordPress dashboard.
  2. Add a "Custom HTML" widget to your sidebar or footer area.
  3. Paste the badge HTML code into the widget.
  4. For blog posts, switch to the HTML editor and paste the code at the end of your article.
  5. Alternatively, use a shortcode plugin to create a reusable [human-badge] shortcode.
  6. For site-wide footer placement, add the code to your theme's footer.php (child theme recommended).

⚛️ React / Next.js

  1. Download the SVG badge file to your project's public folder.
  2. Import and use directly: <img src="/icons/badge.svg" alt="Written by Human, Not AI" width="180" />
  3. For Next.js, use the Image component: <Image src="/icons/badge.svg" alt="..." width={180} height={40} />
  4. Add to your layout component for site-wide display, or to individual page components.

📍 Where to Place Your Badge

  • Site footer — visible on every page, professional and unobtrusive.
  • Blog post footer — shows per-article that the content is human-written.
  • Sidebar widget — catches the eye without interrupting the reading flow.
  • About page — pairs naturally with your personal story and values.
  • Contact page — reinforces trust right before a visitor reaches out.

Website Badge Best Practices

🖼️

Format

Use SVG for the web — it renders crisply on retina displays and scales perfectly at any size.

📐

Size

150–250px wide works well for most placements. Keep it proportional and don't stretch the badge.

Accessibility

Always include descriptive alt text. Our badges come with recommended alt text built in.

🔗

Linking

Wrap your badge in a link to byhumannotai.com so curious visitors can learn about the movement.

Frequently Asked Questions

Yes. All badges are free for personal and commercial use. There are no license restrictions — use them on business sites, client projects, e-commerce stores, or any website.

SVG is the recommended format for websites. SVGs are resolution-independent, meaning they look sharp on all devices including retina displays. They're also smaller in file size. Use PNG only if your platform doesn't support SVG.

No. Our SVG badges are under 5KB each, which has negligible impact on page load. PNG versions are also optimized and lightweight. The badge adds virtually zero performance overhead.

The SVG files can be edited with any vector editor or even a text editor. Feel free to adjust colors to match your brand. We ask that you keep the core message ("By Human, Not AI" or similar) intact.