Sirve un único documento HTML con Content-Type: text/html; charset=utf-8, su título y descripción en el encabezado del documento y contenido legible en el cuerpo. Este recorrido para Mac crea una página sintética y comprueba que una sola respuesta incluya los tres elementos.

La tarea consiste en preparar un documento público legible por el navegador, usando una vista previa local antes de transferir la misma estructura a un sistema de publicación. El ejemplo contiene solo texto inventado sobre formas de papel y no requiere recursos externos.

¿Qué incluye una única respuesta HTTP tipada?

«Tipada» significa que la respuesta declara su tipo de medio. El campo Content-Type indica al destinatario el formato de la representación y cómo se debe procesar. En este caso, el formato es HTML. No proporciona un esquema de aplicación campo por campo. RFC 9110, sección 8.3

Una respuesta HTTP/1.1 tiene una línea de estado, campos de encabezado, una línea en blanco y un cuerpo opcional. Por lo tanto, puedes enviar metadatos de transporte en los encabezados y el documento completo en el cuerpo, sin crear una solicitud de metadatos aparte. RFC 9112, sección 2.1

Para esta tarea de publicación, usa la siguiente guía de ubicación. Separa la información que describe la representación HTTP de la que describe la página.

Información Ubicación Ejemplo
Formato y codificación de la representación Encabezado HTTP Content-Type: text/html; charset=utf-8
Título del documento Encabezado HTML <title>Formas de papel: círculo y cuadrado</title>
Resumen de la página Encabezado HTML <meta name="description" content="A short guide to arranging paper circles and squares.">
Contenido para los lectores Cuerpo HTML Encabezado, introducción e instrucciones de disposición

WHATWG define el elemento title como el título o nombre del documento y el valor de metadatos description como una descripción de la página. Usa un título y, como máximo, una declaración de descripción. Al estar dentro del documento HTML, el contenido y los metadatos descriptivos se transmiten juntos. Estándar HTML: Metadatos del documento

¿Cómo se crea una vista previa funcional en Mac?

Abre Terminal y comprueba qué comandos están disponibles:

python3 --version
curl --version

El programa de abajo requiere Python 3.7 o una versión posterior y solo utiliza la biblioteca estándar. Si python3 no está disponible, sigue las instrucciones oficiales de instalación para macOS y luego vuelve a abrir Terminal. La documentación de Python describe tanto el instalador como la ejecución de python3 desde una terminal. Uso de Python en macOS

Pega el bloque completo de abajo en Terminal, incluido el comando inicial y la línea final PY. Esto ejecuta el programa directamente; no crea ni sobrescribe ningún archivo. Deja abierta esta ventana de terminal mientras revisas la página.

python3 - <<'PY'
from html import escape
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer

TITLE = "Paper Shapes: Circle and Square"
SUMMARY = "A short guide to arranging paper circles and squares."
PAGE = f"""<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{escape(TITLE)}</title>
<meta name="description" content="{escape(SUMMARY, quote=True)}">
</head>
<body>
<main>
<h1>{escape(TITLE)}</h1>
<p>{escape(SUMMARY)}</p>
<h2>Try a simple arrangement</h2>
<p>Place one paper circle beside one paper square.</p>
<p>Switch their positions — then compare the two arrangements.</p>
</main>
</body>
</html>
""".encode("utf-8")

class Handler(BaseHTTPRequestHandler):
    protocol_version = "HTTP/1.1"

    def respond(self, include_body):
        if self.path != "/paper-shapes":
            self.send_error(404, "Page not found")
            return
        self.send_response(200)
        self.send_header("Content-Type", "text/html; charset=utf-8")
        self.send_header("Content-Length", str(len(PAGE)))
        self.end_headers()
        if include_body:
            self.wfile.write(PAGE)

    def do_GET(self):
        self.respond(True)

    def do_HEAD(self):
        self.respond(False)

if __name__ == "__main__":
    with ThreadingHTTPServer(("127.0.0.1", 8000), Handler) as server:
        print("Preview: http://127.0.0.1:8000/paper-shapes", flush=True)
        try:
            server.serve_forever()
        except KeyboardInterrupt:
            pass
PY

El controlador usa los métodos de respuesta documentados de Python: send_response() inicia la respuesta, send_header() agrega campos y end_headers() termina la sección de encabezados antes de que se escriban los bytes del cuerpo. Documentación del servidor HTTP de Python

El ejemplo define TITLE y SUMMARY una sola vez a propósito. Esos valores proporcionan tanto los metadatos como el texto visible, lo que facilita revisar este pequeño documento de forma coherente. En una página más larga, la descripción puede diferir del párrafo inicial y, aun así, resumir fielmente el mismo tema.

La página se codifica antes de calcular su longitud. HTTP define Content-Length en octetos, es decir, bytes; contar caracteres daría un resultado incorrecto debido a la raya del ejemplo. RFC 9110, sección 8.6

¿Cómo se comprueba que el contenido y los metadatos llegaron juntos?

Abre otra ventana de Terminal y ejecuta este comando. Hace una solicitud normal del documento y muestra tanto los encabezados de respuesta como el contenido:

curl -i --max-time 10 http://127.0.0.1:8000/paper-shapes

La opción -i incluye los encabezados de respuesta en el mismo flujo de salida que el cuerpo. El límite de tiempo restringe la transferencia a diez segundos. Estas opciones están documentadas en el manual de la línea de comandos de curl.

Comprueba la salida en este orden:

  1. La línea de estado debería indicar 200 OK.
  2. Un único campo Content-Type debería declarar text/html; charset=utf-8.
  3. Después de la línea en blanco de la sección de encabezados, el HTML debería contener el título y la descripción.
  4. El mismo cuerpo debería contener las instrucciones sobre las formas de papel.
  5. La raya debería aparecer correctamente en el texto decodificado.

A continuación, escribe http://127.0.0.1:8000/paper-shapes en la barra de direcciones de Safari. La página visible debería mostrar su encabezado, resumen e instrucciones. La declaración de descripción es metadato; su presencia se comprueba en el marcado devuelto, no se deduce del aspecto de la página.

También puedes comprobar la ruta que devuelve solo los encabezados:

curl -I --max-time 10 http://127.0.0.1:8000/paper-shapes

Esto envía HEAD, así que no puede comprobar que el cuerpo contenga el título o la descripción. Una respuesta HEAD omite el contenido y describe la representación correspondiente; usa la comprobación anterior de GET para inspeccionar el documento real. RFC 9110, sección 8.2

Si la vista previa no funciona, elige el siguiente paso según el síntoma:

Síntoma Siguiente paso
Al iniciar, se indica que la dirección ya está en uso Cambia 8000 por 8001 en el programa, vuelve a ejecutarlo y usa 8001 en cada comando de vista previa.
La solicitud indica un error de conexión Comprueba que la primera terminal siga mostrando la vista previa en ejecución y que los puertos coincidan.
La respuesta es 404 Usa exactamente /paper-shapes; este ejemplo no acepta una barra final ni una cadena de consulta.
El navegador sigue mostrando una versión anterior Detén el programa con Control-C, vuelve a ejecutar el bloque editado y recarga la página.
El encabezado se ve bien, pero faltan los metadatos Inspecciona la salida de GET y confirma que las declaraciones estén dentro del encabezado del documento.

¿Qué puede usar Google Search de esta respuesta?

Un título descriptivo, una descripción precisa y texto visible útil proporcionan a Google datos documentados para presentar una página. Google incluye el elemento title, el título visual principal, los elementos de encabezado y otras fuentes entre los datos que usa para generar automáticamente los enlaces de título. Procura que estas señales sean coherentes con el tema del documento. Cómo influir en los enlaces de título de los resultados de búsqueda

Google genera fragmentos principalmente a partir del contenido de la página y, en ocasiones, usa la meta description cuando describe la página con mayor precisión. Distintas búsquedas pueden producir distintos fragmentos. Considera la descripción un resumen útil, no un texto fijo para el resultado de búsqueda. Cómo controlar los fragmentos de los resultados de búsqueda

En el ejemplo sintético, la descripción promete una breve guía de disposición y el cuerpo ofrece esa guía. Cuando reemplaces el texto de muestra, comprueba expresamente que la relación sea correcta: quien lea solo la descripción debería hacerse una idea precisa de la página.

Agregar nombres de metadatos personalizados no garantiza que sean compatibles. Google afirma que ignora las etiquetas meta que no admite. Usa sus campos documentados para los metadatos destinados a la búsqueda; un campo inventado para tu propia aplicación necesita un consumidor definido por separado. Etiquetas meta y atributos compatibles con Google

¿Cómo se convierte la vista previa en un patrón de publicación pública?

La dirección local de este recorrido es una vista previa de escritorio, no una página publicada. Python también indica que http.server no se recomienda para producción. Transfiere la estructura HTML y los requisitos de respuesta a tu sistema de publicación, en vez de usar esta demostración como servicio de alojamiento público. Documentación del servidor HTTP de Python

Si usas un sistema de gestión de contenidos, busca los controles documentados para el título de la página y la meta description. Google señala que un CMS puede ofrecer ajustes de búsqueda en lugar de permitir la edición directa del HTML. Asocia esos controles con los campos que se muestran aquí y luego inspecciona la respuesta del documento resultante. Orientación de Google sobre cómo agregar meta descriptions

HTTP sí admite representaciones multipart, pero esa es otra opción de empaquetado. Para esta tarea de documentos legibles por el navegador, la estructura HTML compatible ya permite incluir el contenido y los metadatos del documento en una sola representación. Elegir multipart introduciría un requisito de procesamiento para el consumidor que este recorrido no necesita. RFC 9110, sección 8.3.3

La comprobación final es concreta: una única solicitud de documento satisfactoria devuelve el tipo de medio correcto, un cuerpo HTML completo, un título y una descripción precisos, y el texto que los lectores buscan. Aplica esta comprobación tanto a la respuesta pública final como a la vista previa local, para que la salida del sistema de publicación coincida con el documento que preparaste.

Fuentes