18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 1/13

You are here: Home / The Anatomy of a Perfect Web Page / Anatomía de la Página web Perfecta

Call: +44 (0) 808 22 444 22

Email: info@hitreach.co.uk

173

Compartir Tweet

60

Anatomía de la Página web Perfecta

Anatomía de la Página web Perfecta (edición

de 2013) es diseñado con el fin de presentarte

un resumen, una introducción y recursos más

completos para cada elemento que forma parte

de la página web perfecta.

Dado que el diseño web, la experiencia de

usuario, el SEO, la optimización de la tasa de

conversión y muchas otras actividades se

mezclan cada vez más, tienes que saber cómo

todos los elementos de una página forman el

éxito de tú sitio web, sea lo que sea tú papel en

el proceso. También es importante que

conozcas los vínculos que existen entre todos

estos elementos.

Cada sección es corta y fácil de entender. En

esta presentación se encuentran numerosos enlaces hacia otros sitios web que incluyen recursos

exhaustivos y de alta calidad para que puedas aprender más sobre cada elemento.

¡Esperamos que os guste!

18

Share

35

Like

Home About Services Our Work Clients Testimonials Blog WP Plugins

Resources Contact Blogging

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 2/13

01Diseño &

Contenido

Titular

Navegación

Contenido

Legibilidad

Web Fonts

Imágenes

Sellos de

confianza

Migas de pan

Videos

Pie de página

02Llamadas a la

acción

Llamada a la

acción

principal

Botones para

compartir de

las redes

sociales

Llamadas a la

acción

secundarias

Venta cruzada

& Up-selling

03Posicionamiento

interno

Arquitectura

del sitio web

Estructura de

la URL

Etiqueta « Title

»

Etiqueta «

Meta

Description »

Etiquetas «

Header »

Enlaces

contextuales

Atributo « Alt »

Alojamiento de

videos & Mapa

del sitio

Mapa del sitio

04Marcado

Authorship

markup

Schema.org

Migas de pan «

Markup »

Atributo «

Rel=canonical

»

Protocolo

Open Graph

05Código

Tiempos de

carga

Compresión de

imágenes

Responsive

design

HTML5

CSS3

04 / Marcado

Marcar tus datos permite proporcionar

informaciones adicionales a los

buscadores para que entiendan mejor

el sentido de tú contenido. El uso del

marcado (en inglés “markup”) puede

ayudarte en obtener « rich snippets »

en las páginas de resultados. Estos

últimos a menudo incrementan la tasa

de clics (CTR). Cuando has añadido el

marcado a tú página, puedes

comprobar la forma con la cual Google

va a interpretarlo con su herramienta

test de datos estructurados..

1 – Marcado Authorship

01 / Diseño & Contenido

02 / Llamadas a la acción

03 / Posicionamiento interno

04 / Marcado

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 3/13

El marcado Authorship se puede

incorporar a tú sitio web o a tú blog al

utilizar la etiqueta « rel=author » así

como un enlace hacia tú propio perfil

Google+.

El marcado Authorship es uno de los

microformatos más interesantes que se

ha sido desarrollado éstos últimos

años. En primer lugar, te permite

obtener un « rich snippet » para los

autores en las páginas de resultados

de Google (incorpora la fotografía así

como el nombre del autor a los

resultados) lo que es muy eficaz para

incrementar la tasa de clics. En

segundo lugar, te permite certificar que

eres el autor del contenido lo que

resulta muy pertinente más adelante y

sobre todo cuando el authorank sea

realidad.

Google+ representa la red social

creada por Google pero además se

dedica en convertirse en su programa

de identidad. Su sistema de

comprobación de identidad permite a

Google atribuir la autoría de un

contenido a su propio autor para que

éste pueda utilizar señales externas

tales como enlaces, shares y el botón

de Google+ (+1). De esta forma,

Google puede elaborar un perfil para

cada autor y atribuirle un nivel de

05 / Código

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 4/13

autoridad relativo a un tema específico.

Los usuarios que se benefician de una

alta autoridad pueden luego tener

impacto en los resultados de las

búsquedas a través de su contenido,

sus enlaces y sus aportaciones

sociales.

Otros recursos recomendados:

Google Authorship Markup: How

to Get Your Picture in Search

Results de Andy Crestodina

What is AuthorRank? de AJ Kohn

Author Rank: Facts & Fiction with

Mark Traphagen de Max Minzer

2 – Schema.org

« Schema.org » es un proyecto lanzado

conjuntamente por los buscadores que

tiene un objetivo muy claro: hacer la

web más semántica o más

precisamente organizar la información

a través de un grupo común de

esquemas facilitando un marco para

estructurar el marcado en la web. Estos

esquemas pueden utilizarse con

Microdata para describir los tipos de

datos que están en tú página web lo

que permite a los buscadores entender

mejor el tema de tú contenido así como

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 5/13

su estructura.

El uso del « Schema.org » puede

aportar beneficios importantes ahora y

también en el futuro (los datos

estructurados no son más que un

medio para dar a conocer el desarrollo

de la web semántica). Por ejemplo, te

permite seleccionar un producto y leer

luego un conjunto de comentarios sobre

este producto. Cada comentario viene

con una puntuación y aparece también

estrellitas de votaciones que

representan la puntuación media de

todos los comentarios. Esta

información se puede encontrar en las

páginas de resultados de los

buscadores bajo la forma de un rich

snippet de opiniones:

De la misma forma, puedes marcar tú

contenido video para generar un « rich

snippet » video:

La mayoría de los contenidos son

susceptibles de facilitarte un « rich

snippet » porque existen un montón de

datos que puedes marcar. Por ejemplo,

es posible marcar las películas con el

fin de facilitar informaciones relativas al

realizador y a los actores; recetas para

agregar informaciones nutricionales;

autores para que aparezcan nombres

de oficios o también para incluir datos

geográficos. El marcado « schema.org

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 6/13

» puede ayudarte a elevar tú posición

en los SERPs y darte así una ventaja

competitiva importante.

Otros recursos recomendados:

Micro Data & Schema.org: Guide

to Generating Rich Snippets de

Daniel Butler

An SEO’s Guide to Schema.org

de Courtney Seiter

How to Use Schema.org Markup

for Your Videos de Dean

Marsden

3 – Migas de pan (marcado)

A los buscadores le gusta la

incorporación de las migas de pan de

la navegación de tú sitio web porque

constituye una ventaja para los usuarios

por eso fomentan su uso con los « rich

snippets » en los SERPs. En efecto, las

migas de pan no sólo esclarecen el

sitio web, sino que permiten también

incorporar enlaces adicionales (en los

que se puede hacer clic) hacia otras

páginas de tú sitio web.

En esta ilustración, se nota que

además del enlace principal del

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 7/13

resultado, Tripadvisor tiene dos

enlaces adicionales en los que el

internauta puede hacer clic. Con el fin

de integrar el marcado de las migas de

pan puedes utilizar el vocabulario del «

schema.org », o simplemente testear el

generador de código (fácil de usar) de

Patrick Sexton cuyo enlace está abajo.

Otros recursos recomendados:

Rich Snippet Breadcrumb Code

Generator de Patrick Sexton

Beyond Rich Snippets: Semantic

Web Technologies for Better

SEO d’ Aaron Bradley

4 – Atributo « Rel=canonical»

Cuando se quiere respectar las buenas

prácticas del posicionamiento

orgánico, hace falta evitar la

duplicación de contenido. Sin embargo,

a veces la duplicación resulta inevitable

como por ejemplo cuando se quiere

clasificar su contenido de distintas

formas. En este caso, se utiliza la

etiqueta « rel=canonical » para

diferenciar los contenidos duplicados.

Esta etiqueta da una autoridad a una

de las versiones en particular.

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 8/13

Entre el conjunto de las páginas con

contenidos duplicados, es posible

determinar qué página tiene que ser la

versión canónica al utilizar el atributo «

rel=canonical ». Con este atributo, tú

dices a Google que prefieres esta

página para que el buscador sólo

indexe y publica la versión canónica.

El marcado es facilísimo, basta con

añadir una etiqueta en la sección de

todas las páginas no canónicas. Para

resumir, en una página no titular como

http://www.example.com/electronics/samsung-

tv, indicas la versión canónica de la

forma siguiente:

<link rel="canonical" href="http://www.example.com/samsung/samsung-tv"/>

Las plataformas CMS a menudo

generan problemas de duplicación

porque crean categorías con

contenidos muy parecidos. Sin

embargo, los sistemas más modernos

te permiten especificar las URL

canónicas directamente al final.

Otros recursos recomendados:

Canonicalization – SEO Best

Practices de SEOmoz

5 Common Mistakes With

rel=canonical de Allan Scott

A Beginner’s Explanation to Rel

Canonical Tags de Luke

Summerfield

5 – Protocolo Open Graph

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 9/13

Aunque no tiene realmente un impacto

en el posicionamiento orgánico, el

protocolo Open Graph (que es al origen

una iniciativa lanzada por Facebook) te

permite controlar el diseño de tú

contenido cuando se comparte en las

redes sociales.

Al igual que utilizas las etiquetas «

META » para decir a los buscadores

qué título y qué descripción tienen que

publicar, puedes utilizar las etiquetas «

Open Graph » para informar Facebook,

Google+ y Twitter de la manera con la

cual tienen que publicar tú contenido

cuando los usuarios lo comparten.

Estas etiquetas te permiten de dar

informaciones muy precisas tales como

el título, la descripción y la imagen (una

viñeta personalizada por ejemplo).

También puedes añadir informaciones

personales como tú región, tus datos

de contactos o página de tú sitio web.

Las « Twitter cards » te permiten poner

en luz los tweets largos que Twitter crea

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 10/13

Comments

posicionamiento de páginas web says:

October 9, 2013 at 5:02 am

Enlaces web SEO para mejorar el posicionamiento de páginas web

puede encontrar en PosicionamientodeUnaWeb.com desde 49,90€.

Reply

Leave a comment

Name *

Email *

« Sección precedente: 03 /

Posicionamiento interno

Sección siguiente: 05 / Código »

para tú sitio cuando un usuario

comparte el enlace de una de tus

páginas web. Las « Twitter cards » son

simplemente un grupo de etiquetas

“meta” cuyo objetivo consiste en definir

el reparto de datos, pero muchas de

estas etiquetas se refieran en realidad

a los datos del Open Graph.

Otros recursos recomendados:

Rock Your SEO with Structured

Social Sharing de Dana

Lookadoo

Twitter Cards in Action de Joost

de Valk

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 11/13

Website

six + = 9

Post Comment

Notify me of follow-up comments via e-mail

James

Agate

Managing

Director

Skyrocket

SEO

Chris and his team are

patient, responsive and

have a sense of humour

even when I asked them to

change something that I'd

insisted upon initially.

Would definitely

recommend to anyone

looking for an awesome

WordPress development

and design team.

Richard

Sedley

Director

Seren

Hit Reach were really easy

to deal with and provide

exemplary service. They

implemented exactly what

we wanted and guided us

when we were uncertain

about the solution. A highly

professional and cost

effective solution – what's

not to love.

Roger

Green

Director

Best4tyres.com

Hit Reach got it absolutely

right. They embraced the

challenge and complexity

of the site, and exceeded

expectation with quick

response times and great

service.

What Our Clients Say

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 12/13

The Porn Viewing

Habits of Scots

January 8, 2014 by

Chris Dyson

Pornhub the worlds largest

porn site and one of the

top 100 most trafficed

sites in the world have

released data insights on

their UK audience. As we

like …

Read more

Optimise This with

Mat Bennett of OKO

Digital

December 20, 2013 by

Patrick Hathaway

In our latest episode

of Optimise This I was

joined by Mat Bennett from

OKO Digital talking about

their recent rebranding

and the new Google

Adsense …

Read more

Interview with John-

Henry Scherck from

SEO Gadget

November 30, 2013 by

Chris Dyson

For this Blogvember

feature, I had the pleasure

of interviewing John-Henry

Scherck from SEO

Gadget about free tools,

scraping and much

more.The answers …

Read more

Recent Blog Posts

Let’s Talk

Want to chat about your project

or requirements? If you call now

you can talk to me directly:

Call +44 (0) 808 22 444 22

and ask for Chris

Email: chris.gilchrist@hitreach.co.uk

Drop in: Hit Reach, Unit 16c, City Quay,

Camperdown St,

Dundee, DD1 3JA, United Kingdom

We build high quality, cost effective& SEO friendly websites that youcan easily update & manage

Unlike other web design companies who just

build you a site, we strive to understand your

core challenges first and then our team of

web designers work passionately with you to

develop tools that help you deliver real

business solutions.

Learn more about us

18/1/2014 Anatomía de la Página web Perfecta - Hit Reach

http://www.hitreach.co.uk/perfect-web-page/anatomia-de-la-pagina-web-perfecta/#t4_ 13/13

Connect with us:

Copyright © 2013 Hit Reach

COMPANY

About Us

Core Values

Meet the Team

Available

Positions

Giving Back

Contact Us

SERVICES

Website Design

Website Reviews

Search Engine

Optimisation

SEO Training

White Label

Agreements

BITS &PIECES

Our Work

Clients

Testimonials

Blog

WordPress

Plugins

Resources

Link Club

Blogging

WEBSITE

Terms &

Conditions

Privacy Policy

Disclaimer