haed에 있는 메타태그를 페이지마다 다르게 불러오도록 하고 싶은데요.
본문
안녕하세요.
html, css, 제이쿼리플러그인 복붙 정도만 할 줄아는 디자이너입니다..
로그인이나 관리자페이지 같은 기능은 없는 단순 홈페이지가 있어요.
그 동안 코딩할 때
header랑 footer는 include 폴더에 넣어 공통으로 불러오게 해놨는데,
이게 모든 페이자마다 head안에 메타태그가 동일하니 SEO에 맞지 않더라구요.
그래서 일단...
title 만이라도 다르게 보여주자 싶어서 각 서브페이지마다
<script>
document.title = "타이틀" ;
</script>
이 스크립트를 넣어주니...검색에 반영은 되더라구요.
그런데 네이버에서 타이틀은 제대로 보이는데, 설명글은 메타태그 디스크립션대로 보이지 않고,
푸터내용이 보인다거나...팝업에 사용한 '오늘하루 보지않기' 이런게 랜덤으로 뜨더라구요;
그래서 위 스크립트처럼 메타태그를 변경해줄 수 있는 코드가 있나해서요..
찾아보니 다 php언어이거나 서버쪽에서 건드려줘야 하는 방법뿐이라 ㅜ
아님 head안에 메타태그에
해당페이지의 <h1>타이틀</h1>을 타이틀로 불러와라
해당페이지의 <p class="desc">설명글</p>을 디스크립션으로 불러와라와 같은 변수를 거는 방법이 있을까요..?
답변 2
타이틀이 이미 선언된 상태에서 스크립트로 변경한다고 반영이 된게 신기하네요.. 일반적으로 기존 타이틀이 있는데 스크립트로 타이틀을 변경하더라도 반영이 안되는게 이론인데 ..
<script>
// 페이지 로드 후 실행
document.addEventListener('DOMContentLoaded', function() {
// h1 태그의 내용을 타이틀로 설정
var h1Element = document.querySelector('h1');
if (h1Element) {
document.title = h1Element.textContent;
}
// .desc 클래스를 가진 p 태그의 내용을 메타 설명으로 설정
var descElement = document.querySelector('p.desc');
if (descElement) {
var metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) {
metaDescription.setAttribute('content', descElement.textContent);
} else {
var meta = document.createElement('meta');
meta.name = "description";
meta.content = descElement.textContent;
document.head.appendChild(meta);
}
}
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
