Curso HTML 15.1 Título de la página (title) y meta description
15.1 Título de la página () y meta description</h2>
<p>El <code><title></code> y la <code>meta description</code> son dos de los elementos HTML más importantes dentro de la sección <code><head></code> de un documento. Ambos influyen directamente en la experiencia del usuario, la usabilidad, el SEO (posicionamiento en buscadores) y el modo en que se muestra tu página en resultados de búsqueda o en redes sociales.</p>
<h3>1. El elemento <title></h3>
<p>El <code><title></code> define el título que aparece:</p>
<ul>
<li>En la pestaña del navegador.</li>
<li>Como texto clicable en los resultados de búsqueda (SERP).</li>
<li>Cuando se guarda la página en marcadores o favoritos.</li>
</ul>
<h4>Características clave</h4>
<ul>
<li>Debe situarse exclusivamente dentro de <code><head></code>.</li>
<li>Recomendación de longitud: entre 50 y 60 caracteres (aprox. 600–700px de ancho).</li>
<li>Debe ser único en cada página para evitar confusión a buscadores.</li>
<li>Evitar caracteres especiales innecesarios y mayúsculas excesivas.</li>
</ul>
<h4>Ejemplo de uso correcto</h4>
<pre class='EnlighterJSRAW' data-enlighter-language='html'>
<head>
<!-- Definición del título de la página -->
<title>Curso HTML Completo: Título, Meta Description y SEO Básico</title>
</head>
</pre>
<h4>Buenas prácticas y consejos</h4>
<ul>
<li>Coloca las palabras clave principales al inicio.</li>
<li>Mantén claridad y coherencia con el contenido real de la página.</li>
<li>No repitas el mismo título en varias páginas, cada URL debe tener un título único.</li>
</ul>
<h3>2. El elemento <meta name=’description’></h3>
<p>La <code>meta description</code> es una etiqueta <code><meta></code> que proporciona un resumen breve del contenido de la página. Aunque los buscadores no lo utilizan directamente como factor de ranking, sí lo muestran en la SERP y puede influir en la tasa de clics (CTR).</p>
<h4>Características clave</h4>
<ul>
<li>Se escribe con <code>name='description'</code> y el texto en el atributo <code>content</code>.</li>
<li>Longitud recomendada: entre 120 y 160 caracteres.</li>
<li>Debe ser único y descriptivo de cada página.</li>
<li>No debe incluir comillas dobles sin escapar.</li>
</ul>
<h4>Tabla comparativa de longitudes</h4>
<table border='1' cellpadding='4' cellspacing='0'>
<thead>
<tr>
<th>Elemento</th>
<th>Recomendación mínima</th>
<th>Recomendación máxima</th>
</tr>
</thead>
<tbody>
<tr>
<td>Título (<title>)</td>
<td>50 caracteres</td>
<td>60 caracteres</td>
</tr>
<tr>
<td>Meta description</td>
<td>120 caracteres</td>
<td>160 caracteres</td>
</tr>
</tbody>
</table>
<h4>Ejemplo de meta description</h4>
<pre class='EnlighterJSRAW' data-enlighter-language='html'>
<head>
<!-- Meta description para mejorar CTR en buscadores -->
<meta name='description'
content='Aprende a crear títulos y meta descriptions optimizados para SEO en tu sitio HTML paso a paso.'>
</head>
</pre>
<h4>Errores comunes</h4>
<ul>
<li>Duplicar la descripción en varias URL.</li>
<li>Escribir más de 160 caracteres y que se muestre cortada.</li>
<li>Incluir lenguaje de relleno o keywords stuffing.</li>
</ul>
<h3>3. Uso conjunto en el <head></h3>
<p>Combinar correctamente <code><title></code> y <code>meta description</code> es esencial. A continuación un ejemplo completo:</p>
<pre class='EnlighterJSRAW' data-enlighter-language='html'>
<head>
<!-- Título optimizado con palabras clave principales -->
<title>Guía HTML: Título, Meta Description y Mejores Prácticas SEO</title>
<!-- Meta description única y atractiva -->
<meta name='description'
content='Descubre cómo escribir títulos y meta descriptions eficaces para mejorar el SEO, la visibilidad y el CTR de tu sitio web.'>
<!-- Otros metadatos habituales -->
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
</pre>
<h3>4. Impacto SEO y de usabilidad</h3>
<ol>
<li>Mejor experiencia de usuario: claridad en lo que encontrará el visitante.</li>
<li>Aumento del CTR: textos atractivos en las SERP inducen más clics.</li>
<li>Diferenciación frente a la competencia: títulos y descripciones únicos.</li>
<li>Evita penalizaciones por contenido duplicado en buscadores.</li>
</ol>
<h3>5. Herramientas para comprobar longitud y visibilidad</h3>
<ul>
<li>Google Search Console: vista previa de cómo Google muestra tu fragmento.</li>
<li>Plugins SEO (Yoast, Rank Math) en CMS como WordPress.</li>
<li>Herramientas online de análisis de snippets y pixel width.</li>
</ul>
<p>Con estos conceptos y ejemplos podrás crear títulos y meta descriptions optimizados, únicos y alineados con tu estrategia de SEO y experiencia de usuario.</p>
</p>
<p></p>
<div class='ycw-post-nav'> <a class='ycw-nav-link prev' href='https://yourcodeweb.com/curso-html-15--seo-on-page-con-html'>Anterior</a> <a class='ycw-nav-link next' href='https://yourcodeweb.com/curso-html-15-2-uso-correcto-de-encabezados-para-jerarquia-de-contenidos-h1h6'>Siguiente</a></div>
</div>
<div class="wp-block-template-part">
<div style="height:0" aria-hidden="true" class="wp-block-spacer"></div>
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="margin-top:var(--wp--preset--spacing--70)">
<hr class="wp-block-separator alignwide has-css-opacity is-style-wide"/>
<div class="wp-block-columns alignwide has-small-font-size is-layout-flex wp-container-core-columns-is-layout-4edd3c80 wp-block-columns-is-layout-flex" style="margin-top:var(--wp--preset--spacing--30)">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-98f6e6d0 wp-block-column-is-layout-flow">
<div class="wp-block-group is-layout-flex wp-container-core-group-is-layout-386ab566 wp-block-group-is-layout-flex">
<p class="wp-block-paragraph">
Publicado </p>
<div class="wp-block-post-date"><time datetime="2025-11-13T12:28:12+00:00">noviembre 13, 2025</time></div>
<p class="wp-block-paragraph">
en </p>
<div class="taxonomy-category wp-block-post-terms"><a href="https://yourcodeweb.com/category/uncategorized/" rel="tag">Uncategorized</a></div>
</div>
<div class="wp-block-group is-layout-flex wp-container-core-group-is-layout-386ab566 wp-block-group-is-layout-flex">
<p class="wp-block-paragraph">
por </p>
<div class="wp-block-post-author"><div class="wp-block-post-author__content"><p class="wp-block-post-author__name">5my9z</p></div></div>
</div>
</div>
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-98f6e6d0 wp-block-column-is-layout-flow">
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-5c71f5ee wp-block-group-is-layout-flex">
<p class="wp-block-paragraph">
Etiquetas: </p>
</div>
</div>
</div>
</div>
</div>
<section class="wp-block-template-part">
<div class="wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-71df2e02 wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
<div class="wp-block-comments">
<h2 class="wp-block-heading">Comentarios</h2>
<div id="respond" class="comment-respond wp-block-post-comments-form">
<h3 id="reply-title" class="comment-reply-title">Deja una respuesta <small><a rel="nofollow" id="cancel-comment-reply-link" href="/curso-html-15-1-titulo-de-la-pagina-title-y-meta-description/#respond" style="display:none;">Cancelar la respuesta</a></small></h3><p class="must-log-in">Lo siento, debes estar <a href="https://yourcodeweb.com/wp-login.php?redirect_to=https%3A%2F%2Fyourcodeweb.com%2Fcurso-html-15-1-titulo-de-la-pagina-title-y-meta-description%2F">conectado</a> para publicar un comentario.</p> </div><!-- #respond -->
</div>
</div>
</section>
</main>
<footer class="wp-block-template-part">
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<div class="wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-72d1568c wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--40)">
<p class="wp-block-site-title"><a href="https://yourcodeweb.com" target="_self" rel="home">Your.Code.Web</a></p>
<p class="has-text-align-right wp-block-paragraph">
Funciona gracias a <a href="https://es.wordpress.org" rel="nofollow">WordPress</a> </p>
</div>
</div>
</footer>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentythree/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<div style="display:none">
<div class="grofile-hash-map-30ae8cf15ca93b9a35f6077d543ae354">
</div>
</div>
<script data-wp-router-options="{"loadOnClientNavigation":true}" fetchpriority="low" id="@wordpress/block-library/navigation/view-js-module" src="https://yourcodeweb.com/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=1bf28ded04f9f188bdcb" type="module"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['trackAllContentImpressions']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//stats.potionservices.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '22']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<script async data-wp-strategy="async" fetchpriority="low" id="comment-reply-js" src="https://yourcodeweb.com/wp-includes/js/comment-reply.min.js?ver=7.1.3"></script>
<script id="gamipress-js-js-extra">
var gamipress = {"ajaxurl":"/wp-admin/admin-ajax.php","nonce":"55e13b13af","achievement_fields":["id","title","title_size","link","thumbnail","thumbnail_size","points_awarded","points_awarded_thumbnail","excerpt","times_earned","global_times_earned","steps","toggle","heading","heading_size","unlock_button","earners","earners_limit","layout","align"]};
//# sourceURL=gamipress-js-js-extra
</script>
<script id="gamipress-js-js" src="https://yourcodeweb.com/wp-content/plugins/gamipress/assets/js/gamipress.min.js?ver=7.5.5"></script>
<script id="enlighterjs-js" src="https://yourcodeweb.com/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=GsorPL%2BhG86735y"></script>
<script id="enlighterjs-js-after">
!function(e,n){if("undefined"!=typeof EnlighterJS){var o={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":false,"textOverflow":"break","linenumbers":true,"theme":"dracula","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""}};(e.EnlighterJSINIT=function(){EnlighterJS.init(o.selectors.block,o.selectors.inline,o.options)})()}else{(n&&(n.error||n.log)||function(){})("Error: EnlighterJS resources not loaded yet!")}}(window,console);
//# sourceURL=enlighterjs-js-after
</script>
<script id="jetpack-stats-js-before">
_stq = window._stq || [];
_stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"128508757\",\"post\":\"627\",\"tz\":\"0\",\"srv\":\"yourcodeweb.com\",\"j\":\"1:15.2.1\"}") ]);
_stq.push([ "clickTrackerInit", "128508757", "627" ]);
//# sourceURL=jetpack-stats-js-before
</script>
<script data-wp-strategy="defer" defer id="jetpack-stats-js" src="https://stats.wp.com/e-202641.js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://yourcodeweb.com/wp-includes/js/wp-emoji-release.min.js?ver=7.1.3"}}
</script>
<script type="module">
/*! This file is auto-generated */
var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))});
//# sourceURL=https://yourcodeweb.com/wp-includes/js/wp-emoji-loader.min.js
</script>
</body>
</html>