Technical Seo

Community

MartinOlivero

technical-seo

This skill should be used when making a web app or SaaS discoverable and shareable — meta tags, OpenGraph/social previews, sitemap, robots.txt, structured data, or fixing the empty-HTML problem of a React SPA. Trigger phrases include "improve SEO", "add meta tags", "OpenGraph", "social share preview", "sitemap", "robots.txt", "structured data", "JSON-LD", "my page has no preview on Twitter/WhatsApp", "Google can't see my SPA", "prerender". It generates the head tags, files, and prerendering an SPA needs to be indexed and shared.

Overview

Publisher	MartinOlivero
Repository	`saas-builder`
Skill name	`technical-seo`
Stars	4
Forks	2
Bundled files	Instructions only
License	MIT
Links	Skill source Repository Homepage

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
Self-contained
Everything the model needs lives in the instructions — no extra files to sync.
Open source
Published by MartinOlivero on GitHub. Read the source before you install it.

Installation

Install the Technical Seo AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/MartinOlivero/saas-builder/tree/main/skills/technical-seo
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/MartinOlivero/saas-builder.git /tmp/saas-builder
mkdir -p .claude/skills
cp -r /tmp/saas-builder/skills/technical-seo .claude/skills/technical-seo

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Technical Seo in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Technical Seo on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Technical Seo is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Technical SEO

This skill makes a SaaS findable by Google and shareable on social — and fixes the specific trap of a Vite SPA serving near-empty HTML that crawlers can't read.

Analogy: an SPA is a book with a blank cover and blank first page until you open it and read aloud. Search crawlers and social bots only glance at the cover — if it's blank, they walk away. SEO here is printing a real cover (server-rendered head tags) so they see what the book is about.

The SPA problem (state it upfront)

A Vite SPA serves near-empty HTML; content and meta tags appear only after JS runs. Social crawlers (WhatsApp, Twitter, LinkedIn) don't run JS at all, so share previews need tags that are injected server-side or prerendered — client-only react-helmet alone won't show a preview on WhatsApp.

Be precise about Google, though. Googlebot does render JavaScript: for one production SPA, Search Console's URL inspection showed the fully rendered page indexed. So do not migrate frameworks for Google alone — check your own site in Search Console first. What remains true: rendering is deferred, social bots never run JS, and you should not assume AI crawlers do. Prerender the public routes for those reasons.

Discovery (max 3 questions, only if unknown)

Which pages need SEO — public marketing/landing/pricing, or also app routes?
Is the broken thing indexing (Google) or social previews (no image on share)?
Can you prerender marketing routes to static HTML, or must it stay a pure SPA?

Step 1 — Per-page head tags

Use react-helmet-async to set per route: unique <title>, <meta name="description">, a canonical link, and OpenGraph + Twitter Card tags:

og:title, og:description, og:image (1200×630), og:url, twitter:card=summary_large_image.
Always absolute URLs in og:image/canonical (relative URLs break previews).
Set <html lang> and one canonical per page to avoid duplicate-content issues.

Step 2 — Make crawlers actually see them (the high-impact fix)

Marketing/landing routes → prerender to static HTML with vite-ssg (or React SSR). Crawlers get real content + OG tags in the initial response. This is the single highest-impact change.
Pure CSR SPA, OG tags only → the "OG proxy" pattern: a Vercel function + vercel.json rewrite that detects social/bot user-agents and serves HTML with the correct meta injected.

Step 3 — Ship the crawl files

robots.txt in /public: allow crawl of public routes, block private/app routes, and point to the sitemap (Sitemap: https://domain.com/sitemap.xml).
sitemap.xml generated at build time (via vite-ssg output or a sitemap plugin), listing public URLs with <lastmod>. Submit it in Google Search Console.

Step 4 — Structured data (JSON-LD)

Add <script type="application/ld+json"> blocks:

Organization + SoftwareApplication/Product on home/pricing.
FAQPage on FAQ sections.
BreadcrumbList where relevant. Validate with Google's Rich Results Test.

Step 5 — Performance is SEO

Core Web Vitals feed ranking. Hand off to the frontend-performance skill: code-split routes, lazy-load below-the-fold images, serve modern image formats, keep third-party scripts async/minimal.

Field notes — check the live output, not the code

Each of these shipped past a green build:

No robots.txt or sitemap.xml at all, no canonical tag, and lang="en" on a Spanish site. Request the files; read the <html> tag.
A sitemap split in the middle of every URL and a broken Sitemap: line — the base URL came from an environment variable with a trailing newline. Open the sitemap in a browser.
Apex → www answered 307 instead of a permanent redirect.
The social image rendered with the system font because it was generated from a file:// page where the web font never loaded. Look at the actual image.
A font subset fell back silently: only latin-ext was loaded, and that subset does not contain the basic Latin characters — it extends latin, it does not include it.
Analytics proxied through a rewrite located every visitor in a data center (see deployment field notes).

Verify ownership by domain in Search Console and submit the sitemap there; it is also the only reliable way to see what Google actually rendered.

Output

Deliver: the react-helmet-async head component with OG/Twitter tags, the prerender or OG-proxy setup, robots.txt, the sitemap generation step, and the JSON-LD blocks for the key pages.

Reference

Google Search Central docs, react-helmet-async, antfu-collective/vite-ssg, Vercel functions / vercel.json rewrites.

Frequently asked questions

What does the Technical Seo AI skill do?

Why use Technical Seo on TypingMind?

Because you install it once and use it with any model. Technical Seo is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Technical Seo in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/MartinOlivero/saas-builder/tree/main/skills/technical-seo. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Technical Seo?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Technical Seo?

As many as you like. As long as a model supports skills, you can use Technical Seo with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Technical Seo AI skill free?

Yes. It is published on GitHub by MartinOlivero under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Deslop

openclaw

OrganizationPopular

Diff-scoped AI-slop cleanup pass: strip comment slop, defensive-check slop, type-laundering, and style drift from the current branch diff before autoreview.

Discord Clawd

Use to talk to the Discord-backed OpenClaw agent/session; not for archive search.

Discrawl

Discord archive: search, sync freshness, DMs, summaries, TUI, repo/release work.

Gitcrawl

GitHub archive: issue/PR search, sync freshness, duplicate clusters, current GitHub handoff, and Gitcrawl repo work.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Technical SEO

The SPA problem (state it upfront)

Discovery (max 3 questions, only if unknown)

Step 1 — Per-page head tags

Step 2 — Make crawlers actually see them (the high-impact fix)

Step 3 — Ship the crawl files

Step 4 — Structured data (JSON-LD)

Step 5 — Performance is SEO

Field notes — check the live output, not the code

Output

Reference

Frequently asked questions

Related AI Skills

Set up your own AI workspace now