안녕하세요 팔방미남입니다. 오늘은 티스토리의 스퀘어 스킨 글 제목을 h1 태그로 변경하는 방법을 알아보겠습니다. 구글 검색에 유리하려면, 글 제목이 h1 태그로 설정되어 있어야합니다. 아시다시피 스퀘어 스킨은 글 제목을 h1이 아닌 h2로 설정해 놓고 있습니다. h1은 블로그 이름으로 설정되어 있죠. 따라서 이 포스팅에서는 글 제목을 h1으로 변경하고, 블로그 이름은 h2로 변경하는 방법을 알려드리려고 합니다. 유난히 스퀘어 스킨에 대한 정보가 많이 없어서 이렇게 공유해드리오니 부디 유용한 정보가 되셨으면 좋겠습니다.
HTML 편집하기
스퀘어 스킨에서는 우리가 지정한 블로그 이름이 h1으로 설정되어 있습니다. 구글 검색이 우선적으로 내 블로그 이름을 살펴보는 것이지요. 우리가 원하는 것은 글 제목이 최우선순위로 검색되기 원하기에 이를 HTML에서 편집할 것입니다. 이를 위해 총 2가지를 바꿔줄 예정인데요. 먼저 기존에 h1으로 설정되어 있던 블로그 이름, 기존에 h2로 지정되어 있던 글제목의 태그를 변경할 것입니다. 그럼 시작해보겠습니다.
기존 h1으로 되어 있는 블로그 이름을 h2로 변경하기
- 블로그 관리 홈에서 꾸미기 > 스킨 편집을 누릅니다.
- HTML 편집을 누릅니다.
- 코드 창 내부 아무 곳이나 클릭합니다.
- 윈도우는 Ctrl F , 맥은 ⌘ F 를 눌러 h1을 검색합니다.
- h1을 h2로 변경합니다. (하단의 코드를 복사 붙여넣기 하셔도 됩니다.)
<h2><a href="https://allroundman.tistory.com/">세상에 재밌는건 너무 많아</a></h2>기존 h2로 되어 있는 글 제목을 h1으로 변경하기
스퀘어 스킨에서는 h2가 총 7개 나옵니다. (닫는 태그 미포함시) 그 중 우리는 2개를 변경해야 합니다. 이 2개를 곧바로 찾아주는 검색어인 를 입력하시면 훨씬 찾기 수월합니다. 2개 모두 앞 뒤의 태그를 h1으로 변경합니다.
- HTML 편집창 > 윈도우는 Ctrl F , 맥은 ⌘ F 를 눌러 를 검색합니다.
- h2를 h1으로 변경합니다. (하단의 코드를 복사 붙여넣기 하셔도 됩니다. 두 군데 모두 동일한 코드입니다.)
<h1><a href=""></a></h1>CSS 편집하기
HTML을 수정하면 블로그 이름과 글 제목의 스타일이 이상하게 바뀐 것을 확인하셨을텐데 놀라실 필요 없습니다. 이제부터 스타일을 다시 원래대로 되돌려놓는 작업을 하겠습니다. 스퀘어 스킨의 블로그 이름은 사이드바에 있습니다. CSS 편집창으로 가서 아무 곳이나 클릭을 하고 h1을 검색합니다.
블로그 이름에 해당하는 CSS 편집하기
- 사이드바의 h1 을 h2로 변경하기 (하단의 코드를 복사 붙여넣기 하셔도 됩니다.)
#sidebar h2 { margin: 0; padding: 0 10px; text-align: center; font-size: 20px; font-weight: 400; line-height: 200%; color: #666; }글 제목에 해당하는 CSS 편집하기
- 포스팅 제목을 h2에서 h1으로 변경하기 (하단의 코드를 복사 붙여넣기 하셔도 됩니다.)
#head h1 { display: inline-block; margin: 0 0 50px; padding: 0 5px 3px; font-size: 20px; font-weight: 400; color: #444; line-height: 200%; border-bottom: 1px dashed #ddd; text-shadow: 1px 1px #dedede; word-break: break-word; }마무리하면서
지금까지 우리는 티스토리의 스퀘어 스킨 글 제목을 h1 태그로 변경하는 방법을 알아보았습니다. 어떠신가요? 간단하죠? 이제 글 제목이 h1으로 검색될테니 개발자도구를 사용하여 확인해보세요. 생각날때마다 스퀘어 스킨 관련된 다른 유용한 포스팅도 올려볼게요. 지금까지 읽어주셔서 감사합니다.