Vue JS SPA에서 그래프 이미지를 여는 방법

Vue JS SPA에서 그래프 이미지를 여는 방법

내 VueJS 싱글 페이지 응용 프로그램에 열린 그래프 이미지를 포함하려고 해.

https://developers.facebook.com/tools/debug/

다음 링크 미리 보기를 제공하십시오.

모든 루트가 동일한 이미지를 반환하려면 페이지 상단에 열려 있는 그래프 메타 태그를 걸면 될 것 같은데, 다른 페이지가 다른 이미지를 표시했으면 좋겠어.

나는 https://github.com/declandewet/vue-meta과 https://github.com/ktquez/vue-head,을 시도해 보았지만, 아마도 그들은 페이지가 로드된 후에 JS를 통해 메타 태그를 주입하기 때문에 도움이 되지 않는 것 같다.

Nuxt나 Vue SSR과 미리 렌더링하는 것 말고는 다른 방법이 없을까?

프레렌더-스파이버가 부-헤드/부-와 함께 사용되어 트릭을 할 수 있을 것이다!모든 경로를 미리 알고 있으면 봇에 사용할 수 있는 index.html 파일을 렌더링할 수 있다.

동적 컨텐츠가 있는 경우captureAfterDocumentEvent또는captureAfterTime비동기 콘텐츠를 캡처하기 위해 렌더링되었다.

만약 당신이 더 강력한 무언가가 필요하다면, Vuejs SSR이 더 나은 선택일 것이다.

참조URL: https://stackoverflow.com/questions/46718161/how-to-do-open-graph-images-in-a-vue-js-spa