EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Etiquetas acceso directo
            Etiquetas HTML para los iconos de acceso directo en Android, iPhone y otras aplicaciones
            06/09/2019
            Repositorio Git y SourceTree
            Cómo usar Github y SourceTree para publicar contenido
            07/09/2019

            Metaetiquetas o metatags para redes sociales en HTML

            Metaetiquetas rrss

            metaetiquetas metatags redes sociales html

            Tabla de contenidos

            • 10. Metaetiquetas o metatags para redes sociales en HTML
            • #1 Metaetiquetas en Twitter
            • #2 Metaetiquetas en Facebook o Pinterest, Open Graph
            • #3 Incluir los botones de para compartir tweets, momentos, likes…

            10. Metaetiquetas o metatags para redes sociales en HTML

            A la hora de compartir una página web en una red social hay que tener en cuenta diferentes aspectos para presentar el contenido de una forma atractiva. Por ejemplo, es necesario definir el título, una fotografía, la descripción o el autor, entre otras cosas. Para ello utilizaremos las metaetiquetas o metatags (también conocidas por etiquetas meta o meta tags).

            No existe un estándar de metaetiquetas para representar todas las redes sociales. Así por ejemplo, Linkedin, Pinterest o Facebook utilizan Open Graph Protocol y Twitter utiliza Twitter Cards. Veamos cómo representar cada una de ellas.

            #1 Metaetiquetas en Twitter

            • Selecciona la Twitter Card que quieres añadir en la página de desarrolladores de Twitter.
            • Incluye el código o metaetiquetas necesarias en tu sitio web.
            • Comprueba que tus Twitter Cards funcionan correctamente. Para ello, introduce la url en el Validador de Cards de Twitter.

            Ejemplo de código o metaetiquetas para Twitter:

            See the Pen Etiquetas Twitter by Eniun (@Eniun) on CodePen.0

            Aspecto validador de Twitter:

            Validador Twitter
            Figura 1. Aspecto del validador de metaetiquetas de Twitter.

            #2 Metaetiquetas en Facebook o Pinterest, Open Graph

            • Realiza la misma operación para Facebook desde la página para webmasters.
            • Verifica si está todo correcto mediante el Depurador de contenido.

            Ejemplo de código o metaetiquetas Open Graph:

            See the Pen Etiquetas Open Graph by Eniun (@Eniun) on CodePen.0

            Aspecto del validador de metaetiquetas de Facebook:

            validador facebook
            Figura 2: Aspecto del validador de metaetiquetas de Facebook.

            #3 Incluir los botones de para compartir tweets, momentos, likes…

            Además de los elementos anteriores, también nos puede interesar incluir en nuestra web los botones para compartir en redes sociales. Para ello, accederemos a las diferentes páginas para desarrolladores y generaremos el código correspondiente para posteriormente insertarlo en nuestra web.

            En el caso de Twitter podemos agregar los botones para compartir tweets, perfiles, momentos, likes desde las siguiente página para desarrolladores.

            Compartir

            UD2. HTML

            • 1. Lenguaje de marcas HTML
            • 2. Estructura y elementos semánticos
            • 3. Contenido y texto
            • 4. Formularios
            • 5. Tablas de contenido
            • 6. Contenido incrustado
            • 7. Elementos de ordenación
            • 8. Marcadores en HTML
            • 9. Factores HTML clave para el SEO
            • 10. Test de verificación HTML y herramientas útiles
            • 11. Marcos o frames, una tecnología obsoleta
            • 12. Etiquetas HTML para acceso directo en Android e iPhone
            • 13. Metaetiquetas o metatags para redes sociales
            • 14. Cómo usar Github y SourceTree para publicar contenido
            • 15. Repositorio Git en Visual Studio Code
            • 16. Resumen HTML
            • 17. Referencias y recursos HTML

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results