🟢Chat
Convertir un HTML en HTML semántico

Transformar el HTML original en una versión más clara, estructurada y comprensible para buscadores, sistemas de IA, lectores de pantalla y navegadores, sin reescribir el contenido.
Seo Html, css, js Semantica ChatGPT 77 vistas · 0 copias
Por: santosguerra
Prompt
Abrir en Chat
Actúa como especialista en HTML semántico, accesibilidad básica, SEO técnico y preparación de contenidos AI-ready para WordPress.

Voy a pegarte un HTML de un artículo o página. Tu tarea es convertirlo en HTML semántico limpio, manteniendo intacto el contenido visible.

OBJETIVO

Transformar el HTML original en una versión más clara, estructurada y comprensible para buscadores, sistemas de IA, lectores de pantalla y navegadores, sin reescribir el contenido.

REGLA PRINCIPAL
No modifiques el contenido visible salvo que te lo pida expresamente.

Debes mantener intactos:
- Texto.
- Orden de los párrafos.
- Negritas.
- Cursivas.
- Enlaces.
- Anchors.
- Imágenes.
- Alt text.
- Title de enlaces e imágenes.
- Listas.
- Citas o frases textuales.
- Tono editorial.
- Intención del contenido.

NO hagas:
- No reescribas frases.
- No corrijas estilo.
- No añadas información nueva.
- No cambies keywords.
- No añadas enlaces.
- No elimines enlaces.
- No añadas un H1 si el HTML original no lo tiene.
- No añadas figcaption si no existe texto visible en el original.
- No metas CSS.
- No uses clases inventadas salvo una clase general mínima si ayuda, por ejemplo post-content o post-intro.

ESTRUCTURA QUE DEBES APLICAR

1. Envuelve todo el contenido en:
<article class="post-content" itemscope itemtype="https://schema.org/Article">

2. Si el contenido empieza con párrafos introductorios antes del primer H2, agrúpalos en:
<header class="post-intro">
 ...
</header>

3. Cada bloque con H2 debe convertirse en una sección semántica:
<section id="slug-descriptivo" aria-labelledby="heading-slug-descriptivo">
 <h2 id="heading-slug-descriptivo">Título original del H2</h2>
 ...
</section>

4. Si dentro de una sección hay H3, mantenlos dentro de la sección del H2 correspondiente.
Si el H3 abre un subbloque claro, puedes envolverlo así:
<section id="slug-del-h3" aria-labelledby="heading-slug-del-h3">
 <h3 id="heading-slug-del-h3">Título original del H3</h3>
 ...
</section>

5. Envuelve todos los textos sueltos en párrafos:
<p>Texto original...</p>

6. Mantén las listas como listas:
- Usa <ul> si son elementos sin orden secuencial.
- Usa <ol> si son pasos, fases, rankings o elementos numerados.
- No conviertas listas en párrafos.

7. Las imágenes deben tratarse así:
Original:
<img ... />
Convertido:
<figure>
 <img ... loading="lazy" decoding="async" />
</figure>
Mantén intactos:
- src
- alt
- title
- class
- width
- height

Añade solo:
- loading="lazy"
- decoding="async"

No añadas <figcaption> salvo que ya exista una frase visible asociada a la imagen en el HTML original.

8. Elimina HTML sucio o innecesario:
- &nbsp; sueltos.
- <span style=""> sin valor semántico.
- Estilos inline innecesarios.
- Etiquetas vacías.
- Espacios extraños dentro de etiquetas como <em>Algo </em> simple, que debe quedar como <em>Algo</em> simple.

9. Mantén <strong>, <b>, <em> e <i> si ya existen.
No los cambies salvo que haya una etiqueta rota o mal cerrada.

10. No añadas schema JSON-LD.
Solo usa el microdato básico en <article>:
itemscope itemtype="https://schema.org/Article"

11. No añadas tabla de contenidos.
12. No añadas resumen.
13. No añadas CTA nuevo.
14. No añadas clases visuales.
15. No cambies la jerarquía de headings salvo que haya un error evidente.

CRITERIO SOBRE H1
Antes de generar el resultado, revisa si el HTML original tiene H1.
- Si el original no tiene H1, no añadas H1.
- Si el contenido es para WordPress, asume que el H1 lo genera el título de la entrada.
- Si el original tiene H1, mantenlo solo si no duplica el título de WordPress.
- Si hay duda, indica: “Nota: no añado H1 porque normalmente WordPress lo genera desde el título de la entrada.”

FORMATO DE RESPUESTA
Primero indica brevemente:
“Contenido visible modificado: No.”
Después lista los cambios aplicados:
1. Añadido <article>.
2. Introducción agrupada en <header>.
3. Cada H2 convertido en <section aria-labelledby="">.
4. Imágenes envueltas en <figure>.
5. Añadido loading="lazy" y decoding="async" a imágenes.
6. Eliminado HTML sucio si existía.
7. Párrafos envueltos correctamente en <p>.
8. Listas mantenidas como <ul> u <ol>.
9. No añadido <h1> si el original no lo tenía.

Después entrega únicamente el HTML final en un bloque de código.

IMPORTANTE
Antes de entregar, revisa:
- Que no has cambiado ninguna frase.
- Que no has eliminado enlaces.
- Que no has añadido texto visible.
- Que todos los aria-labelledby apuntan a un id existente.
- Que no hay H2 o H3 fuera de estructura lógica.
- Que todas las secciones están bien cerradas.
- Que el HTML es apto para pegar en WordPress en modo HTML.

HTML A CONVERTIR:
← Volver al directorio
Convertir un HTML en HTML semántico

Compartir prompt
