notebook-t
commented
2 days ago https://github.com/0003BFFD43886488/br.tiringo.comandosLinux/issues/12
Mis disculpas por la interrupción. Continuemos desde donde lo dejamos.
- Manejo de variables de entorno (en Node.js)
Si estás trabajando en un entorno de desarrollo que soporta variables de entorno (como Node.js con dotenv), puedes gestionar las etiquetas meta dinámicamente según el entorno de la siguiente manera:
- Crea un archivo .env en la raíz del proyecto con las siguientes variables de entorno:
Archivo .env
SITE_NAME="Mi sitio web" SITE_DESCRIPTION="Este es un sitio web increíble." SITE_IMAGE="https://www.example.com/image.jpg" SITE_URL="https://www.example.com" SITE_LANG="es" AUTHOR_NAME="Nombre del autor" PUBLISHED_DATE="2023-09-20T10:00:00Z"
- A continuación, instala y configura dotenv para cargar estas variables:
npm install dotenv
En el archivo JavaScript que maneja las etiquetas meta:
// Cargar las variables de entorno require('dotenv').config();
function createMetaTag(name, content) { const meta = document.createElement('meta'); meta.name = name; meta.content = content; document.head.appendChild(meta); }
// Agregar etiquetas meta utilizando variables de entorno
createMetaTag('og:site_name', process.env.SITE_NAME); createMetaTag('description', process.env.SITE_DESCRIPTION); createMetaTag('og:image', process.env.SITE_IMAGE); createMetaTag('og:type', 'website'); createMetaTag('og:url', process.env.SITE_URL); createMetaTag('keywords', 'palabra clave 1, palabra clave 2, palabra clave 3'); createMetaTag('lang', process.env.SITE_LANG); createMetaTag('author', process.env.AUTHOR_NAME); createMetaTag('article:published_time', process.env.PUBLISHED_DATE);
- Explicación del Código:
dotenv: Es una librería para cargar las variables de entorno desde un archivo .env. Esto es útil para manejar configuraciones dinámicas en distintos entornos (desarrollo, producción).
process.env.VARIABLE_NAME: Se usa para acceder a las variables de entorno. En este caso, estamos cargando los valores definidos en el archivo .env para crear las etiquetas meta dinámicamente.
createMetaTag: La misma función que habías proporcionado para crear y agregar etiquetas meta al
del documento.- Uso en el Navegador (sin Node.js):
Si no estás utilizando Node.js, puedes manejar estas configuraciones de forma más manual, directamente en un archivo JavaScript o con un JSON para gestionar los datos:
// Datos de configuración en un objeto JSON const metaConfig = { siteName: "Mi sitio web", description: "Este es un sitio web increíble.", imageUrl: "https://www.example.com/image.jpg", siteUrl: "https://www.example.com", lang: "es", author: "Nombre del autor", publishedDate: "2023-09-20T10:00:00Z" };
function createMetaTag(name, content) { const meta = document.createElement('meta'); meta.name = name; meta.content = content; document.head.appendChild(meta); }
// Agregar etiquetas meta utilizando los valores del objeto metaConfig createMetaTag('og:site_name', metaConfig.siteName); createMetaTag('description', metaConfig.description); createMetaTag('og:image', metaConfig.imageUrl); createMetaTag('og:type', 'website'); createMetaTag('og:url', metaConfig.siteUrl); createMetaTag('keywords', 'palabra clave 1, palabra clave 2, palabra clave 3'); createMetaTag('lang', metaConfig.lang); createMetaTag('author', metaConfig.author); createMetaTag('article:published_time', metaConfig.publishedDate);
- Notas Adicionales:
Validación SEO y redes sociales: Asegúrate de validar las etiquetas meta utilizando herramientas como el Google Structured Data Testing Tool para asegurarte de que todo esté correctamente configurado, especialmente para plataformas como Facebook, Twitter, y otros motores de búsqueda.
Personalización por página: En proyectos más complejos, tal vez quieras que las etiquetas meta cambien dependiendo de la página en la que te encuentres. Esto lo puedes manejar fácilmente revisando la URL o añadiendo lógica adicional en tu código JavaScript.
Este enfoque te permite un control dinámico de las etiquetas meta en tu proyecto y asegura una configuración adecuada para SEO y redes sociales.
https://github.com/0003BFFD43886488/br.tiringo.comandosLinux/issues/12