SEO de Contenidos y CMS SEO y Social

Temas • • HTML y metadatos Optimización de Entradas. Framework RCP Optimización de la

Cómo vemos nosotros una página web Diciembre 2016 L. Codina. UPF-BSM 3

Como la ve un buscador: Código fuente Diciembre 2016 L. Codina. UPF-BSM 4

Composición del código fuente – Contenido para los seres humanos • Textual • Multimedia

Metadatos: información sobre la información • No es eficiente buscar información de forma directa.

HTML y SEO • Etiquetas y atributos – Etiquetas • h 1, h 2,

Marcado: estructurar el contenido Si aparecen estas marcas El significado es El navegador lo

Dossier de ejercicios • Preparación – Documento Word o Drive – Navegador – Recorte

Ejercicio - Metadatos • Visualice el código fuente de la página principal de un

Preparación ejercicio – Abrir el bloc de notas y copiar este contenido: SEO y

Ejercicio HTML • Guardar el contenido del bloc de notas con este nombre de

Etiquetas HTML de una página básica <html> <head> <title> … </title> <meta name=“description” content=“

Ejercicio • Vuelva al bloc de notas y estructure el texto con las siguientes

Metadatos • ¿Dónde están? – En la sección <head> – En secciones concretas del

Ejemplo Metadato title en Vilaweb <title>Vila. Web - Diari digital líder en català. Última

Visible en la página de resultados de Google Diciembre 2016 L. Codina. UPF-BSM 17

Repasemos: el contenido visible Diciembre 2016 L. Codina. UPF-BSM 18

El contenido invisible (en el navegador): sección <head> Diciembre 2016 L. Codina. UPF-BSM 19

Ejercicio • Añadir metadatos a la página: – title (max. 65 caracteres) • <title>SEO

Componentes de una SERP El snippet o resumen Diciembre 2016 L. Codina. UPF-BSM 21

Ejercicio – ¿Podría relacionar la estructura del snippet con algún elemento del lenguaje HTML?

Hiperenlaces y SEO • Ejemplo: sea un enlace a la web de la PBS

Código fuente para el siguiente ejercicio <html> <head> <title> SEO y Periodismo: Una presentación

Ejercicio • Añadir un enlace al código fuente • Usar PBS como anchor text

CMS - Preparación • Elegir un nombre de dominio con una palabra clave para

Optimización SEO de la Entrada – Factores para revisar • Palabra clave: – Extensión:

CMS-3 – Palabra(s) Clave • Una vez redactado el primer borrador de su entrada

CMS 4 – Capa navegación – Añada enlaces: • A una fuente o sitio

CMS 5 – Programación/Publicación • Haga un última revisión • Revise y, en su

Plugins imprescindibles • Yoast: Análisis SEO interactivo. Previsualización del snippet. Edición de metadatos title

La Web Social • Principales sitios donde dar a conocer nuestras publicaciones: – Twitter

Framework RCP • Framework Redactar-Chequear-Publicar • Acceso al framewok completo: • http: //repositori. upf.

Slides: 33

Download presentation

SEO de Contenidos y CMS SEO y Social Media para Comunicadores – UPF BSM Lluís Codina (UPF) Diciembre 2016

Temas • • HTML y metadatos Optimización de Entradas. Framework RCP Optimización de la Navegación. Taxonomías Plugins recomendados. SEO, Social Media, Edición HTML, Navegación semántica Diciembre 2016 L. Codina. UPF-BSM 2

Cómo vemos nosotros una página web Diciembre 2016 L. Codina. UPF-BSM 3

Como la ve un buscador: Código fuente Diciembre 2016 L. Codina. UPF-BSM 4

Composición del código fuente – Contenido para los seres humanos • Textual • Multimedia – Etiquetas HTML • Metadatos para los buscadores – Título, descripción, palabras clave, autor… • Marcado para estructurar la página en el navegador h 1, h 2, p, a… Diciembre 2016 L. Codina. UPF-BSM 5

Metadatos: información sobre la información • No es eficiente buscar información de forma directa. Es (mucho) más eficiente usar metadatos: – La guía de programas de televisión: en lugar de ir pasando de cadena en cadena (cuando lleguemos al programa buscado, ya habrá acabado) – Las palabras clave de las fotografías en los bancos de imágenes: en lugar de revisarlas una por una – Los catálogos de bibliotecas: en lugar de ir recorriendo las estanterías una por una Diciembre 2016 L. Codina. UPF-BSM 6

HTML y SEO • Etiquetas y atributos – Etiquetas • h 1, h 2, h 3 • strong – Atributos • title (en imágenes y enlaces) • alt (en imágenes) – Hiperenlaces • a – Metadatos • title • meta description Diciembre 2016 L. Codina. UPF-BSM 7

Marcado: estructurar el contenido Si aparecen estas marcas El significado es El navegador lo presentará así h 1 Ej. <h 1>Televisión de calidad</h 1> Título principal Con un cuerpo de letra superior al tamaño base y en negrita h 2 Ej. <h 2>Google News</h 2> Título de segundo nivel Televisión de Calidad Un cuerpo algo superior al tamaño base, pero menor que el anterior, y en negrita Google News p El SEO tiene impacto positivo en el tráfico web Diciembre 2016 Párrafo Cuerpo de tamaño base (p. e. 12 pt) y en redonda El SEO tiene impacto positivo en el tráfico web L. Codina. UPF-BSM 8

Dossier de ejercicios • Preparación – Documento Word o Drive – Navegador – Recorte de pantalla • Ejecución – Realización del ejercicio – Captura de pantalla con el Recorte de pantalla (o tecla Impr Pant) – Pegar la captura en el documento Word o Drive Diciembre 2016 L. Codina. UPF-BSM 9

Ejercicio - Metadatos • Visualice el código fuente de la página principal de un medio de comunicación (ej. Vilaweb, Yorokobu) • Vea si puede localizar ejemplos de lo siguiente (puede usar el buscador interno de la página que muestra el código fuente): – Metadatos • title: busque, p. e. una línea de texto de estilo: <title>blabla, blablaba</title> • meta description: busque también alguna línea de estilo: <meta name=“description” content=“xxx” /> • Documente el ejercicio con una captura de pantalla Diciembre 2016 L. Codina. UPF-BSM 10

Preparación ejercicio – Abrir el bloc de notas y copiar este contenido: SEO y Comunicación Audiovisual: Una presentación general 1. Introducción SEO son las siglas de Search Engine Optimization. Se refiere al conjunto de análisis y buenas prácticas de creación de contenido que ayudan a posicionar una página en un buscador 2. El SEO y la Comunicación Audiovisual Actualmente, ningún medio de comunicación del sector audiovisual puede ignorar el decisivo impacto de los buscadores en el tráfico del mismo. 3. Enlaces de interés • El SEO según la Wikipedia Diciembre 2016 L. Codina. UPF-BSM 11

Ejercicio HTML • Guardar el contenido del bloc de notas con este nombre de archivo: – pag 01. html • Sin cerrar el bloc de notas (minimizar), hacer dos clics en el archivo pag 01. html y ver el resultado en el navegador • ¿Presenta algún tipo de estructura? • ¿Tienen algún efecto los espacios e “intros” presentes en el texto? Diciembre 2016 L. Codina. UPF-BSM 12

Etiquetas HTML de una página básica <html> <head> <title> … </title> <meta name=“description” content=“ …” /> </head> <body> <h 1> … </h 1> … <h 2>…</h 2> … </body> </html> Diciembre 2016 L. Codina. UPF-BSM 13

Ejercicio • Vuelva al bloc de notas y estructure el texto con las siguientes etiquetas: – html – head – body – h 1 – h 2 –p • Compruebe el resultado en el navegador Diciembre 2016 L. Codina. UPF-BSM 14

Metadatos • ¿Dónde están? – En la sección <head> – En secciones concretas del código fuente • ¿Dónde aparecen? – En la página de resultados de los buscadores Diciembre 2016 L. Codina. UPF-BSM 15

Ejemplo Metadato title en Vilaweb <title>Vila. Web - Diari digital líder en català. Última hora, notícies i opinió</title> Diciembre 2016 L. Codina. UPF-BSM 16

Visible en la página de resultados de Google Diciembre 2016 L. Codina. UPF-BSM 17

Repasemos: el contenido visible Diciembre 2016 L. Codina. UPF-BSM 18

El contenido invisible (en el navegador): sección <head> Diciembre 2016 L. Codina. UPF-BSM 19

Ejercicio • Añadir metadatos a la página: – title (max. 65 caracteres) • <title>SEO y Comunicación Audiovisual</title> – meta description (max. 130 caracteres) • <meta name=“description” content=“SEO y Comunicación Audiovisual: Introducción al Posicionamiento Web para Comunicadores” /> • Documentar con captura de pantalla del código fuente Diciembre 2016 L. Codina. UPF-BSM 20

Componentes de una SERP El snippet o resumen Diciembre 2016 L. Codina. UPF-BSM 21

Ejercicio – ¿Podría relacionar la estructura del snippet con algún elemento del lenguaje HTML? – Si tuviera que completar la tabla siguiente, ¿qué pondría en las celdas de la segunda columna? Snippet en la SERP Elemento HTM Título Descripción Diciembre 2016 L. Codina. UPF-BSM 22

Hiperenlaces y SEO • Ejemplo: sea un enlace a la web de la PBS El sitio de la <a href="http: //www. pbs. org/">PBS</a> está muy bien optimizado • Componentes: – Elemento: a – Etiquetas de inicio y final: <a> … </a> – Atributo: href – Valor del atributo: “http: //www. pbs. org/” – Anchor text, texto de anclaje o contenido afectado: PBS Diciembre 2016 L. Codina. UPF-BSM 23

Código fuente para el siguiente ejercicio <html> <head> <title> SEO y Periodismo: Una presentación general</title> </head> <body> <h 1>SEO y Periodismo: Una presentación general</h 1> <hr /> <h 2>1. Introducción</h 2> SEO son las siglas de Search Engine Optimization. Se refiere al conjunto de análisis y buenas prácticas de creación de contenido que ayudan a posicionar una página en un buscador <h 2>2. El SEO y la Comunicación Social</h 2> Actualmente, ningún medio de comunicación puede ignorar el decisivo impacto de los buscadores en el tráfico del mismo. <h 2>3. Casos de interés</h 3> El sitio de la PBS está muy bien posicionado <hr /> <h 3>Última actualización: xx de xxxx. Por xxxx. </h 3> </body> </html> Diciembre 2016 L. Codina. UPF-BSM 24

Ejercicio • Añadir un enlace al código fuente • Usar PBS como anchor text o texto de anclaje • Comprobar su funcionamiento en el navegador • Capturar navegador y código fuente Diciembre 2016 L. Codina. UPF-BSM 25

CMS - Preparación • Elegir un nombre de dominio con una palabra clave para la queramos tener visibilidad • Elegir un tema responsive (adaptado a la web móvil) • Configurar el sitio para que utilice URL estáticas con el título de las entradas • Prever: – Al menos dos grandes Categorías para el sitio • Crear una Página de Créditos con los nombres de los autores y, a poder ser, atribuir secciones o roles. Incluir algún dato de CV de cada autor y una explicación breve del contenido y objetivos del sitio • Organizar el primer modelo de navegación con al menos tres ítems en el menú principal: – Las dos categorías – La página de créditos • Considere otras opciones de navegación lateral o al pie mediante widgets Diciembre 2016 L. Codina. UPF-BSM 26

Optimización SEO de la Entrada – Factores para revisar • Palabra clave: – Extensión: 300 o más palabras – Densidad de palabra clave: entre 0, 5 y 2, 5 por ciento – Distribución de la palabra clave • Puntos determinados de la entrada o noticia – Refuerzo semántico • Pensar al menos un sinónimo de la palabra clave o término relacionado • Multimedialidad – Al menos una imagen, fotografía o infografía – A poder ser, un vídeo • Hipertextualidad – Al menos un enlace a una fuente externa Diciembre 2016 L. Codina. UPF-BSM 27

CMS-3 – Palabra(s) Clave • Una vez redactado el primer borrador de su entrada o noticia: – Identifique una frase o palabra clave por la que crea que debería ser fácilmente encontrada su entrada – Revise si esta palabra clave aparece: • • • Diciembre 2016 En el metadato <title> En el metadato <name description> En el titulo principal (h 1) En un subtitulo (h 2) En uno de los párrafos iniciales En uno de los párrafos centrales En uno de los párrafos finales Al menos una vez marcado en negrita En el título de una imagen Asegúrese de que está utilizando sinónimos de la palabra clave Si está justificado: mencione nombres de entidades vinculadas con el tema (empresas, personas, topónimos, marcas, etc. ) L. Codina. UPF-BSM 28

CMS 4 – Capa navegación – Añada enlaces: • A una fuente o sitio externo relacionado • A una entrada relacionada del propio sitio, si es el caso – Asigne la entrada al menos a una categoría – Asigne, al menos, entre dos y cuatro etiquetas a la entrada Diciembre 2016 L. Codina. UPF-BSM 29

CMS 5 – Programación/Publicación • Haga un última revisión • Revise y, en su caso, edite el título y los textos de distribución en redes sociales • Programe la publicación para el momento óptimo o de acuerdo al calendario editorial Diciembre 2016 L. Codina. UPF-BSM 30

Plugins imprescindibles • Yoast: Análisis SEO interactivo. Previsualización del snippet. Edición de metadatos title y description. • Jetpack: Botones de distribución Social Media. • Zemanta: navegación semántica, interlinking, reducción de la tasa de rebote, aumento de tiempo en el sitio. • Tiny. MCEAdvanced: Código fuente. Etiquetas HTML • i. Themes: Seguridad Diciembre 2016 L. Codina. UPF-BSM 31

La Web Social • Principales sitios donde dar a conocer nuestras publicaciones: – Twitter – Facebook – Youtube – Google+ Diciembre 2016 L. Codina. UPF-BSM 32

Framework RCP • Framework Redactar-Chequear-Publicar • Acceso al framewok completo: • http: //repositori. upf. edu/bitstream/handle/1 0230/26040/codina_RCP_042016. pdf Página del autor lluiscodina. com Diciembre 2016 L. Codina. UPF-BSM 33