jquery로 meta-description 등의 정보변경후의 문제
본문
안녕하세요.
메타태그 정보를 변경하였는데, 이해가 되지 않는 부분이 있어서 질문드립니다.
그누보드를 이용하여 사이트를 제작하였는데, 모바일 버전을 SPA로 커스텀 하였습니다.
문제는, SPA로 구현을 할 경우에는 페이지를 한번 불러오고, 이후에는 Dom Load로 컨텐츠를 가지고 오기때문에 한번 불러온 meta tag관련된 정보가 변경이 되지 않는 문제가 있었습니다.
현재 그누보드에서 meta tag는 /extend/meta_open_graph.extend.php 에서 add_replace 로 hook기능으로 페이지마다 적용을 하는것으로 파악이 되는데요.
제가 hook을 다뤄보지 않은 관계로, hook기능으로 해결방법을 찾지 못하였습니다.
그래서, jquery로 페이지(view)에 맞게 내용을 수정하여 처리를 하였습니다.
===============================
$("#description").attr('content', description);
$("#keywords").attr('content', meta_keywords);
$("#og_type").attr('content', og_type);
...............
===============================
위와 같은 형태로 직접 라인으로나, 함수에 넣고 호출하여 페이지의 소스에는 적용되는것을 확인하였습니다.
그런데, 카카오톡에 주소를 복사하여 붙여넣기를 하면, 메인화면의 정보와 같은(적용이전) 사이트 일반정보와 기본 og-image 가 노출이 되고 있습니다. Open Graph 정보가 제가 수정한대로 전달이 되지 않고 있습니다. 카톡 디버거창(https://developers.kakao.com/tool/debugger/sharing)에 가서 해도 마찬가지 값이 들어가구요.
저는 카톡에 공유를 하면, 당연히, 페이지의 소스에 있는 정보를 가져와서 처리를 할것이라 생각을 하였는데, jquery로 수정되기전 정보로 카톡에 출력이 됩니다.
설명이 좀 길었는데요.
첫번째, 카톡에 출력이 되는 정보는 어디서 가져오는 것일까요? 페이지의 소스가 아닌 기본정보를 가지고 오는 로직이 따로 있는것인지요? 가지고 오는 로직이 따로 있다면 그곳을 손봐야 되는데, 전혀 감이 오지 않습니다.
두번째는, hook기능을 이용하여, view페이지에서 제공하는 정보로 메타정보를 출력할수 있는 방법이 있을까요? head를 다시 불러오지 않는다면, 불가능한것인지요?
읽어주셔서 감사드리고, 상세한 답변 부탁드립니다.
항상 많은 도움을 받고 있습니다, 감사합니다.
답변 1
자바스크립트로 seo 를 만진다는 건 거의 허망한 발상입니다.
자바스크립트는 웹페이지가 최초 로딩된 "이후"에 실행되는 것이 대부분이니까요.
결국은 php 처리 하셔야 해요. 서버에서 만들어서 가져와 최초 로딩시에 뿌려야 합니다.
답변 감사합니다.
그런데, spa 의 경우 해당되는 정보만을 가져와서 페이지를 리플레시 하지 않고, dom load로 처리가 되는데, 페이지를 리플레시 하지 않고서는 head파일을 새로 불러오지 않는데, meta 정보를 php 로 변경하는 것이 가능한 방법이 있는것인지요?
