Google에서 자바 스크립트를 실행하는 링크를 이해하도록하려면 어떻게해야하나요?

랩 가사를 사람들이 이해할 수 있도록 웹 사이트를 개발 중입니다. 사용자는 랩 노래의 가사를보고 설명을 보려면 특정 가사를 클릭 할 수 있습니다 :Google에서 자바 스크립트를 실행하는 링크를 이해하도록하려면 어떻게해야하나요?

alt text (click here for more)

당신이 볼 수 있듯이, 각각의 설명은 (이 경우 http://RapExegesis.com/2636 단위) 고유 주소가 있습니다. 다음은 브라우저에서 이러한 영구 링크 중 하나를 방문 할 때 발생하는 상황 :

앱이 정확한 노래와 아티스트를 검색하고 (이 경우 http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636에) http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633로 리디렉션
때 노래 페이지가로드의 응용 프로그램 검사는 URL 조각에 "노트 - \ d 개 +"거기 여부를 확인하기 위해
이 있다면, 그것은 자동으로 올바른 설명하고,보기에 스크롤을 열

이상적으로 구글과 다른 검색 엔진에 연결할 것 이 퍼멀 리 nks와 그에 상응하는 설명. 구글은 자바 스크립트를 이해하지 않기 때문에,이 두 개의 URL은 정확히 같은 모양 :

그러므로, http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind가 구글에 http://RapExegesis.com/2636 정확히 같은 모양을 잘.

분명히 이상적인 것은 아닙니다. 이견있는 사람? "부엌에서 :을 의미 과자를

을 채찍질 시몬스 같은 부엌에서 나를 잡아 :

가사 같은 - 이상적으로는 검색 엔진에 다른 http://RapExegesis.com/2636의 버전을 표시하고 싶습니다 "
는
바네사와 안젤라 시몬스, Run-DMC의 목사 실행의 이십 딸은 0,123,574,061,197을 실행 균열까지 요리를 말한다 (참조, here, here, 그리고 here), 의류와 신발 브랜드

편집 : 내가 원래 질문은 조금 혼란이었다 제기하는 방법. 다음과 같은 두 가지 문제가 있습니다.

노래 페이지에 대한 설명 링크는 어떻게 작동합니까?

독립 실행 형 설명에 해당하는 URL은 어떻게 작동합니까?

좀 더 명확한 것을 확인해야이 그림 (full size here) :

을 당신은 실제로 콘텐츠를 별도의 페이지로 이동 자바 스크립트의 동작을 변경하려면 링크를 변경할 수

출처

2009-11-27 Tom Lehman

상당 중복 : http://stackoverflow.com/questions/1518027/can-pages-that-make-heavy-use-of-ajax-also-be-search-engine-friendly/ – mauris

이유에 대해 궁금한 점이 있습니까? 당신은 그런 식으로 permalink를 만듭니다 (예를 들어'/ 2636')? 그렇게되면 영구적 인 리디렉션이됩니다. 그것은 단지 URL을 간결하게하기위한 것일까 요? 그렇지 않으면 왜 퍼머 링크를 http : // rapexegesis.com/가사/Jay-z/Empire-state-of-mind # 2636으로 완벽하게 만들지 않았습니까? –

"단순한 URL인가요?" - 예, 간결하게하기 위해서입니다. (이게 나쁜가요?) –

다음은 이전 웹 사이트에 대한 생각과 설명/다이어그램을 기반으로 한 좋은 해결책입니다.

두 가지 핵심 개념은 ... 기억하고 나머지는 모든 세부 사항이다 :

는 일반 사용자를 표시하지 않는 구글의 물건을 표시하지 않습니다. 여기서 까다로운 일을하면 큰 문제가 발생할 수 있으며 어쨌든 반드시 필요한 것은 아닙니다.
사용 Progressive Enhancement이 이렇게 할 수

더 나은 경험을 자바 스크립트 사용자가 제공하는 ...

가사 페이지에서

,이 같은 각각의 설명에 영구 링크를 만들 : (?)

<a href="/lyrics/ARTIST/SONG?note=NOTEID" onclick="showPopUpExplanation(NOTEID);">lyric snippet here</a>

공지 사항 우리는 대신 해시 (#)의 쿼리 스트링을 사용하여 얼마나 그래서 구글 (그리고 JS 사용 중지 된 사용자)는이 URL을 실제의 고유 한 퍼머 링크 URL로 취급합니다.

이제 인 페이지 팝업이 작동하도록하기 위해, 점진적 개선을 사용하고 (@Dean suggested 위 또는 같은과 같이) 모든 .explanation-link 링크 onclick 처리기를 추가합니다.

JavaScript 사용자의 경우에서 # (해시) 링크를 사용할 필요가 없습니다. 이 기능은 브라우저의 뒤로 버튼이 AJAX에서 작동하도록 허용 할 때만 필요하지만 인 페이지 팝업 (아마도 "닫기"버튼)을 표시하고 있기 때문에 이는 필요하지 않습니다.

친구들과 구체적인 설명을 공유하려는 사용자는 짧은 URL (/NOTEID)을 사용합니다. 이 단축 URL은 실제 퍼가기에 대한 리디렉션이어야합니다 (검색 엔진이 두 URL의 색인을 생성하지 않도록).

마지막으로 permalink가 작동하도록하려면 작은 서버 측 스크립팅을 사용하여 해당 페이지를 방문하면 즉시 팝업이 표시됩니다 (). 같은 것을 할 :

<?php if (isset($_GET['note'])): ?> 
    <!-- place above the song lyrics; use CSS to style nicely for non-JS --> 
    <div id="explanation"> 
     <?php printExplanation((int)$_GET['note']); ?> 
    </div> 

    <script type="text/javascript"> 
     $('#explanation').hide(); // hide HTML explanation for JS users 
     showPopUpExplanationFromDiv($('#explanation')); 
    </script> 
<?php endif; ?>

여기서 중요한 부분은 당신이 오히려 구글과 비 JS 사용자가 볼 수 있도록 자바 스크립트/JSON보다, HTML에 설명을 인쇄,하지만 점진적으로 향상시킬 것입니다 JS 사용자 용.

출처

2009-12-05 19:05:55 philfreo

네 말이 맞아, 필, 이거 훌륭한 해결책이야. 나는 OP가 구글이 사람들이 그 문구를 검색 할 때 페이지 요약에 그의 가사 노트 만 * 보길 원했다는 사실에 집착했다. 당신을 투표했습니다. – richardtallent

나는이 문제를 피하는 것을 정말로 싫어합니다. 심지어 모든 문제에 대한 제 1의 해결책이기도합니다. 왜? 해시 추적은 멋지다! Google은이를 수행하므로 제대로 크롤링해야합니다. 대화 형 앱이 뒤로 버튼과 북마크를 작동시키는 방식입니다. – ironfroggy

그러나이 경우 해시 추적은 의미가 없습니다. 왜냐하면 사용자가 뒤로 버튼이 팝업을 없애기를 기대하지 않기 때문입니다 (오히려 닫기 버튼이 필요함). 페이지의 내용을 완전히 변경 한 Ajax 탐색이 있었다면 기대할 수 있었고, Google이 해시 태그/Ajax에 대한 지원을 제공하는 것은 오랫동안 믿고 있습니다.하지만 지금은 여기에 의존하지 않습니다. 필요 없음). – philfreo

해당 링크의 기본 동작을 무효화하고 (false 반환) 현재와 같은 방식으로로드합니다. 이처럼

하십시오 REST URL을 사용하지 왜

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    $('.javascript-link').click(function(){ 
      alert('usual behavior'); 
      return false; 
     }); 
}); 
</script> 
</head> 
<body> 

<a class="javascript-link" href="somewhere.html">click me</a> 

</body> 
</html>

출처

2009-11-27 03:20:39

페이지 내 링크 또는 퍼머 링크를 언급하고 있습니까? –

페이지의 링크와 퍼머 링크가 생성하는 링크. –

노래 페이지의 링크에는 의미가 있지만 누군가/Google이 http://RapExegesis.com/2636을 방문하면 어떻게 될까요? –

하고 있으며,이 사이트에 사용되는 것과 유사한 (주소 표시 줄에 보면). 그렇게하면 각 링크가 다르며 올바른 위치로 이동하게됩니다. 서버가 URL을 처리 할 수 있기 때문에 자바 스크립트가 사용 중지 된 경우에도 작동합니다.

javascript가 작동하면 페이지를 새로 고치지 않고도 모든 작업을 수행 할 수 있지만 Google 스파이더가 javascript를 실행하지 않는 기본 정보를 포함합니다.

출처

2009-11-27 03:24:40

새로운 일을하는 방법과 모든 이점을 무시해서는 안됩니다. 게다가 그는 실제로 페이지와 상호 작용할 때 자바 스크립트에서 동일한 동작을 구현해야하므로 해당 상태에서 정적으로 가져 오는 것은 다른 언어로 두 번 구현하는 것을 의미합니다. 그것은 나쁜 처방이다. – ironfroggy

@ironfroggy - JavaScript를 사용하거나 사용하지 않고 페이지를 잘 디자인하면 서버에서 한 번, 자바 스크립트에서 한 번 두 번 구현되지만 다른 옵션은 자바 스크립트를 사용할 수없는 경우 작동하지 않는 것입니다. 많은 사이트가 좋지 않습니다. 이상적으로 컨트롤러 로직은 한 번만 구현되어야하지만, 한 번은 ajax 호출로 도착하는 두 가지 방법이있을 수 있으며 다른 하나는 javascript에 의해 수정되지 않은 URL로 직접 이동하여 정보를 얻을 수 있습니다. –

#을 사용하지 마십시오. 쿼리 문자열을 사용하십시오.

그래서, 대신 http://rapexegesis.com/lyrics/ARTIST/SONG#note-2633, 당신은 다른 바로되지 않습니다 # 특별히 뭔가를 사용하여 같은 페이지의 일부가 될하기위한 것입니다 http://rapexegesis.com/lyrics/ARTIST/SONG?note=2633

을 것입니다. 귀하의 질문에서 이해하는 바와 같이 이것은 당신이 원하는 것을 성취 할 것입니다.

출처

2009-11-30 22:50:15 eglasius

해쉬 기호'# '는 같은 페이지에있는 앵커''를 참조합니다. –

-1

좋아

때문에 상황은, 내가 그것을 이해, 각각의 고유 주소에 대한 것입니다 :

구글은 문제의 특정 가사에 해당하는 정적 HTML을받을 필요가있다.
사용자가 가사를 강조 표시하여 전체 노래를 볼 필요가 있습니다.

하나의 해결책 : 서버에서 browser-sniff. Google에 스 니펫을 보내고 사용자에게 전체 페이지를 보냅니다. ASP.NET을 사용하면 Server.Transfer를 사용하여 실제로 브라우저에서 리디렉션하지 않고 AJAX없이 사용자를 "리디렉션"할 수 있습니다.

<%@ Page Language="C#" %> 
<script runat="server"> 
    private void Page_Load(object sender, System.EventArgs e) { 
    if(!Request.Browser.Crawler) { 
     // look up the realUrl for the entire song 
     Server.Transfer(realUrl); 
     } 
    } 
</script> 
snippet for the specific lyric goes here and Google sees it, but users won't.

출처

2009-11-30 23:09:57 richardtallent

질문 : 1) Google의 규칙에 위배됩니까? 2) 설명 페이지 (Google에서는 의미가 없지만 다른 사용자는 리디렉션 됨)에서 JS로 window.location을 설정하는 것보다이 방법이 더 낫습니다. –

Google 웹 마스터 가이드 라인을 살펴보면 매우 의심 스럽습니다. 안전을 위해 내 솔루션 라인을 따라 뭔가를 권하고 싶습니다. – philfreo

당신은 단지 두 가지가 사용할 수 있도록해야합니다 베어 뼈 HTML에서

당신의 연결 http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind/note-2636처럼 그들에의 clinking 것은 그냥 순수 HTML의 툴팁이 표시됩니다 다른 페이지로 이동하게
때 JS가 활성화되면 일부 js 코드는 모든 링크를 스캔하여 http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636으로 바꿉니다.

이 방법을 사용하면 코드가 더 쉽게 액세스 할 수 있습니다 (눈먼 사람도 음악을 좋아하고 웹 사이트를 읽을 수 있습니다). Google은 가장 유명한 시각 장애인 웹 사용자이기 때문에이를 이해할 것입니다.

출처

2009-12-05 19:31:50

하지만 Javascript를 사용하는 사람이 http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind/note-2636으로 이동하면 어떻게됩니까? 어떻게 그를 http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636으로 리디렉션합니까? (나는 자바 스크립트 기반의 window.location 리디렉션을 사용할 수 있습니다.) –

활성화 된 자바 스크립트를 사용하는 사람은 # 2636으로 자바 스크립트로 변환되므로/노트 2636에 갈 이유가 없습니다. –

Bit.ly Url Shortening service과 같은 URL 단축 서비스를 사용하십시오. (원하는 URL을 입력해야합니다.) 그러면 URL이 Google로 리디렉션됩니다. 나는 그것이 시험 될지 확신 할 수 없도록 시험하지 않았다.

편집 : 흠 ... Stackoverflow.com은 URL에서 #을 사용하여 Google에서 색인을 생성 할 수 있습니다. : D

출처

2009-12-05 20:58:22 alexy13

Google은이 작업을 수행하기 위해 javascript를 실행할 필요가 없으며/foo # bar 및/foo # baz를 동일한 경로로 취급하지 않아도됩니다. – ironfroggy

Google wants to do the right thing처럼 보입니다. 진실은, 나는 그들의 제안 된 솔루션이 정말로 싫다. 아직도, 그것은 느낌표로 시작하는 stateful 조각을 이해하고있는 것처럼 보이기 때문에, 그것들을 고유 한 것으로 취급해야합니다.

http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#note-2636

는

http://rapexegesis.com/lyrics/Jay-z/Empire-state-of-mind#!note-2636

가 나는 상태의이 종류를 관리 할 library을 유지하고 만약 그들이, 사실, 사실은 이미 거미에서 이것을 구현, 그때에 대한 지원을 추가 할 것입니다된다 , 나 자신.

출처

2009-12-06 14:44:38 ironfroggy

Google에서 자바 스크립트를 실행하는 링크를 이해하도록하려면 어떻게해야하나요?

답변

관련 문제