Fundamentos de SEO on-page
El SEO on-page se refiere a optimizar páginas individuales para rankear mejor. Incluye tanto el contenido visible para los usuarios como el código HTML.
Title tags
El elemento on-page más importante. Aparece en pestañas del navegador y resultados de búsqueda.
<!-- Best practices for title tags -->
<title>Primary Keyword - Secondary Keyword | Brand Name</title>
<!-- Examples -->
<title>Learn React Hooks - Complete Tutorial 2024 | TechLead</title>
<title>JavaScript Array Methods Guide - Map, Filter, Reduce</title>
<!-- Next.js metadata -->
export const metadata = {
title: 'Learn React Hooks - Complete Tutorial',
// Or use template
title: {
template: '%s | TechLead',
default: 'TechLead - Learn Web Development',
},
};- Manténlo por debajo de 60 caracteres
- Coloca la keyword principal al inicio
- Haz que cada título sea único
- Incluye la marca al final
Meta descripciones
Resumen del contenido de la página. Se muestra en los resultados debajo del título.
<meta name="description"
content="Learn React Hooks with practical examples.
Master useState, useEffect, useContext and custom hooks
in this comprehensive guide for beginners.">
// Next.js
export const metadata = {
description: 'Learn React Hooks with practical examples...',
};- Manténla entre 150-160 caracteres
- Incluye un llamado a la acción
- Incorpora keywords de forma natural
- Hazla atractiva para mejorar el CTR
Estructura de encabezados
<!-- Proper heading hierarchy -->
<h1>Main Page Title (only one per page)</h1>
<h2>Major Section 1</h2>
<h3>Subsection 1.1</h3>
<h3>Subsection 1.2</h3>
<h2>Major Section 2</h2>
<h3>Subsection 2.1</h3>
<h4>Detail 2.1.1</h4>
<!-- Don't skip levels -->
<!-- Bad: h1 → h3 (skipped h2) -->
<!-- Good: h1 → h2 → h3 -->Optimización de contenido
Haz:
- Usa keywords de forma natural en las primeras 100 palabras
- Incluye términos relacionados (LSI)
- Escribe contenido completo
- Usa párrafos cortos y viñetas
- Agrega imágenes con texto alt
No hagas:
- Hacer keyword stuffing
- Duplicar contenido de otras páginas
- Ocultar texto o usar fuentes diminutas
- Crear contenido superficial (<300 palabras)
- Ignorar la intención del usuario
Optimización de imágenes
// Next.js Image component with SEO
import Image from 'next/image';
<Image
src="/react-hooks-diagram.png"
alt="React Hooks lifecycle diagram showing useState and useEffect flow"
width={800}
height={450}
loading="lazy"
/>
// File naming: use-descriptive-names.jpg (not IMG_1234.jpg)