커넥티드 내 article 작성 시, 다음의 가이드라인을 준수하길 권고합니다.
주제 및 분량
1.
커넥티드 내 콘텐츠 분류에 따른 주제에 부합하는 기사를 작성합니다.
2.
분량은 한글 기준 1,200 ~ 2,000자를 추천합니다.
3.
전체 내용을 소개하거나 요약하는 문단을 첫 단락에 배치합니다.
4.
글 전체에 걸쳐 커넥티드의 핵심 키워드를 2% 이내 수준으로 배치합니다. (2,000자 기준 40회 이내)
5.
모든 이미지에는 대체 텍스트를 상세하게 입력합니다.
6.
가급적 본문 내에 사이트 내 또는 외부 사이트로 연결하는 링크를 배치합니다.
7.
본문은 단락으로 구성하고 각 단락은 heading을 사용합니다.
8.
목록화가 가능한 경우 적극적으로 적용합니다.
Meta Data 생성
Chat GPT를 활용하여 Meta Data를 생성합니다.
SEO Optimized 등의 GTPs를 활용하여 글 제목을 통해 Meta Data를 추출하여 사용합니다.
Meta Data 생성 예시
글 제목 : 다이어트 한약 VS 양약, 나의 선택은?
Title Tag | 다이어트 한약과 양약: 당신에게 맞는 최적의 선택 가이드! |
Meta description | 다이어트 한약과 양약의 효과, 장단점, 부작용을 비교 분석해 보세요. 나에게 맞는 다이어트 방법을 선택할 수 있는 가이드를 제공합니다. |
OG Title | 다이어트 한약 VS 양약: 효과, 장단점, 부작용 완벽 비교 |
OG Description | 다이어트 한약 VS 양약! 두 가지 체중 감량 방법의 장점, 단점, 적합한 상황까지 완벽히 분석해 드립니다. |
OG thumbnail | 1200 x 630(권장) 또는 600 x 315 px |
HTML 편집
가이드 및 도구
•
작성한 콘텐츠는 html로 편집한 후, 사이트 관리자를 통해 등록합니다.
•
사이트 관리자 내 에디터를 통해 등록하기 때문에 CSS 또는 head 영역의 style 적용 대신 인라인에 필요한 style을 적용하여 사용합니다.
•
모바일에선 전체 padding 값을 지정하지 않습니다. 그 외에는 PC와 동일하게 사용 가능합니다.
공통 스타일 적용
콘텐츠 본문에만 적용 가능한 스타일을 별도로 넣습니다.
PC
<!-- PC -->
<div style="width: 100%; margin: 0 auto; background: #fff; padding: 10px; border-radius: 8px; font-family: 'Pretendard Variable', Arial, sans-serif; line-height: 28px; font-size: 18px; font-weight: 400;">
<!-- Mobile -->
<div style="width: 100%; margin: 0 auto; background: #fff; border-radius: 8px; font-family: 'Pretendard Variable', Arial, sans-serif; line-height: 28px; font-size: 18px; font-weight: 400;">
HTML
복사
Heading 스타일 적용
본문 내 hierarchy 구조에 따라 부합하는 heading tag를 적용합니다.
<h1 style="font-size: 1.5em; font-weight: 700; line-height; 1.2em; margin-bottom: 20px; color: #333;">다이어트 한약과 양약 비교</h1>
<h2 style="font-size: 1.3em; font-weight: 600; line-height: 1.1em; margin-top: 60px; color: #333;">다이어트 한약</h2>
<h3 style="font-size: 1.1em; font-weight: 600; margin: 30px 0 5px 0; color: #333;">장점</h3>
HTML
복사
목록 스타일 적용
비정렬 목록(bullet-구분점으로 표시, 순서와 상관없는 경우) 사용 시
<ul style="margin: 10px 0; padding-left: 20px; list-style-type: disc;">
<li><strong>빠른 효과 :</strong> 단기간에 눈에 띄는 체중 감량이 가능합니다.</li>
<li><strong>과학적 근거 :</strong> 약물의 효과가 입증되어 신뢰할 수 있습니다.</li>
<li><strong>편리함 :</strong> 복용이 간단하여 바쁜 현대인의 라이프스타일에 적합합니다.</li>
</ul>
HTML
복사
정렬 목록(숫자로 표시, 순서가 중요한 경우) 사용 시
<ol style="margin: 10px 0; padding-left: 20px; list-style-type: disc;">
<li><strong>빠른 효과 :</strong> 단기간에 눈에 띄는 체중 감량이 가능합니다.</li>
<li><strong>과학적 근거 :</strong> 약물의 효과가 입증되어 신뢰할 수 있습니다.</li>
<li><strong>편리함 :</strong> 복용이 간단하여 바쁜 현대인의 라이프스타일에 적합합니다.</li>
</ol>
HTML
복사
단락 태그
문단, 이미지 단락을 나눌 때는 P 태그를 사용합니다.
<p style="margin: 10px 0;">체중 감량은 단순히 외적인 변화가 아닌 건강과 자신감을 되찾기 위한 중요한 과정입니다. 그러나 어떤 방법을 선택하느냐에 따라 효과와 결과는 달라지죠. 다이어트 한약과 양약은 각각의 장점과 단점이 명확하며, 본인에게 적합한 방식을 찾는 것이 성공의 열쇠입니다. 두 방법의 차이와 장단점, 비용, 주의사항까지 알아보겠습니다.</p>
HTML
복사
이미지 태그
이미지는 관리자 내 에디터에서 등록 후, URL만 가져와 html 편집을 통해 필요한 태그를 적용합니다.
<p style="text-align: center; margin: 20px 0;">
<img src="http://49.247.40.204:8080/files/b74dc29e-4a94-4c7f-bfb1-85c0ea680269"
alt="다이어트와 관련된 이미지"
style="width: 100%; max-width: 720px; height: auto; border: 0px solid #000; border-radius: 5px;"
loading="lazy">
</p>
HTML
복사
테이블
테이블은 최소화하여 사용합니다.
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
<tr>
<th style="border: 1px solid #ddd; padding: 10px; background-color: #f4f4f4; white-space: nowrap;">항목</th>
<th style="border: 1px solid #ddd; padding: 10px; background-color: #f4f4f4;">비용</th>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px; text-align: center; white-space: nowrap;">한약</td>
<td style="border: 1px solid #ddd; padding: 10px;">20만 원 ~ 50만 원 (개인 맞춤형)</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px; text-align: center; white-space: nowrap;">양약</td>
<td style="border: 1px solid #ddd; padding: 10px;">10만 원 ~ 30만 원 (일반적인 약물)</td>
</tr>
</table>
HTML
복사
하이퍼링크
•
커넥티드 사이트 내 페이지로 링크를 거는 경우, 키워드를 포함한 title을 기입합니다.
•
커넥티드 내 페이지로 링크를 거는 경우, 기본적으로 현재 화면에서 이동을 원칙으로 합니다.
•
가급적 한 콘텐츠 내 3~4개 링크 이상을 넣지 않습니다.
<!-- 기본 -->
<a href="/mbti-types-career-guide" title="MBTI 유형별 적성 및 직업 추천">MBTI 적성과 직업 추천</a>
<!-- 문단 내 -->
<p>MBTI 유형별 적성과 직업 추천을 알아보고 싶다면 <a href="/mbti-types-career-guide" title="MBTI 유형별 적성 및 직업 추천">이 가이드</a>를 참고하세요.</p>
<!-- 목록에서 링크 -->
<ul>
<li><a href="/mbti-types-career-guide" title="MBTI 유형별 적성 및 직업 추천">MBTI 적성과 직업 추천</a></li>
<li><a href="/mbti-strengths-weaknesses" title="MBTI의 강점과 약점">MBTI의 강점과 약점</a></li>
<li><a href="/mbti-relationship-guide" title="MBTI와 인간관계 가이드">MBTI와 인간관계</a></li>
</ul>
HTML
복사
•
외부 페이지로 링크를 거는 경우, 다음의 사항에서는 nofollow를 적용합니다.
: 상업적 의도가 있는 링크인 경우 (특정 제품 홍보나 판매 페이지, 유튜브 영상 등으로 링크하는 경우)
: 신뢰할 수 없는 사이트로 링크하는 경우 (뭔가 수상해 보이거나 스팸성 콘텐츠가 있는 경우)
•
외부 페이지로 링크를 걸 때는 새창 열기를 원칙으로 합니다.
•
스타일이 필요한 경우, 인라인에 직접 적용합니다.
<a href="https://www.youtube.com/watch?v=example" rel="nofollow" target="_blank">
유튜브에서 관련 제품 영상 보기
</a>
<!-- 스타일 적용 -->
<a href="https://www.example.com"
target="_blank"
title="예시 링크 1로 이동 (새 창 열림)"
style="text-decoration: none; color: #007BFF; font-weight: bold;"
onmouseover="this.style.color='#0056b3'; this.style.textDecoration='underline';"
onmouseout="this.style.color='#007BFF'; this.style.textDecoration='none';"
onclick="this.style.color='#FF5733';">
예시 링크 1
</a>
HTML
복사
