skills.rest
magnusrodseth
magnusrodsethCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-seo

Automate SEO setup for TanStack Router/Start projects with OG images, JSON-LD, and sitemaps.

2|Updated Jun 2, 2024
Search Tags:#structured data#tanstack#seo#json-ld#sitemaps
One-click install
npx skills add https://github.com/magnusrodseth/dotfiles --skill tanstack-seo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-seo
Source: https://github.com/magnusrodseth/dotfiles/tree/main/.claude/skills/tanstack-seo
Command: npx skills add https://github.com/magnusrodseth/dotfiles --skill tanstack-seo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires satori, resvg-js, tanstack/react-router, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the setup and optimization of SEO configurations for TanStack Router and TanStack Start projects, addressing key aspects like dynamic Open Graph images, structured data, sitemaps, and more.

Core Features & Use Cases

  • Dynamic OG Image Generation: Automates the creation of Open Graph images using Satori and Resvg, with support for dynamic content.
  • Structured Data: Implements JSON-LD for various schemas, enhancing search engine rich results.
  • Sitemaps and Robots.txt: Generates dynamic XML sitemaps and customizable robots.txt files for better crawlability.
  • Per-Route Head Configuration: Provides tools for setting up canonical URLs, meta tags, and structured data per route.
  • Use Case: Ideal for developers or SEO professionals setting up new TanStack projects, or enhancing existing ones to improve search engine visibility and social sharing.

Quick Start

Run the skill with the command: tanstack-seo setup

Frequently Asked Questions about tanstack-seo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate dynamic Open Graph images for a TanStack Router project?▼

You can generate dynamic Open Graph images for TanStack Router by using Satori and resvg-js to render server-side images based on dynamic content. This approach automates image creation to enhance social sharing visibility.

How do I add JSON-LD structured data to individual TanStack routes?▼

You can add JSON-LD structured data to TanStack routes by applying per-route head configuration. This implements specific schemas for each route, enhancing search engine rich results without manual overhead.

Does SEO setup for TanStack Start require server-side image rendering dependencies?▼

Yes, SEO setup for TanStack Start requires server-side image rendering dependencies like satori and resvg-js. These libraries are necessary to automate dynamic Open Graph image generation and structured data management.

What is the best way to generate dynamic XML sitemaps for a TanStack application?▼

The best way to generate dynamic XML sitemaps for a TanStack application is through automated SEO configuration scripts. This process creates dynamic sitemaps and customizable robots.txt files to improve search engine crawlability.

Can I set canonical URLs and meta tags on a per-route basis in TanStack Router?▼

Yes, you can set canonical URLs and meta tags on a per-route basis in TanStack Router. The SEO setup provides specific tools for per-route head configuration, ensuring each route has accurate metadata.

Related Skills

Explore More Software Engineering Skills→
wanghaishengwanghaisheng
10

tanstack-integration-best-practices

Define TanStack Query, Router, and Start integration patterns for SSR hydration.

Community
Advanced
adcuelloaadcuelloa

seo

Optimize web content with technical SEO, on-page elements, and JSON-LD schema.

Community
Intermediate
vercel-labsvercel-labs
246

satori

Convert HTML and CSS into SVG images with the Satori library.

Official
Intermediate
aevans-engaevans-eng
4

seo

Audit static site HTML files against 9 SEO checklists and add missing elements.

Community
Intermediate