본문 바로가기

[IT/Programming]/HTML related

<link ref="canonical" href="..." /> 설정하기 (DISQUS config 활용)

반응형
# <link ref="canonical" href="..." /> 설정하기 (DISQUS config 활용) <link ref="canonical" href="..." /> setting by using DISQUS config (window.disqus_config function). For SEO (Search Engine Optimization), link ref="canonical" tag is important .
출처: :: When you have several choices for a product’s URL, canonicalization is the process of picking one of them. Luckily, it will be obvious in many cases: one URL will be a better choice than the others. But in some cases, it might not be as obvious. This is nothing to worry about. Even then, just pick one! Not canonicalizing your URLs is always worse than canonicalizing the “wrong one”.
## PH
  • 2023-10-25 : First posting.
## TOC ## Using DISQUS setup - window.disqus_config function ### DISQUS setup DISQUS 는 댓글 위젯을 제공하면서 다음과 같은 setting 을 각 페이지마다 하라고 요구한다. ```[.linenums.lang-js] /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables **/ window.disqus_config=function () { this.page.identifier="pure-SEE"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable this.page.url=`https://kipid.tistory.com/entry/${this.page.identifier}`; // Replace PAGE_URL with your page's canonical URL variable }; ```/ 약간은 생소한 function 형태인데, 여기서 어떻게 this.page.url 을 뽑아내고 <link ref="canonical" href="..." /> 에 적용시킬 수 있을지 알아보자. ### Retrieving this.page.url from window.disqus_config (function) 그냥 function 을 call 하는게 아니라 apply 를 써서 JSON object 에 function 을 묶어주는 방법을 쓰면 this.page.url 을 뽑아낼 수 있다. ```[.linenums.lang-js] window.m=window.m||{}; m.disqusVars={page:{}}; window.disqus_config.apply(m.disqusVars); // 이렇게 호출하면 m.disqusVars 에서 function 을 call 하는 형태가 되어서 page variable 을 가지는 JSON object 가 들어가서 error 없이 잘 동작한다. $('link[rel="canonical"]').remove(); // 우선 이미 link tag with rel="canonical" 가 있다면 모두 지워주자. ($("head")||$("#docuK-style")).append(`<link rel="canonical" href="${m.disqusVars.page.url}" />`); // 그리고 canonical url 을 지정해줘서 Search Engine 들이 여러 url 을 갖지만 동일한 contents 를 가르키는 하나의 canonical url 로 검색 결과를 유도하도록 만들자. m.disqusVars.page.url; // 이와 같이 url 을 뽑아낼 수 있다. 이건 ChatGPT 도 잘 답변 못해주는... 역시 아직은 인간이 더 똑똑한듯? 곧 이 글 통해서 ChatGPT 가 배우긴 할테지만서도ㅋ. ```/ ## Just use SEE (Super Easy Edit) of docuK 이런 복잡한 과정을 거치면서 힘겹게 글을 작성하기 싫다면, 제가 만든 MarkDown 언어인 SEE of docuK Super Easy Edit (SEE) of docuK: 사용 설명서 (Manual | Documentation | Tutorial). 를 사용해 보시길... ## RRA
  1. 구글 검색 센터 :: rel="canonical" 및 다른 메서드로 표준 URL을 지정하는 방법
  2. yoast.com :: rel=canonical: the ultimate guide, 2023-03-22
반응형