Generador de Metaetiquetas

Un generador de metaetiquetas es una herramienta que crea automáticamente las etiquetas HTML que describen el contenido de una página web para mejorar su visibilidad en buscadores.

¿Qué son las metaetiquetas?

Son fragmentos de código HTML que no se muestran al usuario directamente, pero que aportan información a los motores de búsqueda y redes sociales.
Ejemplos comunes:
- Meta title: el título que aparece en los resultados de Google.
- Meta description: el resumen breve que acompaña al título en los buscadores.
- Meta keywords: palabras clave relacionadas con el contenido (aunque hoy en día tienen poco peso en SEO).
- Meta robots: indican a los buscadores si deben indexar o seguir enlaces de la página.
- Etiquetas sociales (Open Graph, Twitter Card): definen cómo se verá tu página al compartirse en redes sociales.

⚙️ ¿Qué hace un generador de metaetiquetas?

Automatiza la creación de estas etiquetas a partir de datos básicos que introduces (título, descripción, palabras clave, idioma, autor, etc.).
Optimiza la longitud de los textos para que cumplan con los límites recomendados por Google (ej. título ≤ 60 caracteres, descripción ≤ 160 caracteres).
Facilita el SEO, ya que ayuda a que tu página aparezca mejor posicionada en los resultados de búsqueda.
Genera código listo para copiar y pegar en el <head> de tu página web.

Ejemplo de metaetiquetas generadas

html

<meta name="title" content="Blog de recetas fáciles y rápidas">
<meta name="description" content="Descubre recetas caseras, rápidas y deliciosas para cada ocasión.">
<meta name="keywords" content="recetas, cocina fácil, comida rápida, postres">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Blog de recetas fáciles y rápidas">
<meta property="og:description" content="Descubre recetas caseras, rápidas y deliciosas para cada ocasión.">
<meta property="og:image" content="https://tusitio.com/imagen.jpg">
<meta property="og:url" content="https://tusitio.com">

🚀 Ventajas de usar un generador

Ahorra tiempo y evita errores de sintaxis.
Garantiza que las etiquetas cumplan con los estándares SEO.
Permite personalizar fácilmente la información para buscadores y redes sociales.

En resumen, un generador de metaetiquetas es como un asistente SEO que te da el código listo para mejorar la presencia de tu web en Google y en redes sociales.

Generador de Metaetiquetas Automático

Incluye etiquetas básicas (title, description, robots), canónica, Open Graph y Twitter Card. Copia el código en un archivo .html, súbelo o insértalo en tu sitio, y úsalo desde el navegador.

Cómo usarlo

Rellena los campos: título, descripción y la ruta dentro de ee3.es..
Genera y copia: pulsa “Generar metaetiquetas” y luego “Copiar” para pegar el bloque en el head de tu página.
Imágenes y canónica: usa URLs absolutas del dominio (por ejemplo, https://ee3.es/…); si no pones canónica, se construye con el dominio y la ruta.

Consejos rápidos

Título: claro y específico, idealmente bajo 60–70 caracteres.
Descripción: persuasiva y fiel al contenido, intenta mantenerla bajo 160–180 caracteres.
OG/Twitter: usa una imagen 1200×630 para buen aspecto en redes; la URL debe ser absoluta.
Robots: “index, follow” para páginas públicas; “noindex, nofollow” para páginas que no quieres posicionar.

¿Quieres que lo integre como componente (por ejemplo en Next.js/Vue) o adaptar los estilos al branding de ee3.es??

Diferencia entre una web HTML y una web PHP

Una página web hecha solo con HTML es estática, mientras que una página web en PHP puede ser dinámica e interactiva. Aquí te explico las diferencias clave:

Diferencias entre HTML y PHP

Característica	HTML (estático)	PHP (dinámico)
🧱 Tipo de lenguaje	De marcado	De programación del lado del servidor
🔄 Interactividad	No puede procesar formularios ni datos	Puede manejar formularios, sesiones, bases de datos
📦 Generación de contenido	El contenido es fijo	El contenido puede cambiar según el usuario o la base de datos
🗃️ Acceso a base de datos	No tiene capacidad	Puede conectarse a MySQL, PostgreSQL, etc.
🔐 Seguridad	No puede proteger páginas ni gestionar usuarios	Puede validar usuarios, proteger rutas, cifrar datos
🧠 Lógica de negocio	No permite lógica	Permite condicionales, bucles, funciones
📄 Extensión de archivo	`.html`	`.php`
🧰 Uso típico	Landing pages, portafolios simples	Webs profesionales, tiendas online, blogs, sistemas

🧪 Ejemplo comparativo

HTML simple:

html

<h1>Bienvenido</h1>
<p>Hoy es martes.</p>

PHP dinámico:

php

<h1>Bienvenido</h1>
<p>Hoy es <?php echo date("l"); ?>.</p>

➡️ El HTML siempre mostrará “Hoy es martes”, mientras que el PHP mostrará el día real según el servidor.

🧠 ¿Cuándo usar cada uno?

HTML: Ideal para sitios informativos simples, sin interacción.
PHP: Recomendado para sitios que requieren lógica, autenticación, formularios, paneles de control, etc.

Aquí tienes el código completo de una página web profesional en PHP con el estilo CSS integrado directamente en el archivo index.php. Esto facilita la visualización sin depender de archivos externos:

✅ `index.php` con CSS embebido

php

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Web Profesional</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      background-color: #f9f9f9;
    }

    header {
      background-color: #2c3e50;
      color: white;
      padding: 1em;
      text-align: center;
    }

    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 2em;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    main {
      padding: 2em;
      text-align: center;
    }

    .boton {
      display: inline-block;
      padding: 0.5em 1em;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 1em;
    }

    footer {
      background-color: #ecf0f1;
      text-align: center;
      padding: 1em;
      margin-top: 2em;
    }
  </style>
</head>
<body>
  <header>
    <h1>Mi Web Profesional</h1>
    <nav>
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
        <li><a href="#">Acceso</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Soluciones digitales para tu negocio</h2>
      <p>Desarrollamos sitios web modernos, seguros y optimizados para buscadores.</p>
      <a href="#" class="boton">Solicita presupuesto</a>
    </section>
  </main>

  <footer>
    <p>&copy; <?php echo date("Y"); ?> Mi Web Profesional. Todos los derechos reservados.</p>
  </footer>
</body>
</html>

Este archivo PHP ya incluye todo lo necesario para verse como una página profesional. Puedes guardarlo como index.php y abrirlo en tu servidor local (XAMPP, WAMP, etc.).

ara crear una página web profesional en PHP, necesitas una arquitectura modular, conexión a base de datos, seguridad, y diseño responsivo. Un buen ejemplo es una tienda online o sistema de gestión con PHP, MySQL, HTML, CSS y JavaScript.

Aquí tienes una estructura profesional básica con componentes clave:

🧱 Estructura de proyecto profesional

Código

/miweb-profesional
│
├── config/
│   └── db.php              # Conexión a base de datos
│
├── includes/
│   ├── header.php          # Encabezado común
│   ├── footer.php          # Pie de página común
│   └── functions.php       # Funciones reutilizables
│
├── public/
│   ├── index.php           # Página principal
│   ├── contacto.php        # Formulario de contacto
│   └── login.php           # Autenticación
│
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── main.js
│
└── README.md

🔐 `config/db.php` – Conexión segura a MySQL

php

<?php
$host = 'localhost';
$db = 'miweb';
$user = 'usuario';
$pass = 'contraseña';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Error de conexión: " . $e->getMessage());
}

🧠 `includes/functions.php` – Funciones reutilizables

php

<?php
function limpiarEntrada($data) {
    return htmlspecialchars(strip_tags(trim($data)));
}

📄 `public/index.php` – Página principal

php

<?php include('../includes/header.php'); ?>
<main>
  <h1>Bienvenido a Mi Web Profesional</h1>
  <p>Soluciones digitales con PHP y MySQL.</p>
</main>
<?php include('../includes/footer.php'); ?>

📄 `public/contacto.php` – Formulario con validación

php

<?php
include('../includes/header.php');
include('../config/db.php');

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $nombre = limpiarEntrada($_POST["nombre"]);
    $email = limpiarEntrada($_POST["email"]);
    $mensaje = limpiarEntrada($_POST["mensaje"]);

    $stmt = $pdo->prepare("INSERT INTO mensajes (nombre, email, mensaje) VALUES (?, ?, ?)");
    $stmt->execute([$nombre, $email, $mensaje]);

    echo "<p>Mensaje enviado correctamente.</p>";
}
?>

<form method="post">
  <input type="text" name="nombre" placeholder="Tu nombre" required>
  <input type="email" name="email" placeholder="Tu email" required>
  <textarea name="mensaje" placeholder="Tu mensaje" required></textarea>
  <button type="submit">Enviar</button>
</form>

<?php include('../includes/footer.php'); ?>

🎨 `assets/css/style.css` – Diseño responsivo

css

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}

header, footer {
  background: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

main {
  padding: 2em;
}

🛒 ¿Quieres algo más avanzado?

Puedes explorar este proyecto completo de tienda PHP avanzada en GitHub. Incluye gestión de productos, usuarios, carrito y panel de administración.

¿Te gustaría que te ayude a personalizar una plantilla profesional o integrar funciones como login, panel de control o pagos?

Popup en una entrada de WordPress

Como poner un Popup en una entrada de WordPress. Una forma directa y eficaz de crear un Popup (o Modal), en tu entrada de WordPress.

📄 Código paso a paso

1. Añadir el HTML del modal

Coloca este bloque en el archivo single.php de tu tema hijo, o bien mediante un hook en functions.php usando wp_footer. En este ejemplo, el modal solo se carga si la entrada tiene un ID concreto (ejemplo: 123).

php

<?php
// En functions.php o en single.php
function ee3_modal_single_entry() {
    if (is_single(123)) { // Cambia 123 por el ID de tu entrada
        ?>
        <!-- Modal HTML -->
        <div id="ee3Modal" class="modal">
          <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Bienvenido a esta entrada</h2>
            <p>Este es un modal exclusivo para esta entrada en ee3.es.</p>
          </div>
        </div>

        <style>
          /* Estilos básicos del modal */
          .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.7);
          }
          .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 8px;
          }
          .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
          }
          .close:hover {
            color: #000;
          }
        </style>

        <script>
          // Script para abrir y cerrar el modal
          document.addEventListener("DOMContentLoaded", function() {
            var modal = document.getElementById("ee3Modal");
            var span = document.getElementsByClassName("close")[0];

            // Mostrar modal al cargar la página
            modal.style.display = "block";

            // Cerrar modal al hacer clic en la X
            span.onclick = function() {
              modal.style.display = "none";
            }

            // Cerrar modal al hacer clic fuera del contenido
            window.onclick = function(event) {
              if (event.target == modal) {
                modal.style.display = "none";
              }
            }
          });
        </script>
        <?php
    }
}
add_action('wp_footer', 'ee3_modal_single_entry');

🔎 Explicación

is_single(123) → asegura que el modal solo se muestre en la entrada con ID 123.
El modal se abre automáticamente al cargar la página.
Se puede cerrar con la X o haciendo clic fuera del contenido.
Todo el código se inyecta en el footer de WordPress para no romper la estructura del tema.

📌 Conclusión: Con este snippet, tu modal aparecerá únicamente en la entrada que definas en ee3.es.

Agregarle una Imagen al Popup

Ejemplo con imagen en el modal

Dentro del bloque modal-content añade la imagen:

html

<div id="ee3Modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Bienvenido a esta entrada</h2>
    <img src="https://tusitio.com/wp-content/uploads/imagen-modal.jpg" 
         alt="Imagen ilustrativa" 
         style="max-width:100%; height:auto; margin-bottom:1rem; border-radius:8px;">
    <p>Este es un modal exclusivo para esta entrada en ee3.es.</p>
  </div>
</div>

🔎 Detalles importantes

src → pon la URL de la imagen que quieras mostrar. Si la subes a la biblioteca de medios de WordPress, copia la URL completa.
style → con max-width:100% y height:auto aseguras que la imagen sea responsive y no se desborde.
margin-bottom → añade espacio debajo de la imagen.
border-radius → opcional, para esquinas redondeadas.

📌 En Divi

Si usas el módulo de código de Divi, pega el bloque completo del modal con la imagen incluida.
Si prefieres, puedes añadir la imagen desde la biblioteca de Divi y copiar su URL en el src.

Instalar un Sitio Web de WordPress en un VPS con Debian

Guía fidedigna y paso a paso para instalar WordPress en un dominio genérico tu-sitio.com, incluyendo el subdominio www, la configuración del VirtualHost en Apache, la base de datos en MariaDB y el certificado SSL

📘 Guía de instalación de WordPress en `tu-sitio.com`

1. 🔧 Preparar el dominio y subdominio

En tu panel de DNS (ej. DonDominio):

Registro A
- Nombre: @
- Valor: IP pública de tu VPS
Registro A para www
- Nombre: www
- Valor: misma IP pública
(Opcional) Registro AAAA si usas IPv6

👉 Esto asegura que tanto tu-sitio.com como www.tu-sitio.com apunten al servidor.

2. 🖥️ Crear el VirtualHost en Apache

Edita o crea un archivo en /etc/apache2/sites-available/tu-sitio.conf:

apache

<VirtualHost *:80>
    ServerName tu-sitio.com
    ServerAlias www.tu-sitio.com
    DocumentRoot /var/www/tu-sitio

    <Directory /var/www/tu-sitio>
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/tu-sitio_error.log
    CustomLog ${APACHE_LOG_DIR}/tu-sitio_access.log combined
</VirtualHost>

Activar el sitio y reiniciar Apache:

bash

sudo a2ensite tu-sitio.conf
sudo systemctl reload apache2

3. 🗄️ Crear la base de datos en MariaDB

Accede a MariaDB:

bash

sudo mysql -u root -p

Crea la base de datos y usuario:

sql

CREATE DATABASE tu_sitio_db;
CREATE USER 'tu_sitio_user'@'localhost' IDENTIFIED BY 'contraseña_segura';
GRANT ALL PRIVILEGES ON tu_sitio_db.* TO 'tu_sitio_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

4. 📥 Instalar WordPress

Descarga y descomprime:

bash

cd /tmp
wget https://wordpress.org/latest.tar.gz
tar -xvzf latest.tar.gz
sudo mv wordpress/* /var/www/tu-sitio/

Permisos:

bash

sudo chown -R www-data:www-data /var/www/tu-sitio
sudo chmod -R 755 /var/www/tu-sitio

5. 🔒 Instalar certificado SSL con Certbot

Instala Certbot:

bash

sudo apt install certbot python3-certbot-apache -y

Genera el certificado:

bash

sudo certbot --apache -d tu-sitio.com -d www.tu-sitio.com

👉 Elige la opción de redirigir todo el tráfico a HTTPS.

6. ⚙️ Configuración en WordPress

En el panel de administración:

Dirección de WordPress (URL): https://tu-sitio.com
Dirección del sitio (URL): https://tu-sitio.com

En .htaccess asegúrate de tener:

apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

7. 🔑 Recordatorio de acceso

Si olvidas la contraseña:

sql

UPDATE wp_users SET user_pass = MD5('NuevaClave2025!') WHERE user_login = 'admin';

👉 Luego cámbiala desde el panel para que se guarde con el hash moderno.

8. 📑 Checklist final

DNS: tu-sitio.com y www.tu-sitio.com apuntando a la IP del VPS
Apache: VirtualHost activo con ServerName y ServerAlias
MariaDB: base de datos y usuario creados con permisos
WordPress: instalado en /var/www/tu-sitio con permisos correctos
Certbot: SSL activo y redirección a HTTPS
WordPress: URLs ajustadas a https://tu-sitio.com

🔒 Cómo evitar interferencias entre sitios

Cada dominio/subdominio debe tener su propio DocumentRoot en Apache.

En cada archivo de configuración (/etc/apache2/sites-available/*.conf) defines el ServerName, ServerAlias y el DocumentRoot correspondiente. 👉 Así Apache sabe qué carpeta servir según el dominio que se solicite.

Certificados SSL: cada dominio tiene su propio certificado. Certbot los instala y configura en el VirtualHost correspondiente, sin tocar los demás.

Bases de datos: cada WordPress debe usar su propia base de datos y usuario en MariaDB. 👉 Ejemplo: tu_sitio_db.

Esto garantiza que no se mezclen usuarios ni contenido.
Usuarios SFTP/SSH: si quieres máxima seguridad, cada sitio puede tener su propio usuario “enjaulado” en su directorio. Así evitas que un usuario acceda a los archivos de otro sitio.

✅ En resumen

Mientras mantengas:

Directorios separados
VirtualHosts separados
Bases de datos separadas
(Opcional) usuarios SFTP separados

👉 No habrá interferencia entre tus sitios. Apache y MariaDB gestionan cada uno de forma independiente.

Opciones ChatGPT

Opciones gratuitas y de pago del servicio ChatGPT (por OpenAI), así como las diferencias más importantes entre ellas:

✅ Versión gratuita

Se puede usar sin coste para uso básico, chatear, hacer preguntas, etc. (cloudeagle.ai)
Algunas limitaciones típicas:
Modelos menos potentes o se cambia a versiones ligeras cuando está muy ocupado. (DeltaTimeNews)
Posibles tiempos de espera o acceso limitado durante horas de alta demanda. (allmoneylab.com)
Funciones avanzadas (como herramientas especializadas, integración de archivos, proyectos) pueden estar ausentes o limitadas. (nexos.ai)

💡 Versión de pago (“Plus” u otros planes)

El plan más común es ChatGPT Plus (unos US $20/mes típicamente) para usuarios individuales. (cloudeagle.ai)
Qué aporta sobre la versión gratuita:
Acceso a modelos más potentes y avanzados (mejor “razonamiento”, mayor contexto, etc.). (DeltaTimeNews)
Menos probabilidades de encontrar la “capacidad completa” ocupada o de que el servicio esté restringido. (allmoneylab.com)
Funciones extra como subida de archivos, análisis de datos, generación de imágenes, etc., que pueden estar más disponibles o más potentes en la versión de pago. (overchat.ai)
También existen planes para empresas o equipos con precios distintos y características adicionales (más límites, uso profesional, etc.). (cloudeagle.ai)

🔍 Tabla resumida rápida

Característica	Versión gratuita	Versión de pago (Plus / equipo)
Precio	US $0	US $20/mes aprox. (o más para empresas)
Acceso al modelo más avanzado	Limitado / modelo “ligero”	Acceso a modelos más potentes
Prioridad de servicio	Menor prioridad	Prioridad mayor, menos interrupciones
Funciones extra (imágenes, archivos, proyectos)	Limitadas	Más completas o disponibles
Uso profesional o equipo	Adecuada para uso informal	Mejor para uso intensivo, profesional