콘텐츠로드를 기다려야하는 동적 페이지에서 JSON-LD를 사용하여 구조화 된 데이터를 추가하려면 어떻게해야하나요?

AlexBalo

웹 사이트를 개발 중이며 상세 페이지에 구조화 된 데이터를 추가하고 싶습니다. 문제는 JSON-LD 스크립트에 추가 할 내용을 알기 전에 데이터를 요청해야한다는 것입니다.

Parse를 백엔드로 사용하고 있습니다. 또한이를 달성하는 방법에 대한 자습서를 찾아 보려고했지만 JSON-LD를 동적으로 추가하는 것은 불가능한 것 같습니다.

나는 누군가가 나를 도울 수 있기를 정말로 바랍니다! :)

편집하다:

JSON-LD에 넣어야하는 데이터에 대한 응답은 DOM이 준비된 후에 나옵니다. 이 상황에서 패턴은 무엇입니까?

항목 목록이 있고 그중 하나를 클릭하면 먼저로드해야하는 세부 정보 페이지를 열어야하지만 콘텐츠가로드 된 후 JSON-LD를 통해 구조화 된 데이터를 제공하고 싶습니다.

저는 처음에이 문제를 해결하는 데 어려움을 겪고 있습니다.

편집 2 :

이것은 내 실제 구현입니다.

HTML에서 :

<body>
    // my html page code
    ...
    <script type="text/javascript">
        loadDetailPageContent();
    </script>
</body>

JS에서 :

function loadDetailPageContent() {
    // Calling the method here is too early because I don't have info
    //writeData();
    createDetailPage();
}

function createDetailPage() {
    var recipe = Parse.Object.extend("Recipe");
    var query = new Parse.Query(recipe);
    query.equalTo("objectId", myId);
    query.first({
        success: function(result) {
            // Calling the method here would be perfect
            writeData();
        },
        error: function(error) {
            alert("Error: " + error.code + " " + error.message);
        }
    });
}

function writeData() {
    var script = document.createElement('script');
    script.type = 'application/ld+json';
    script.text = JSON.stringify({
        "@context": "http://schema.org",
        "@type": "Recipe",
        "name": "My recipe name"
    });
    document.querySelector('head').appendChild(el);
}

보시다시피 writeData () 메서드는 두 곳에서 호출됩니다. 처음에 즉시 호출하면 문제가 없으며 Google 구조화 된 데이터 테스트 도구를 사용하여 필요한 구조화 된 데이터를 추적 할 수 있습니다. 문제는 Parse의 응답을 기다려야하기 때문에 그 시점에서 구조화 된 데이터를 생성 할 정보가 없다는 것입니다.

성공 콜백에서 메서드를 호출하면 테스트 도구가 더 이상 데이터를 검색 할 수 없습니다.

Mousey

http://jsfiddle.net/c725wcn9/2/embedded

이것이 작동하는지 확인하려면 DOM을 검사해야합니다. Jquery가 필요합니다.

$(document).ready(function(){
   var el = document.createElement('script');
   el.type = 'application/ld+json';
   el.text = JSON.stringify({ "@context": "http://schema.org",  "@type": "Recipe", "name": "My recipe name" });

   document.querySelector('head').appendChild(el);
});

코드에 변수 이름이 포함 script되었지만 대신 변수 el추가 <head>되었습니다. 또한 JSON-LD 놀이터 에서 확인한 JSON 문자열의 새 줄 문자도 제거되었습니다 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관