SEO Cheatsheet
Referencia rapida de SEO y performance web: meta tags, Open Graph, structured data, Core Web Vitals, lazy loading, optimizacion de imagenes y checklist de optimizacion. Imprimi esta pagina y tenela a mano.
Meta Tags Esenciales
| Tag | Descripción | Ejemplo |
|---|---|---|
| <title> | Titulo de la pagina (50-60 chars). Factor de ranking #1 on-page | <title>Guía Flexbox — WebForge</title> |
| meta description | Texto en resultados de Google (150-160 chars). Afecta CTR | <meta name="description" content="..."> |
| meta charset | Encoding del documento. Obligatorio | <meta charset="UTF-8"> |
| meta viewport | Configuración de viewport. Obligatorio para responsive | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| meta robots | Control de indexacion y seguimiento de links | <meta name="robots" content="index, follow"> |
| meta theme-color | Color de la barra del navegador en mobile | <meta name="theme-color" content="#0d1117"> |
| link canonical | URL canonica. Evita contenido duplicado | <link rel="canonical" href="https://..."> |
| link icon | Favicon de la pagina | <link rel="icon" type="image/svg+xml" href="/favicon.svg"> |
| apple-touch-icon | Icono para homescreen de iOS | <link rel="apple-touch-icon" sizes="180x180" href="..."> |
Meta Robots — Valores
| Valor | Efecto | Uso tipico |
|---|---|---|
| index, follow | Indexar y seguir links (por defecto) | La mayoria de las paginas |
| noindex, follow | No indexar pero si seguir links | Paginas con contenido duplicado |
| index, nofollow | Indexar pero no seguir links | Paginas con links patrocinados |
| noindex, nofollow | No indexar ni seguir links | Paginas privadas, de admin |
| nosnippet | No mostrar snippet en resultados | Paginas con contenido sensible |
| noarchive | No guardar cache de la pagina | Contenido que cambia seguido |
| max-snippet:0 | Limitar longitud del snippet | Controlar texto en resultados |
Open Graph & Twitter Cards
| Tag | Descripción |
|---|---|
| og:type | Tipo de contenido: website, article, profile, video.other |
| og:url | URL canonica de la pagina |
| og:title | Titulo para compartir (60 chars max) |
| og:description | Descripción para compartir (155 chars max) |
| og:image | URL absoluta de la imagen (1200x630px, 1.91:1) |
| og:image:width | Ancho de la imagen OG en pixeles |
| og:image:height | Alto de la imagen OG en pixeles |
| og:locale | Idioma: es_AR, en_US, etc. |
| og:site_name | Nombre del sitio web |
| twitter:card | summary (chica) o summary_large_image (grande, igual que OG) |
| twitter:title | Titulo especifico para Twitter/X |
| twitter:description | Descripción específica para Twitter/X |
| twitter:image | Imagen especifica para Twitter/X |
| twitter:creator | Handle del autor: @usuario |
HTML Semantico & Headings
| Regla SEO | Detalle |
|---|---|
| <h1> — Uno solo por pagina | Titulo principal. Debe incluir la keyword principal al inicio |
| <h2> — Secciones principales | Subtopicos dentro de la pagina. Incluir keywords secundarias |
| <h3> a <h6> | Subsecciones. Nunca saltar niveles (no ir de h2 a h4) |
| <main> | Envuelve todo el contenido principal. Solo uno por pagina |
| <article> | Contenido independiente y reutilizable (posts, productos) |
| <nav> | Bloques de navegacion. Usar aria-label para distinguir |
| <header> / <footer> | Cabecera y pie de la pagina o de un article |
| <section> | Division tematica del contenido. Siempre con heading propio |
| <aside> | Contenido complementario (sidebar, related posts) |
| <figure> + <figcaption> | Imagen con pie de foto. Mejor SEO para imagenes |
| <time> | Fechas legibles para maquinas: <time datetime="2026-06-11"> |
| alt en imagenes | Google no "ve" imagenes. Siempre agregar alt descriptivo |
Structured Data (JSON-LD)
| Tipo @type | Cuando usarlo | Campos clave |
|---|---|---|
| BlogPosting | Posts de blog y articulos | headline, author, datePublished, dateModified, publisher, image |
| Article | Articulos de noticias generales | headline, author, datePublished, image, publisher |
| FAQPage | Preguntas frecuentes (rich snippet expandible) | mainEntity: [{ Question: { name, acceptedAnswer: { text } } }] |
| HowTo | Tutoriales paso a paso | name, description, step: [{ name, text, image }] |
| BreadcrumbList | Breadcrumbs visibles en resultados de Google | itemListElement: [{ name, item (url), position }] |
| Organization | Info de la empresa en la home | name, url, logo, contactPoint, sameAs (redes sociales) |
| Product | Fichas de producto con precio | name, image, description, brand, offers: { price, currency } |
| LocalBusiness | Negocios fisicos con ubicacion | name, address, geo, telephone, openingHours |
Core Web Vitals
| Metrica | Que mide | Bueno | Malo | Como mejorar |
|---|---|---|---|---|
| LCP | Velocidad de carga del contenido más grande | < 2.5s | > 4.0s | Optimizar imagenes hero, preconnect a orígenes, CDN, server caching |
| INP | Responsividad a interacciones (clicks, taps, teclas) | < 200ms | > 500ms | Reducir JS bloqueante, code splitting, web workers, event delegation |
| CLS | Estabilidad visual (layout shifts inesperados) | < 0.1 | > 0.25 | width/height en imagenes, aspect-ratio CSS, font-display: swap |
Optimización de Imágenes
| Tecnica | Descripción | Ejemplo |
|---|---|---|
| loading="lazy" | Lazy loading nativo (carga al scrollear). No usar en imagenes above-the-fold | <img src="foto.jpg" loading="lazy" alt="..."> |
| decoding="async" | Decodifica la imagen de forma asincrona sin bloquear el render | <img src="foto.jpg" decoding="async" alt="..."> |
| width + height | Reserva espacio antes de cargar. Previene CLS. Usar siempre | <img src="h.jpg" width="800" height="400" alt="..."> |
| aspect-ratio | Alternativa CSS a width+height. Responsive sin CLS | img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } |
| srcset | Provee multiples resoluciónes. El navegador elige la mejor | <img srcset="sm.jpg 400w, lg.jpg 800w" sizes="(max-width:600px) 400px, 800px"> |
| <picture> | Art direction: diferentes recortes o formatos segun el media query | <source srcset="avif" type="image/avif"> |
| Formato WebP | Formato moderno. 25-35% más chico que JPEG con calidad similar | <source type="image/webp" srcset="foto.webp"> |
| Formato AVIF | Formato de proxima gen. 50% más chico que JPEG. Soporte creciente | <source type="image/avif" srcset="foto.avif"> |
| fetchpriority="high" | Prioriza la carga de la imagen hero (LCP). Solo 1 por pagina | <img src="hero.jpg" fetchpriority="high" alt="..."> |
| preconnect | Anticipa la conexión al dominio de donde vienen las imagenes | <link rel="preconnect" href="https://cdn.ejemplo.com"> |
Lazy Loading & Carga de Recursos
| Tecnica | Descripción | Uso |
|---|---|---|
| loading="lazy" | Lazy loading nativo del navegador para imagenes e iframes | Imaganes below-the-fold. NO usar en la imagen hero |
| loading="eager" | Fuerza la carga inmediata (comportamiento por defecto) | Imagenes above-the-fold que son LCP |
| defer | Descarga JS en paralelo, ejecuta despues del parseo HTML | <script src="app.js" defer></script> |
| async | Descarga y ejecuta JS en paralelo. No garantiza orden | Scripts independientes (analytics, ads) |
| rel="preload" | Descarga recurso critico con alta prioridad | <link rel="preload" href="hero.webp" as="image"> |
| rel="prefetch" | Descarga recurso de baja prioridad para la proxima pagina | <link rel="prefetch" href="siguiente-pagina.js"> |
| rel="preconnect" | Abre conexión anticipada a un origen (DNS + TCP + TLS) | <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin> |
| rel="dns-prefetch" | Solo resolución DNS anticipada (más liviano que preconnect) | <link rel="dns-prefetch" href="https://cdn.ejemplo.com"> |
Checklist SEO — Antes de Publicar
| Check | Detalle |
|---|---|
| <title> unico y descriptivo | 50-60 caracteres, keyword principal al inicio, diferente en cada pagina |
| meta description única | 150-160 caracteres, atractiva, diferente en cada pagina. Incluir CTA |
| <h1> unico por pagina | Solo uno. Debe coincidir con el tema principal de la pagina |
| Jerarquia de headings | h1 > h2 > h3 sin saltar niveles. Keywords en headings |
| HTML semantico | Usar main, article, nav, header, footer, section, aside |
| Imagenes con alt | Todas las imagenes con alt descriptivo. Decorativas: alt="" |
| Imagenes optimizadas | WebP/AVIF, width+height, loading="lazy" (below fold), srcset |
| Open Graph completo | og:type, og:title, og:description, og:image (1200x630), og:url |
| Twitter Card | twitter:card, twitter:title, twitter:description, twitter:image |
| Canonical URL | link rel="canonical" en todas las paginas para evitar duplicados |
| Robots correctos | noindex en paginas privadas/duplicadas. index,follow en el resto |
| Structured data | JSON-LD con @type correcto. Validar con Rich Results Test |
| LCP < 2.5s | Imagen hero optimizada, preconnect, fetchpriority="high", CDN |
| INP < 200ms | JS no bloqueante, code splitting, event handlers livianos |
| CLS < 0.1 | width+height en img/iframes, aspect-ratio CSS, font-display: swap |
| Viewport responsive | meta viewport correcto, mobile-first, sin horizontal scroll |
| HTTPS | Certificado SSL activo. HTTP a HTTPS redirect |
| Sitemap.xml | Enviar a Google Search Console. Incluir todas las paginas publicas |
| robots.txt | Permitir crawlers. Bloquear rutas privadas (/admin/, /api/) |
| Links internos | Texto de ancla descriptivo. No usar "click aca" o "leer mas" como unico texto |
| Sin links rotos (404) | Verificar con Google Search Console. Redirigir URLs cambiadas (301) |
| Performance general | Lighthouse score > 90 en Performance, Accessibility, SEO, Best Practices |
Herramientas de SEO & Performance
| Herramienta | Para que sirve | URL |
|---|---|---|
| Google Search Console | Metricas reales de Core Web Vitals, indexacion, errores de rastreo | search.google.com/search-console |
| PageSpeed Insights | Auditoria de performance con datos de campo y laboratorio | pagespeed.web.dev |
| Lighthouse | Auditoria completa: Performance, a11y, SEO, Best Practices (en DevTools) | Chrome DevTools > Lighthouse |
| Rich Results Test | Validar structured data (JSON-LD) y rich snippets | search.google.com/test/rich-results |
| Sharing Debugger | Probar y forzar refresh de Open Graph tags (Facebook) | developers.facebook.com/tools/debug |
| Card Validator | Probar Twitter Cards y previsualizar como se ve al compartir | cards-dev.twitter.com/validator |
| Can I Use | Verificar soporte de navegadores para cualquier feature web | caniuse.com |
| Squoosh | Comprimir y convertir imagenes a WebP/AVIF (herramienta de Google) | squoosh.app |
| WebPageTest | Test de performance detallado con waterfall, filmstrip, metricas | webpagetest.org |
| Schema.org | Referencia de todos los tipos de structured data disponibles | schema.org |