Website mobile-friendly –> solutii tehnice

Care sunt solutiile tehnice pentru ca un site sa fie accesat si vizualizat corect pe smartphone si indexat de Googlebot pentru mobile?

Este una dintre temele abordate de catre Matt Cutts, Google’s head of search spam, in prezentarile sale video. Avem la dispozitie 3 variante pentru solutionarea acestei probleme – indexarea, accesarea si vizualizarea corecta a unui website pe Web si pe Mobile:

  • 1. Site-ul sa aiba un design responsive: un astfel de site contine linii de cod Javascript si CSS care scaleaza site-ul, astfel incat paginile web sa se adapteze automat la rezolutia ecranului pe care este vizualizat. Este important ca aceste coduri Javascript si CSS sa nu fie blocate, pentru ca Google sa poata sa le citeasca si sa le interpreteze —> astfel va putea sa detectetze daca site-ul este sau nu responsive.
    .
  • 2. Realizarea de versiuni diferite pentru desktop si mobile pentru acelasi site, versiuni cu URL-uri diferite (proprii). In acest caz trebuie sa integram tag-ul rel=”alternate” pe versiunea de desktop a paginii web care sa duca la versiunea de mobile a acesteia.
    .
    <link href=”http://m.example.com/page-1″ rel=”alternate” media=”only screen and (max-width: 640px)” />Tot pentru aceasta situatie trebuie sa folosim tag-ul rel=”canonical” pe versiunea de mobile care sa duca la versiunea pentru desktop a site-ului. Astfel cele 2 site-uri (versiuni) individuale cu URL-uri diferite si continut identic, nu vor fi penalizate pentru continut duplicat.
    .
    <link rel=”canonical” href=”http://www.example.com/page-1″>  .
    La fel si pentru fisierul Sitemap.xml
    –> vom integra specificatii pentru ambele versiuni ale website-ului.

    <?xml version=”1.0″ encoding=”UTF-8″?>
    <urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
    xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
    <url>
    <loc>http://www.example.com/page-1/</loc>
    <xhtml:link
    rel=”alternate”
    media=”only screen and (max-width: 640px)”
    href=”http://m.example.com/page-1″ />
    </url>
    </urlset>

    3. Redirectarea celor ce acceseaza site-ul de pe smartphone de la versiunea de desktop catre cea pentru mobile. Redirectul este citit si interpretat corect daca Googlebot pentru mobile nu este blocat, la fel si codurile Javascript si CSS. Pentru acest caz se foloseste un cod Vary HTTP pentru header.
    .

Detalii si explicatii in sectiunea Google Building Smartphone – Optimized Websites https://developers.google.com/webmasters/mobile-sites/

Articole pe aceeasi tema:

  • Magazin online Responsive:
    http://www.dezvoltare-site-seo.ro/2014/03/magazin-online-responsive/
    .
  • Despre SEO si rezultatele in Web /vs/ Mobile:
    http://www.dezvoltare-site-seo.ro/2014/01/despre-seo-pe-web-vs-mobile/