vue3에 SEO schema 적용하는 방법(application/ld+json)

php작업할땐 그냥 간단하게 아무데나

<script type="application/ld+json">
{
	"@context" : ""
    내용
}
</script>

이렇게 넣으면됐지만 vue에서는.... vue-cli에서는 저렇게 간단하게 넣을수가 없다

물론 걍 index.html에 때려박으면 되겠지만 그건 고정데이터값을 줄때나 그러지

나처럼 상세페이지 데이터를 끌어와서 넣어주고싶다면 컴포넌트쪽에서 스키마코드를 짜야되는데

vue-cli 컴포넌트는

<template>
  
</template>

<script>
export default {

}
</script>
<script type="application/ld+json">
	스키마 데이터~
</script>
<style>

</style>

이 형태를 가지고있는데 이러고 넣으면 될까? 하고 시도해봤다

응 안된단다

그래서 찾아보니 뭐 vue에서 스키마 설정을 할 수 있는 방법이 있는것같았다

vue-form-json-schema와 같은 플러그인을 설치하면됐는데 문제는..

v2만 되지롱

 저거뿐만 아니라 찾아본 대부분의 스키마 관련 플러그인 대부분이 vue2까지만 지원했다

망할 vue3

 

하지만 나는 잊고있었다 vue 또한 근본은 자바스크립트라는것..

 

created(){
    let el = document.createElement('script');
        el.type = 'application/ld+json';
        el.text = JSON.stringify({ 
            "@context":"https://schema.org",
            "@type":"Product",
            "productID":vm.Arr.seq,
            "name":vm.Arr.nickname,
            "description":vm.Arr.introduceTitle,
            "url":vm.link,
            "image":vm.Arr.imgPath,
            "brand":"브랜드명",
            "offers": [
                {
                "@type": "Offer",
                "price": vm.Arr.Coin*100,
                "priceCurrency": "KRW",
                "itemCondition": "https://schema.org/NewCondition",
                "availability": "https://schema.org/InStock"
                }
            ],
            "additionalProperty": [{
                "@type": "PropertyValue",
                "propertyID": vm.Arr.seq,
                "value": vm.Arr.Coin*100
            }]
        });
        document.querySelector('head').appendChild(el);
}

네 걍 스크립트쪽에서 head 불러와서 거기다 append로 넣어주면된다

흑흑 이 간단한ㄴ걸..