Crear tabla de contenido automática en JavaScript
A Wikipedia le encanta agregar una lista automática de tabla de contenido para cada artículo que publica, ya que atrae más a los lectores al proporcionar más accesibilidad y una mejor navegación. Google prefiere contenido de alta calidad que esté bien organizado y formateado. Agregar elementos como tablas, secciones numeradas y una tabla de contenido generada automáticamente es una gran ventaja para una posición alta en SERPS.
En este artículo, compartiremos un complemento ligero de TCA escrito en JavaScript puro para generar una tabla de contenido automática desde los encabezados de las secciones de una página web.
DEMO: La siguiente tabla de contenido se crea dinámicamente en la carga de la página usando este script de TCA.
¿Que es una tabla de contenidos o TCA?
En los sitios web, una tabla de contenido automática abreviada como TCA, es una lista de enlaces, que generalmente se encuentra en una página web ubicada justo después del primer párrafo. Cada enlace de anclaje dentro de una tabla de contenido lo lleva a una sección específica de la página web. En blogger es difícil crear enlaces internos en una misma página, pero con este plugin es pan comido.
Una TCA en HTML proporciona una manera rápida de saltar a la sección deseada de una página. Por lo general, incluye los títulos de los encabezados de primer nivel (encabezados) o los encabezados de segundo nivel (subtítulos).
En trabajos impresos, una tabla de contenido se refiere a la página de índice del libro que contiene el número de página de cada capítulo. La tabla de contenido para los libros es más extensa y exhaustiva, ya que contiene no solo los títulos de las secciones, sino también las descripciones, los nombres de los autores y los subtítulos.
¿Que es el plugin o complemento TCA?
El complemento TCA, es una solución automática para el tedioso método de crear una tabla de contenido manualmente para cada página web. Genera automáticamente una tabla de contenido fácil de usar para tus largos artículos de blog. Está codificado en JavaScript puro y carga rápidamente. La tabla de contenido generada usando el complemento TCA es fácilmente rastreada e indexada por los robots de búsqueda.
Este interesante artículo de MOZ que menciona el soporte de SEO para todos los métodos JS que hemos usado hasta ahora en la construcción del complemento TCA
ALERTA DE SEO: Solo unos minutos después de que este artículo fue publicado Google no solo indexó los enlaces de anclaje TCA, sino que también agregó una etiqueta "Jump to" para identificar que es un enlace de anclaje que salta a una sección en particular. Ver para creer. :)
No he incluido etiquetas de encabezado de nivel inferior (es decir, h3 /h4 /h5 /h6) en el complemento TCA porque como una publicación de blog no es ni una wiki ni un libro largo, es mejor mostrar solo los principales titulares por simplicidad y accesibilidad. Agregar subtítulos o niveles más bajos dentro de una lista de TCA solo hace que sea más largo, por lo que reduce su contenido principal y destruye la visibilidad.
Hasta ahora, muchos desarrolladores han escrito un script de TCA dinámico, pero la mayoría de estos scripts están codificados en jQuery o están bloqueando el procesamiento de JS consumiendo el tiempo de carga de su página. Incluso puede encontrar el generador de TCA, pero estos scripts nuevamente carecen de flexibilidad y facilidad de personalización.
El plugin TCA debe agregarse solo a aquellos artículos que sean largos o que contengan al menos cuatro encabezados. Por el contrario, algunos generadores de TCA agregarán la lista en todas sus páginas, ya sea que contengan varios encabezados o solo un solo encabezado, lo que, por supuesto, no es algo sensato.
La tabla de contenido de jQuery es mucho más lenta en comparación con este complemento creado con JS tradicional puro. JavaScript se ejecuta mucho más rápido por los navegadores en comparación con una biblioteca JS (jQuery) que se debe importar primero.
Características del complemento TCA:
Es el primer complemento de JavaScript de su tipo que es único de varias maneras, como se menciona a continuación:
- Codificado en JavaScript puro: ¡ solo 10 líneas de código !
- Ligero y rápido.
- SEO Friendly
- Agrega una identificación única a cada sección automáticamente.
- Crea una lista ordenada o no ordenada
- Contiene un botón de alternar
- Mostrar en cualquier lugar que elija
- Fácilmente personalizable
- Responsive móvil
- Se ejecuta solo cuando se invoca!
Pseudo código del plugin TCA
Comprenda cómo funciona el script TCA en inglés simple. La lista numerada a continuación es el pseudo código para nuestro complemento TCA. Es una descripción simplificada del código JavaScript que escribimos.
- Crea una función para imprimir enlaces de titulares.
- Cuenta el número de secciones de encabezado en una página
- Ejecuta un bucle equivalente al número de secciones de encabezado.
- Extrae el contenido de texto de los títulos
- Le da a cada encabezado una identificación diferente
- Convertir el texto del encabezado en un enlace de anclaje
- Imprime los enlaces de anclaje del encabezado dentro de una lista de viñetas.
- Encuentra la ubicación por ID de TCA para mostrar la lista
- Termina el bucle
- Activa la función solo cuando se invoca dentro de la página
A continuación se muestra el pseudo código para el botón de alternar que muestra u oculta TCA.
- Crea una nueva función para mostrar/ocultar la tabla de contenido.
- Mostra la tabla de contenido por defecto
- Usa una declaración condicional para verificar si la TDC está oculta o visible.
- Usa CSS para mostrar u ocultar la tabla de contenido
- Activa la función solo cuando se hace clic en el botón
¿Como instalar el plugin TCA en blogs Blogger?
Compartiendo a continuación el método para agregar el complemento TCA en los blogs de Blogspot, pero puede aplicar casi el mismo método para instalar este complemento en cualquier sitio web que desee, ya sea que esté alojado en Wordpress o en cualquier otro lugar.
Siga estos pasos para instalarlo en BlogSpot:
1 Inicie sesión Blogger > Plantilla
2 Haga un copia de seguridad de su plantilla
3 Haga clic en " Editar HTML "
4 Justo encima de la etiqueta </head>, pegue los siguientes enlaces fuente
2 Haga un copia de seguridad de su plantilla
3 Haga clic en " Editar HTML "
4 Justo encima de la etiqueta </head>, pegue los siguientes enlaces fuente
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <script type='text/javascript'> //<![CDATA[ //*************TCA plugin function mbtTCA() {var mbtTCA=i=headlength=gethead=0; headlength = document.getElementById("post-tca").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-tca").getElementsByTagName("h2")[i].textContent;document.getElementById("post-tca").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTCA = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTCA").innerHTML += mbtTCA;}}function mbtToggle() {var mbt = document.getElementById('mbtTCA');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}} //]]> </script>
Tenga en cuenta que estoy agregando enlaces de origen a la fuente Oswaldy Font-Awesome para propósitos de estilo. Puede o no agregarlos. ¡El código dentro de las líneas resaltadas en color púrpura es el script TCA principal en no más de 10 líneas!
La etiqueta de encabezado principal en blogger es H2, pero si selecciona la etiqueta de subtítulo en el editor de blogger, entonces su etiqueta predeterminada sería H3. Si está utilizando la etiqueta de subtítulo como encabezado principal en sus publicaciones de blog, reemplace h2 por h3 tres veces en el código anterior. El complemento TCA no funcionará si su etiqueta de encabezado no es correcta.
5 Busque y encuentre ]]></b:skin> y justo arriba pegue el siguiente código CSS:
/*####Automatic TCA Plugin ####*/
.mbtTCA{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}
.mbtTCA ol,.mbtTCA ul {margin:0;padding:0;}
.mbtTCA ul {list-style:none;}
.mbtTCA ol li,.mbtTCA ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
.mbtTCA a{color:#0080ff;text-decoration:none;}
.mbtTCA a:hover{text-decoration:underline; }
.mbtTCA button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}
.mbtTCA button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
- Para cambiar el color de fondo del cuadro de TCA edite # FFFFE0
- Para cambiar el color del borde del cuadro de TCA edite # f7f0b8
- Para cambiar el color de la fuente del texto del título de la TCA, edite # 707037
- Para cambiar el color del enlace de anclaje, edite # 0080ff
- Para cambiar el tamaño de fuente de los enlaces de anclaje edite 15px
- Para cambiar el tamaño de fuente del texto del título de la TCA, edite 20px
<div id="post-tca"><data:post.body/></div>
Importante: encontrará dos o más ocurrencias de este código deberá reemplazar todas sus instancias con el código de arriba. El complemento TCA no funcionará si reemplaza <data:post.body/> solo una vez.
7 Guarde la plantilla y listo!
Mostrar tablas de contenido automáticamente en publicaciones de blog
Cada vez que desee mostrar TCA dentro de una publicación específica, siga estos dos pasos.
Paso # 1 Localice donde ubicará TCA
Es mejor mostrar el plugin TCA inmediatamente después del párrafo inicial o mostrarlo antes del primer encabezado de su publicación de blog.
Para hacer esto, cambie al modo "HTML" del editor de blogger y luego pegue el siguiente código HTML justo antes del primer encabezado o en cualquier otro lugar que desee.
<div class="mbtTCA">
<button onclick="mbtToggle()">Contenido</button>
<ol id="mbtTCA"></ol>
</div>
Puede reemplazar el texto " Contenido " con cualquier otro texto que le guste.
En el caso de que sus encabezados ya contengan números al comienzo, reemplace ol con ul.
Paso #2 Active el complemento
Finalmente, es hora de invocar el complemento para que pueda generar automáticamente una TCA al cargar la página,
Para hacer esto, pegue el siguiente código JS en la parte inferior de su editor de blogger donde termina su publicación:
<script>mbtTCA();</script>
Por supuesto esto en el modo HTML de su editor blogger.
¿Necesita ayuda con el complemento TCA?
Hice todo lo posible para que este tutorial sea lo más fácil posible, pero si hay algo que no pueda entender, no dude en publicar sus consultas a continuación en la sección de comentarios. Me encantaría responder lo antes posible.
Espero que agregue un impacto positivo en tu clasificación SERPS y te ayude a hacer que tu contenido sea más fácil de buscar. Desarrollaré el complemento con el tiempo, agregando más funciones y funcionalidades si es necesario. Hasta entonces, me encantaría escuchar sus comentarios sobre esto. :)
¡Publica tu post y ve la magia! :)
Contenido Relacionado:
No hay comentarios:
Publicar un comentario