Ajax otimizado para o google - Como implementar

wneo · Fevereiro 14, 2015

Boa tarde!!!

Tive problemas na utilização de Ajax com a interpretação do google..sendo assim venho tentando resolver a indexação das páginas e continuar com o ajax.

Estou tentando implementar a função do HTML5 window.history.pushState().

Olhem como tentei fazer:

- Criei um arquivo index.php

- Criei tres arquivos nomeados como pagina1.php, pagina2.php e pagina3.php (nessas páginas tem somente conteúdo de texto)

- Criei um arquivo nomeado ajax-html5.js

index.php

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>


<script src="ajax-html5.js"></script>

<title></title>

</head>

<body>

<div id="conteudo">

<div class="header">
<a href="pagina1">ir para pagina1</a>
<a href="pagina2">ir para pagina2</a>
<a href="pagina3">ir para pagina3</a>
</div><!-- /header-->

</div><!-- /conteudo-->

</body>

</html>

ajax-html5.js

// THIS IS WHERE THE MAGIC HAPPENS
		$(function() {
			$('.header a').click(function(e) {
				$("#loading").show();
				href = $(this).attr("href");
				
				loadContent(href);
				
				// HISTORY.PUSHSTATE
				history.pushState('', 'New URL: '+href, href);
				e.preventDefault();
				
				
			});
			
			// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
			window.onpopstate = function(event) {
				$("#loading").show();
				console.log("pathname: "+location.pathname);
				loadContent(location.pathname);
			};

		});
	
		function loadContent(url){
			// USES JQUERY TO LOAD THE CONTENT
			$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
					// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
					$.each(json, function(key, value){
						$(key).html(value);
					});
					$("#loading").hide();
				});
			
			// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
			$('li').removeClass('current');
			$('a[href="'+url+'"]').parent().addClass('current');
			
		}

- Dessa forma, quando clico nos links, é possivel observar q a url está mostrando o que informo no "nome de ancora dos links"... mas o conteúdo de das páginas1,2 e 3 não aparecem no documento...

O que faço para implementar corretamente???? alguem ajuda???

William Bruno · Fevereiro 14, 2015

A forma correta é: esqueça o ajax.

Implemente o site e faça funcionar sem. Com isso ele será "google friendly", depois q o conteúdo estiver aparecendo no código fonte do browser, quando vc acessa diretamente uma URL, ai sim vc implementa o ajax.

O processo tem q ser o inverso do que geralmente fazem.

-> Primeiro deixa funcionando

-> Depois põe o ajax em cima

E não: faz ajax, ai tenta fazer gambiarra para funcionar.

wneo · Fevereiro 14, 2015

Olá william, concordo com você, mas vamos lá:

-Se eu abrir a pagina direto na url funciona sem nenhum problema...

-To tentando implementar o ajax com essa relação ao google..

-O método que mencionei acima tá citado em um ebook do books.google https://books.google.com.br/books?

id=cDyCDdQ7ISMC&pg=PA81&lpg=PA81&dq=como+usar+window.history.pushState+%28dados,+t%C3%ADtulo,+UR

L%29&source=bl&ots=AhjGpQnoni&sig=95su1oqFkMh_2KVSmjGNjoZnsEI&hl=pt-

BR&sa=X&ei=TV7fVJLbLezjsATP5ICIAw&ved=0CCsQ6AEwAg#v=onepage&q=como%20usar%20window.history.pushState%20(dados%2C%20t%C3%ADtulo%2C%20URL)&f=false

-Meu obejtivo está na otimização da busca baseada em um site com Ajax..tendo em vista que o método window.history.pushState() parece o que tem maior probabilidade.

-Gostaria de uma ajuda para implementá-lo, com base na tentativa q já mencionei no primeiro post..acho mto justo a utilização do msmo, e coerente partirmos desse principio...

William Bruno · Fevereiro 14, 2015

O google não lê ajax e não processa javascript.

Simples assim.

Então tudo o que vc fizer com ajax e pushState, popState, não vai ser pro google.

Pense dessa forma.

wneo · Fevereiro 14, 2015

O google não lê ajax e não processa javascript.

Simples assim.

Então tudo o que você fizer com ajax e pushState, popState, não vai ser pro google.

Pense dessa forma.

William, tenho profunda admiração pelo seu entendimento front end...mas dá uma olhada na api history do html5 e no ebook q passei o link..inclusive no código q postei no primeiro post, tenho certeza com o seu entendimento, poderá compreender o que fazer nesse caso, e passo tbm a questão a todos q estiverem lendo...

Então a implementação do window.history.pushState() para o ajax vem justamente como alternativa para que o os olhos do google sejam mais abertos ao buscar o conteudo de um site com ajax...

- Preciso de uma ajuda para implementar o método...agradecido

William Bruno · Fevereiro 14, 2015

Não é para o google cara.. é para o usuário.

Dá um cURL no site e vc vai ver q o robô não vai conseguir resgatar nada, se vc só se basear em pushState().

Posso te ajudar a implementar, mas não vai resolver seu problema de indexação.

wneo · Fevereiro 14, 2015

Não é para o google cara.. é para o usuário.

Dá um cURL no site e você vai ver q o robô não vai conseguir resgatar nada, se você só se basear em pushState().

Posso te ajudar a implementar, mas não vai resolver seu problema de indexação.

Hmm certo,

Na abertura do tópico não mostrei mto claramente o q ja fiz ate então... mas o q me levou a essa tentativa foi o seguinte:

- O site com ajax fica entendido pelo google como se estivessemos sempre na index...dados q podemos analisar tbm pelo analytics e vendo o proprio o codigo fonte...dessa forma a queda no resultado organico de busca é iminente..tendo em vista q a index nesse caso se torna um receptaculo das outras páginas que são onde verdadeiramente estão todo o conteúdo...

- Sendo assim, busquei um metodo para resolver isso..e percebi no window.history.pushState() a solução... quero ver agora na prática se realmente será satisfatório...

- Alguns fatores indicam q sim, essa é uma boa opção..porq por exemplo: a url fica sem as "#" entre os links...

Então, com base nisso, creio q pude explicar melhor o caso agora... oq me diz?

-

William Bruno · Fevereiro 14, 2015

Se quando você acessar uma URL individual, o conteúdo aparecer no Código Fonte do browser, ai sim, e somente ai sim, o google vai ler.

Tirando isso, não irá.

Se você quer confirmar o que eu tô dizendo, abra o teu WebmasterTools, vá em:

Rastreamento -> Buscar como o google

Mesmo que a URL não esteja já indexada, o google vai te mostrar como ele te vê.

wneo · Fevereiro 14, 2015

Se quando você acessar uma URL individual, o conteúdo aparecer no Código Fonte do browser, ai sim, e somente ai sim, o google vai ler.

Tirando isso, não irá.

Se você quer confirmar o que eu tô dizendo, abra o teu WebmasterTools, vá em:

Rastreamento -> Buscar como o google

Mesmo que a URL não esteja já indexada, o google vai te mostrar como ele te vê.

A url individualmente não é o problema, isso tá funcionando..se eu abrir a página pela url o conteudo aparece tranquilamente..

William Bruno · Fevereiro 14, 2015

Okay, podemos prosseguir. Agora vc concorda que o importante é o conteúdo aparecer no código fonte e não o pushState em si ?

Ele foi feito para o usuário, e não para o google.

Como está o seu:

content.php ?

Quando vc acessa no browser:

content.php?cid=pagina1&format=json

aparece um JSON certinho ?

wneo · Fevereiro 14, 2015

Sim, concordo que o conteudo deve estar disponivel ao usuario atraves do fonte como importancia máxima.

Quanto ao content.php, ai ja começa minha dificuldade de implementação... Eu tenho uma index, e 3 arquivos :pagina1.php,pagina2.php e pagina3.php com seus respectivos conteudos... o que deve ter no content.php ?

William Bruno · Fevereiro 14, 2015

o content.php deveria em teste parsear os arquivos pagina1.php, pagina2.php .. e devolver um JSON.

Separando o conteúdo, do título e tudo mais.

Não é necessário, é possível fazer de diversas outras formas. Depende realmente do que vc vai ter.

Será um site estático ? terá banco de dados ?

wneo · Fevereiro 14, 2015

o content.php deveria em teste parsear os arquivos pagina1.php, pagina2.php .. e devolver um JSON.

Separando o conteúdo, do título e tudo mais.

Não é necessário, é possível fazer de diversas outras formas. Depende realmente do que você vai ter.

Será um site estático ? terá banco de dados ?

Com banco de dados... mas podemos fazer um teste com texto estático...

no resultado final eu gostaria q ficasse na index, apenas o header e o footer, e apenas a area central do site trocar seu conteudo de acordo com a pagina externa...

wneo · Fevereiro 14, 2015

Consegui fazer assim:

home.php

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="global.css" />
    </head>

    <body>
        <h1>Home</h1>

        <ul>
            <li><a href="home.php" data-role="ajax">Home</a></li>
            <li><a href="page1.php" data-role="ajax">Page 1</a></li>
            <li><a href="page2.php" data-role=
"ajax">Page 2</a></li>
        </ul>


        <div id="content-host" class="fragment">
            <h2>Home Page Content</h2>
            <p>This is the home page of the application</p>
        </div>


        <script src="//www.modernizr.com/downloads/modernizr-
latest.js" type ="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

page1.php

<!doctype html>
<html>
    <head>
        <title>Page Two</title>
        <link rel="stylesheet" href="global.css" />
    </head>
    <body>
        <h1>Page um</h1>
        <ul>
            <li><a href="home.php" data-role="ajax">Home</a></li>
            <li><a href="page1.php" data-role=
"ajax">Page 1</a></li>
            <li><a href="page2.php" data-role=
"ajax">Page 2</a></li>
        </ul>
        <div id="content-host" class="fragment">
            <h2>Page um Content</h2>
            <p>This is page one.</p>
        </div>
        <script src="//www.modernizr.com/downloads/modernizr-
latest.js" type ="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

page2.php

<!doctype html>
<html>
    <head>
        <title>Page Two</title>
        <link rel="stylesheet" href="global.css" />
    </head>
    <body>
        <h1>Page Two</h1>
        <ul>
            <li><a href="home.php" data-role="ajax">Home</a></li>
            <li><a href="page1.php" data-role=
"ajax">Page 1</a></li>
            <li><a href="page2.php" data-role=
"ajax">Page 2</a></li>
        </ul>
        <div id="content-host" class="fragment">
            <h2>Page Two Content</h2>
            <p>This is page two.</p>
        </div>
        <script src="//www.modernizr.com/downloads/modernizr-
latest.js" type ="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

script de carregamento assincrono:

$(function () {
 
    function getPageName() {
        var
            pathName = window.location.pathname,
            pageName = "";
 
        if (pathName.indexOf("/") != -1) {
            pageName = pathName.split("/").pop();
        } else {
            pageName = pathName;
        }
 
        return pageName;
    }
 
    function navigateToPage() {
 
        var pageName = getPageName();
 
        $.get(pageName, function (response) {
 
            var
            // Wrap the resulting HTML string with a parent node
            // so jQuery can properly select against it.
                markup = $("<div>" + response + "</div>"),
 
            // Extract the fragment out of the markup.
                fragment = markup.find(".fragment").html();
 
            $("#content-host").html(fragment);
        });
    }
 
    $("a[data-role='ajax']").click(function (e) {
        if (Modernizr.history) {
            e.preventDefault();
            var pageName = $(this).attr("href");
            window.history.pushState(null, "", pageName);
            navigateToPage();
        }
    });
 
    // Chrome & Safari (WebKit browsers) raise the popstate
    // event when the page loads. All other browsers only
    // raise this event when the forward or back buttons are
    // clicked. Therefore, the '_popStateEventCount'
    // (in conjunction with '$.browser.webkit') allows the page
    // to skip running the contents of popstate event handler
    // during page load so the content is not loaded twice in
    // WebKit browsers.
    var _popStateEventCount = 0;
 
    // This event only fires in browsers that implement
    // the HTML5 History APIs.
    //
    // IMPORTANT: The use of single quotes here is required
    // for full browser support.
    //
    // Ex: Safari will not fire the event
    // if you use: $(window).on("popstate"
    $(window).on('popstate', function (e) {
 
        this._popStateEventCount++;
 
        if ($.browser.webkit && this._popStateEventCount == 1) {
            return;
        }
 
        // The 'e.originalEvent.state' property gives
        // you access to the state argument passed into
        // the 'pushState' function, but browser support
        // is inconsistent (Safari). Normally you might
        // pass in the destination page name using the
        // state object to the event arguments here, but
        // since support is unreliable, this demo
        // extracts the current page from the
        // 'window.location' value.
 
        navigateToPage();
    });
 
});

Dessa forma o carregamento com ajax está operante e ainda o conteudo aparece no fonte de cada página..=)

Só faltou uma coisinha, sabe como implementar nesse script um gif de carregamento entre uma pagina e outra??

William Bruno · Fevereiro 14, 2015

Sim, veja:

    function navigateToPage() {
        //insere o gif
        var pageName = getPageName();
 
        $.get(pageName, function (response) {
            //remove o gif

wneo · Fevereiro 14, 2015

Sim, veja:

    function navigateToPage() {
        //insere o gif
        var pageName = getPageName();
 
        $.get(pageName, function (response) {
            //remove o gif

E teria q adicionar um delay neh?

ficaria tipo:

 function navigateToPage() {
        
//insere o gif
content.html( '<img src="ico-loading.gif" />' );


$.ajax({
url: href,
success: function( response ){
content.delay(1000).hide().html( response ).fadeIn();

        var pageName = getPageName();
 
        $.get(pageName, function (response) {
            //remove o gif

quase ne? hshs..e no remove gif não tenho ideia...

William Bruno · Fevereiro 14, 2015

o .html() já deu conta de remover o gif.

Deu certo com esse código ? como ficou ?

wneo · Fevereiro 14, 2015

o .html() já deu conta de remover o gif.

Deu certo com esse código ? como ficou ?

assim não deu não~~,, o caregamento ficou por parte do http quando adicionei auqelas linhas..~~

William Bruno · Fevereiro 14, 2015

O que apareceu no console de erros js ?

Ctrl + Shift + J no Firefox ou Chrome.

wneo · Fevereiro 15, 2015

O que apareceu no console de erros js ?

Ctrl + Shift + J no Firefox ou Chrome.

Oi,

tipo, parece q simplesmente o ajax parou de funcionar mas a navegação ficou normal com requisição pelo http dando refresh... vou colocar de novo e ver o q diz no console...

Arquivado

Ajax otimizado para o google - Como implementar

Recommended Posts

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5