View
17
Download
3
Category
Preview:
Citation preview
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
Recommended