안녕하세요, blazor webassembly라는 framework를 이용하여 페이지를 생성하고 open graph 를 하위 path마다 동적으로 값을 가져오게 처리한 상태입니다.
<div id="app"></div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var uri = window.location.href;
var descriptionMetaTag = document.querySelector('meta[name="description"]');
var keywordsMetaTag = document.querySelector('meta[name="keywords"]');
var authorMetaTag = document.querySelector('meta[name="author"]');
var ogTitle = document.querySelector('meta[property="og:title"]');
var ogDescription = document.querySelector('meta[property="og:description"]');
var ogImage = document.querySelector('meta[property="og:image"]');
var ogUrl = document.querySelector('meta[property="og:url"]');
// URI가 /kr일 때 한글 메타 태그, /en일 때 영문 메타 태그 설정
if (uri.includes('/kr')) {
// 페이지 제목 설정 (한국어)
setPageTitle('BIMIL - 애드인 플랫폼 | BIMPeers');
// 한글 메타 태그 설정
descriptionMetaTag.setAttribute('content', 'BIMIL (BIM Integrated Lab)은 Autodesk Revit 사용자를 위한 플랫폼으로, 원하는 애드인을 탐색하고 설치하여 워크플로우를 개선할 수 있도록 지원합니다.');
keywordsMetaTag.setAttribute('content', 'BIMIL, Revit, Add-in, Plugin, BIMPeers');
authorMetaTag.setAttribute('content', 'BIMPeers');
// Open Graph 메타 태그 설정
ogTitle.setAttribute('content', 'BIMIL - 애드인 플랫폼 | BIMPeers');
ogDescription.setAttribute('content', 'BIMIL (BIM Integrated Lab)은 Autodesk Revit 사용자를 위한 플랫폼으로, 원하는 애드인을 탐색하고 설치하여 워크플로우를 개선할 수 있도록 지원합니다.');
ogImage.setAttribute('content', 'https://bimil.bimpeers.com/images/logo/Header_logo.png');
ogUrl.setAttribute('content', uri);
console.log('Open Graph Title:', ogTitle.getAttribute('content'));
console.log('Open Graph Description:', ogDescription.getAttribute('content'));
} else if (uri.includes('/en') || uri === 'https://bimil.bimpeers.com') {
// 페이지 제목 설정 (영어)
setPageTitle('BIMIL - Add-in Platform | BIMPeers');
// 영어 메타 태그 설정
descriptionMetaTag.setAttribute('content', 'BIMIL (BIM Integrated Lab) is a platform for Autodesk Revit users, enabling them to select and download add-ins to enhance their workflows.');
keywordsMetaTag.setAttribute('content', 'BIMIL, Revit, Add-in, Plugin, BIMPeers');
authorMetaTag.setAttribute('content', 'BIMPeers');
// Open Graph 메타 태그 설정
ogTitle.setAttribute('content', 'BIMIL - Add-in Platform | BIMPeers');
ogDescription.setAttribute('content', 'BIMIL (BIM Integrated Lab) is a platform for Autodesk Revit users, enabling them to select and download add-ins to enhance their workflows.');
ogImage.setAttribute('content', 'https://bimil.bimpeers.com/images/logo/Header_logo.png');
ogUrl.setAttribute('content', uri);
console.log('Open Graph Title:', ogTitle.getAttribute('content'));
console.log('Open Graph Description:', ogDescription.getAttribute('content'));
} else {
// 기본 페이지 제목 설정 (영어)
setPageTitle('BIMIL - Add-in Platform | BIMPeers');
// 기본 메타 태그 설정 (기본은 영어)
descriptionMetaTag.setAttribute('content', 'BIMIL (BIM Integrated Lab) is a platform for Autodesk Revit users, enabling them to select and download add-ins to enhance their workflows.');
keywordsMetaTag.setAttribute('content', 'BIMIL, Revit, Add-in, Plugin, BIMPeers');
authorMetaTag.setAttribute('content', 'BIMPeers');
// Open Graph 메타 태그 설정
ogTitle.setAttribute('content', 'BIMIL - Add-in Platform | BIMPeers');
ogDescription.setAttribute('content', 'BIMIL (BIM Integrated Lab) is a platform for Autodesk Revit users, enabling them to select and download add-ins to enhance their workflows.');
ogImage.setAttribute('content', 'https://bimil.bimpeers.com/images/logo/Header_logo.png');
ogUrl.setAttribute('content', uri);
}
});
</script>
(blazor webassembly가 초기 로드시 wwwroot/index.html 파일을 먼저 읽어서 이렇게 스크립트를 작성한 상태입니다.)
이상태로 카카오 공유 디버거에서 테스트를 하니, 하기 이미지처럼 동적으로 open graph를 받아오는 부분이 적용되지 않습니다.
서버 사이드 랜더링 방식을 이용해야만 웹크롤러가 인식한다는 이야기를 본ㄴ 것 같은데, 이 이유 때문인 지 아님 다른 이유 때문인 지 확인 부탁드립니다. 감사합니다.