contador de visitas html

Introducción al contador de visitas html

El contador de visitas HTML permite contabilizar el número de visitantes de tu sitio web o blog, ofreciendo datos que ayudan al análisis de tráfico y la confianza del usuario.

Soluciones sin programación externa

Contadores gratuitos embebidos

Servicios como ContadorVisitasGratis.com y POWR ofrecen widgets listos para insertar mediante un fragmento HTML. Solo debes copiar el código proporcionado y pegarlo en tu página.

  • Configuración inmediata
  • Sin instalación de bases de datos ni scripts propios
  • Opciones de diseño personalizables

Widgets con análisis adicionales

Plataformas como Elfsight presentan contadores con estadísticas en tiempo real, gráficos de visitas por día/semana/mes y configuraciones de estilo avanzadas.

Contador simple con JavaScript

Estructura básica en HTML

<h2>Visitas:</h2>
<div id="visitas">0</div>
<script src="contador.js"></script>
  

Esta solución usa localStorage para incrementar un valor al cargar la página.

Ejemplo de código en JavaScript

let visitas = localStorage.getItem('visitas') || 0;
visitas++;
localStorage.setItem('visitas', visitas);
document.getElementById('visitas').textContent = visitas;
  

Implementación robusta con PHP y base de datos

Creación de la tabla SQL

CREATE TABLE visitas (
  id INT AUTO_INCREMENT PRIMARY KEY,
  ip VARCHAR(45),
  fecha DATETIME DEFAULT CURRENT_TIMESTAMP
);
  

Código PHP en línea HTML

<h2>Total de visitas:</h2>
<?php
$conn = new mysqli('host','usuario','pass','bd');
$ip = $_SERVER['REMOTE_ADDR'];
$conn->query("INSERT INTO visitas(ip) VALUES('$ip')");
$result = $conn->query("SELECT COUNT(*) AS total FROM visitas");
echo '<div><strong>'.$result->fetch_assoc()['total'].'</strong></div>';
?>
  

Optimización SEO del artículo

Usar strong en términos clave: contador de visitas html, JavaScript, PHP, widget gratuito.

Incluir imágenes con alt text descriptivo:

  • alt="Código HTML de contador de visitas simple"
  • title="Ejemplo de contador de visitas HTML"

Formato claro con H2 y H3; sin H1.

Recursos de vídeo para ampliar información

Visualmex: AGREGA un contador de VISITAS

Sube W: Como agregar un contador de visitas a mi pagina web

Curso de programación: Insertar contador de visitas

Imágenes del artículo

Código HTML de contador de visitas simple Flujo de operaciones del contador