초보자 팁) 목차 만들어서 글작성 후 이동 및 SEO에 맞춰 글을 작성하는 방법.

목차

• 1. Prologue - 목차 만들어서 글작성하기. (Making a table of contents and writing.)

• 2. 박스 레이아웃 만들기. (Create a box layout.)

• 3. 티스토리 글 작성 시, HTML모드로 변경하는 방법. (How to change to HTML mode when writing a T-story article.)

• ** 많이 사용되는 HTML 태그 간단 요약정리. (Simple summary summary of popular HTML tags.)

• 4. 목차에서 소 제목을 누르면 이동할 수 있도록 하이퍼링크 만들기. (Create a hyperlink so that you can click a sub-title in the table of contents.)

• *** SEO에 맞춘 글 작성 시 팁. (Tips for writing articles belons to SEO.)

• 5. 글을 마치며.. (Conclusion.)

akajin.tistory.com

 

---

초보자 팁) 목차 만들어서 글작성 후 이동 및 SEO에 맞춰 글을 작성하는 방법.

Blog beginner's tip) How to make a table of contents, to make moving sections, and write according to SEO after writing.

 

---

1. Prologue - 목차 만들어서 글작성하기 

Making a table of contents and writing.

 

 글을 쓰다 보면, 때론 글이 길어질 수 있다. 그리고, 구글 SEO에 맞춰서 글을 작성하다 보면.. 메인 제목 외에 소 제목을 지정해 섹션을 정해 글을 정리하곤 하는데, 글 맨 위에 목차를 만들고 HTML을 사용해 해당 섹션으로 바로 이동할 수 있도록 하이퍼링크를 걸어만들 수 있는 글 작성 법 TIP을 설명하고자 합니다.

 

 When I write for the postings on your blog, sometimes your writing can get longer. And When I write according to Google SEO, I often designate a small title in addition to the main title and organize my writing by setting a section. I would like to explain how to write a TIP that allows you to create a table of contents at the top of the text and hang hyperlinks so that you can use HTML to go directly to the section.

 

< 예시 글 1. >

2023.01.16 - [Awesome Tasty!] - 와인안주 추천) 알미토 체리페퍼 크림치즈. Wine side dish recommendation.

와인안주 추천) 알미토 체리페퍼 크림치즈. Wine side dish recommendation.

< 예시 글 2. >

2023.01.09 - [Blah Blah, Review and thought, TIPS] - 내돈내산리뷰) 브라운 적외선 체온계 IRT-6510

내돈내산리뷰) 브라운 적외선 체온계 IRT-6510

 

 

---

2. 박스 레이아웃 만들기.

Create a box layout.

 

 2-1. 목차를 만들 때 상단에 박스를 만들어 레이아웃을 만듭니다. 

 

When creating a table of contents, create a layout by creating a box options at the menu sections on top.

기본모드의 글 쓰기 옵션 중 상단에 "를 누르면 박스를 만들 수 있는 옵션이 있습니다.

 

 2-2. 이 박스를 만들고 헤드라인이 될 만한 소제목들을 순차적으로 열거합니다.

 

Create this box and list the sub-headings that will be headlines sequentially.

위의 예시와 같이 소 제목을 섹션 별로 나눠줍니다.

 

 

 

---

3. 티스토리 글 작성 시, HTML모드로 변경하는 방법.

How to change to HTML mode when writing a T-story article.

 

 상단 옵션을 보면 우측 끝에 "기본모드"라고 표시되어 있는 것을 볼 수 있는데, 여기서 기본모드를 클릭하면 "마크다운"이란 옵션과 "HTML" 옵션을 볼 수 있습니다. 

 

 If you look at the top option, you can see that it says "Default Mode" on the far right, where you can click on the basic mode to see the option "Markdown" and the option "HTML".

우측 상단 옵션 중 "기본모드"를 누르면 다른 모드의 옵션이 나옵니다.

 

 

 상단에 언급한 박스를 기본 베이스로 예를 들어 좀 더 쉽게 설명해 드리겠습니다. <blockquote data-ke-style="style3"> ~  </blockquote> 해당 태그는 박스를 만드는 구조입니다. 우선 기본모드에서 박스 안에 들어갈 말들을 자유롭게 작성을 한 후, HTML모드로 들어가면 쉽게 찾아볼 수 있을 것입니다. 우리는 <blockquote data-ke-style="style3">와 </blockquote> 사이에 있는 스크립트를 수정할 것입니다. 하기 박스에 보기 쉽도록 하이라이트 해서 표기하였습니다. 

 

 I will explain the box mentioned above more easily with an example as the base. <blockquote data-ke-style="style3"> to </blockquote> corresponding tags are structures that create boxes. First of all, you will be able to freely write the words that will go into the box in the basic mode and then go into HTML mode and you will be able to find them easily. We will modify the script between <blockquote data-ke-style="style3"> and </blockquote>. I highlighted the box below to make it easier to see.

 

 

 HTML모드로 진입하면, 박스내용이 하기와 같이 자바스크립트로 나오게 됩니다.

 

 When you enter HTML mode, the contents of the box appear in JavaScript as follows.

<blockquote data-ke-style="style3"> 목차 <br />1. 와인안주 추천! Wine side dish recommendation. <br />2. 체리페퍼? 파프리카? Cherry pepper or Paprika? <br />3. 체리페퍼 크림치즈와 와인안주로 함께 곁들일 개인적인 추천 조합은? What's the best combination of cherry pepper cream cheese and wine? </blockquote>

 

 

---

** 많이 사용되는 HTML 태그 요약정리. 

Simple summary summary of popular HTML tags.

 

 목차에서 언급된 순차를 누르면 소 제목으로 이동할 수 있도록 순차의 소 제목들 각각 앞에 <li>를 넣어주고 문자열 끝 <br /> 바로 앞에 </li> 넣어 문자열을 만들어 줍니다. 여기서 끝에 <br />이 들어가 있는데, 해당 태그 및 추가적인 다른 태그에 대해 설명하겠습니다. 

 <ul> : unordered list, 순서 없는 목록을 언급. <ul>로 시작을 했으면 스크립트 끝에 </ul>로 끝맺음.

 <li> : list item, 목록의 내용을 표현함. <li>로 시작을 했으면 스크립트 끝에 </li>로 끝맺음.

 <p> : paragraph 즉, 문단이라는 뜻으로 문단을 지정함. <p>로 시작을 했으면 스크립트 끝에 </p>로 끝맺음.

 <br> : Line Break, 줄 바꾸는 기능을 함.  

그 외, 여러 태그들이 많지만 여기까지만 설명하겠습니다. 

 In the table of contents, press <li> before each of the sub-headings so that you can move to the sub-headings and </li> immediately before the end of the string to create a string. There's <br /> at the end, and I will talk about that tag and other additional tags.

<ul> : Unordered list, referring to an unordered list. If you start with <ul>, end the script with </ul>.
<li>: list item, expressing the contents of the list. If you start with <li>, end the script with </li>.
<p> : Paraphrase a paragraph, meaning paragraph. <p>If you started with , end the script with a </p>.
<br>: Line Break, which functions as a line change.

There are many other tags, but I'll stop here.

 <li>1. 와인안주 추천! Wine side dish recommendation. </li><br />

 

 

---

4. 목차에서 소 제목을 누르면 이동할 수 있도록 하이퍼링크 만들기. 

Create a hyperlink so that you can click a sub-title in the table of contents.

 

 4-1. 다음 단계는, 해당 소제목을 누르면 해당 섹션으로 이동할 수 있도록 만들어 주는 작업인데, <li> 다음에 <a href="#no_1">를 넣어주고, </li> 앞부분에 </a>를 넣어 문자열을 만들어 준다. <a ~~~>로 문자열을 시작했기에 끝맺음을 </a>로 해주는 것으로 이해하면 된다. 여기서 <a 뒤에 "href="를 넣어주는 데, "href="는 Hypertext Reference의 약자로 자바스크립트에서 이동을 행하는 태그로 가장 많이 사용되는 속성입니다. "href="뒤에 하기 예시와 같이 "#no_1" 숫자를 이동시킬 소제목의 순차대로 번호를 지정해 주면 됩니다. 

 

 The next step is to press the sub-heading to move to the section, where <li> is followed by <a href="#no_1"> and </a> is added to the front of </li> to create a string. Since the string started with <a~~~>, it can be understood as ending with </a>. Here, <a> is followed by "href=", which stands for Hypertext Reference and is the most commonly used attribute in JavaScript as a tag for moving. After "href=", you can number the subheadings in order to move the number "#no_1" as shown in the example below.

 <li><a href="#no_1"> 1. 와인안주 추천! Wine side dish recommendation. </a></li><br />

 

위에 서 말한 <변경 전>과 하기 <변경 후>를 비교하시면, 수정된 스크립트를 비교하실 수 있습니다. 

 

If you compare <before change> and <after change> below, you can compare the revised script.

<변경 전, Before change> 

<blockquote data-ke-style="style3"> 목차 <br />1. 와인안주 추천! Wine side dish recommendation. <br />2. 체리페퍼? 파프리카? Cherry pepper or Paprika? <br />3. 체리페퍼 크림치즈와 와인안주로 함께 곁들일 개인적인 추천 조합은? What's the best combination of cherry pepper cream cheese and wine? </blockquote>

 

조금 더 알아보기 쉽도록, <br /> 뒤에 엔터를 눌러 다음 행으로 줄 바꿈을 해 변경을 했습니다. 

 

To make it a little more recognizable, I changed it by pressing <br /> followed by Enter to the next line.

<변경 후, After change>

<blockquote data-ke-style="style3"> 목차 <br />
 <li><a href="#no_1"> 1. 와인안주 추천! Wine side dish recommendation. </a></li><br />
 <li><a href="#no_2"> 2. 체리페퍼? 파프리카? Cherry pepper or Paprika? </a></li><br />
 <li><a href="#no_3"> 3. 체리페퍼 크림치즈와 와인안주로 함께 곁들일 개인적인 추천 조합은? What's the best combination of cherry pepper cream cheese and wine? </a></li></blockquote>

 

 

---

*** SEO에 맞춘 글 작성 시 팁.

Tips for writing articles belons to SEO.

 

 처음 서론에서 언급한 바와 같이, 구글 SEO에 맞춰서 글을 작성하다 보면.. 메인 제목 외에 소 제목을 지정해 섹션을 정해 글을 작성하는데, 이 소 제목을 HTML모드에서 보게 된다면, 소 제목 앞에 <h1 ~ 소 제목 1 </h1> 혹은 <h2 ~ 소 제목 2 </h2>, <h3 ~ 소 제목 3 </h3> 이런 내용을 찾을 수 있을 것입니다. 여기서 h1은 메인 제목을 의미하는 태그이고, h2 ~ h6는 소 제목을  의미하는 태그입니다. 한 포스트당 h1은 메인 제목으로 딱 1번만 사용해야 하며, h2는 여러 번 사용해도 무관합니다. 각 제목을 사용하면 해당하는 내용은 숫자와 일치하도록 설정해 글을 작성해 주시면 됩니다.

 

 As I mentioned in the first introduction, if you write according to Google SEO... In addition to the main title, you specify a sub-heading or sub-title to write a section, and if you see the sub-heading in HTML mode, you will find <h1~subhead 1 </h1> or <h2~subhead 2 </h2> or <h3~subhead 3 </h3>. where h1 is the tag for the main title, and h2 to h6 are tags for the sub title. h1 per post should be used only once as the main title, and h2 can be used multiple times. If you use each title, you can write the text by setting the corresponding content to match the number.

 

 

4-2. HTML모드에서 각 소 제목에 해당되는 태그를 찾습니다. 내가 기본모드에서 쓴 소 제목들 앞에 앞 서 언급한 <h1, <h2, <h3, 등 구분을 나눈 header 태그를 발견 할 수 있을 것입니다. 

 

 In HTML mode, locate the tag that corresponds to each sub title. You will find the header tag divided into <h1, <h2, <h3, etc.> before the sub titles I wrote in basic mode.

<변경 전, Before change>
 
<h2 style="text-align: left;" data-ke-size="size26"><b> 와인안주 추천! </b></h2>

 

4-3. 이 header 태그 바로 뒤에 위의 박스를 만든 목차의 순서와 일치 하도록 id="no_1" 을 넣어주면 됩니다. 순차에 맞도록 id="no_2", id="no_3" 등 다음 소 제목앞 <h 태그 바로 뒤에 넣어주고 완료를 눌러 포스팅을 하면 작동 되는 것을 확인 하 실 수 있습니다. 여기서 중요한 점은 목차 박스에서의 "no_숫자"에서는 앞에 #이 들어갔지만, 이동 될 소 제목 글 앞에 <h 태그 바로 뒤에 넣을 때는 #이 들어가지 않습니다.  

 

 Simply put id="no_1" right after this header tag to match the order of the table of contents that created the box above. You can confirm that it works by placing it directly after the <h tag in front of the next title, such as id="no_2" and id="no_3" in order, and then pressing Finish to post. The important point here is that the "no_number" in the table of contents box has a # before it, but does not have a # immediately after the <h tag before the heading text to be moved.

<변경 후, After change>

<h2 id="no_1" style="text-align: left;" data-ke-size="size26"><b> 와인안주 추천! </b></h2>

 

 

---

5. 글을 마치며..

Conclusion. 

 

 네이버 블로그같은 레이아웃이 정해져 있는 블로그를 운영 하시던 분들은 티스토리 블로그 혹은 워드프레스 같은 HTML을 사용해 셀프커스터마이징하는 블로그의 사용 방법이 좀 많이 힘들꺼에요. HTML모드, 스킨편집, 플러그인 등 많이 복잡한 편이죠. 거기에 글만 올린다고 조회수가 올라가거나, 유입이 되는것도 아니니..검색유입설정, 백링크 설정, 글 쓰고 서치콘솔에 들어가서 URL검사, 색인생성요청을 하고 sitemap과 RSS도 업데이트 누르고.. 참 할일이 많죠..

 

 하지만, 하나하나 배워가고 적응되면 커스터마이징하면서 재미를 찾아 갈 것입니다. 어떤 소재로 글을 포스팅할까, 어떻게 하면 유입률을 늘릴 수 있을까, 참 고민이 많죠. 너무 고민하시지 마시고 내가 쓰고 싶은 글을 적어가면 됩니다. 그 어떤 누군가가 나와 같은 고민을 하고 있을 것이고, 같은 관심사를 가지고 있을테니까요. 언젠가는 고민했던 것들이 해결될 것이라 믿습니다. 구독과 공감 좋아합니다. 물론 서로 방문 시 공감가는 광고등이 있으면, 암묵적인 광고 시청과 클릭도 좋아하구요.;-) 서로 돕고 그렇게 살아가는거 아니겠어요?  힘내시구요. 행복한 하루 되세요. ;-)

 

 For those who using blogs with fixed layouts such as Naver blogs, it would be difficult to use a blog that uses HTML such as T-Story Blog or WordPress to self-customize. HTML mode, skin editing, plug-in, etc. are very complicated. Just posting on it doesn't increase the number of views or cause an influx. Search inflow setting, backlink setting, writing, connect to the search console, do the checking URLs, do the requesting index creation, and pressing update sitemap and RSS every updates when needed. There's a lot to do.

However, if you learn one by one and get used to it, you will find fun by customizing your blog. I thank you might have a lot of worries about what material to post and how to increase the inflow rate. Don't worry too much and just write down what you want to write. There would be someone must have the same concerns and interests as you thought. I believe that the things that you were worried about will be solved someday. Cheer up and have a good day. ;-)

 

 

A W E S O M E P L A N T by @aka_jincho