블로그, 사이트 제목, Open Graph 설명을 사용자가 쉽게 알아볼수 있게 작성하여 적용하는 방법

1단계: 이해하기 쉬운 사이트 제목 작성 및 적용

사이트 제목(Title)은 웹 브라우저 탭, 검색 엔진 결과 페이지(SERP), 소셜 미디어 공유 시 가장 먼저 눈에 띄는 텍스트입니다. 따라서 사용자가 사이트의 내용을 빠르게 파악하고 클릭하고 싶도록 명확하고 간결하게 작성하는 것이 중요합니다.

작성 방법:

  1. 핵심 키워드 포함: 사이트의 가장 중요한 내용이나 특징을 나타내는 키워드를 포함하세요. 예를 들어, “제주 맛집 추천” 또는 “초보자를 위한 파이썬 강좌”와 같이 작성합니다.
  2. 브랜드 이름 포함 (선택 사항): 브랜드 인지도를 높이고 싶다면 제목의 앞이나 뒤에 브랜드 이름을 추가할 수 있습니다. 예를 들어, “제주 맛집 추천 | 제주미식” 또는 “초보자를 위한 파이썬 강좌 – 코딩스쿨”과 같이 작성합니다.
  3. 간결하게 유지: 너무 길거나 장황한 제목은 검색 엔진 결과 페이지에서 잘리거나 사용자의 주의를 끌기 어렵습니다. 일반적으로 50~60자 이내로 작성하는 것이 좋습니다.
  4. 페이지별 차별화: 웹사이트의 모든 페이지는 고유한 제목을 가져야 합니다. 각 페이지의 내용에 맞춰서 정확하게 설명하는 제목을 사용하세요. 예를 들어, 메인 페이지는 “제주미식 – 주민이 추천하는 숨은 맛집”, 특정 맛집 상세 페이지는 ” 근처 맛집: 돼지”와 같이 작성합니다.
A bright light source in a dark setting, creating a dramatic effect with beams of light and a text overlay that reads 'Webstine Googeln'.
Open Graph 설명

적용 방법 (일반적인 HTML 기준):

웹사이트의 <head> 섹션에 <title> 태그를 사용하여 사이트 제목을 정의합니다.

HTML

<!DOCTYPE html>
<html lang=”ko”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>현지인이이 추천하는 숨은 맛집</title>
</head>
<body>
    </body>
</html>

  • CMS (Content Management System) 사용 시: 워드프레스, 윅스, 아임웹 등 대부분의 CMS에서는 관리자 페이지에서 각 페이지별 제목을 쉽게 설정할 수 있는 기능을 제공합니다. 해당 플랫폼의 안내에 따라 제목을 입력하세요.
  • 빌더/테마 사용 시: 일부 웹사이트 빌더나 테마에서도 SEO 관련 설정을 통해 제목을 변경할 수 있습니다. 해당 도구의 사용법을 참고하세요.

2단계: 명확하고 매력적인 Open Graph 설명 작성 및 적용

Open Graph (OG) 설명은 웹페이지가 소셜 미디어 플랫폼에서 공유될 때 표시되는 텍스트입니다. 사용자가 공유된 링크를 클릭하여 웹사이트를 방문하도록 유도하는 중요한 역할을 합니다.

작성 방법:

  1. 핵심 내용 요약: 해당 페이지의 가장 중요한 내용이나 흥미로운 부분을 간결하게 요약하여 작성합니다.
  2. 클릭 유도: 사용자의 호기심을 자극하고 클릭하고 싶게 만드는 문구를 포함하는 것이 좋습니다. 예를 들어, “지금 바로 확인하세요!”, “특별한 혜택을 놓치지 마세요!”와 같은 문구를 활용할 수 있습니다.
  3. 구체적인 정보 제공: 추상적이거나 모호한 설명보다는 구체적인 정보를 제공하여 사용자가 어떤 내용을 기대할 수 있는지 명확히 전달하세요.
  4. 제목 보완: 사이트 제목에서 다루지 못한 추가적인 정보나 맥락을 제공하여 공유된 링크의 이해도를 높입니다.
  5. 길이 제한 고려: 대부분의 소셜 미디어 플랫폼에서는 Open Graph 설명의 길이를 제한합니다. 일반적으로 150~160자 이내로 작성하는 것이 좋습니다.

적용 방법 (일반적인 HTML 기준):

웹사이트의 <head> 섹션에 <meta> 태그를 사용하여 Open Graph 설명을 정의합니다. property 속성을 og:description으로 설정하고, content 속성에 설명을 입력합니다.

HTML

<!DOCTYPE html>
<html lang=”ko”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>추천하는 숨은 맛집</title>
    <meta property=”og:description” content=”현지인인만 아는 진짜 맛집 정보! 현지인이 강력 추천하는 숨겨진 맛집들을 지금 바로 확인하고 특별한 미식 경험을 떠나보세요.”>
</head>
<body>
    </body>
</html>

추가적인 Open Graph 태그:

설명 외에도 다양한 Open Graph 태그를 활용하여 소셜 미디어 공유 시 더욱 풍부한 정보를 제공할 수 있습니다. 몇 가지 중요한 태그는 다음과 같습니다.

  • <meta property=”og:type” content=”website” />: 페이지의 유형을 정의합니다. (website, article, book, video 등)
  • <meta property=”og:title” content=”공유될 제목” />: 공유될 때 표시될 제목을 별도로 지정할 수 있습니다. (일반적으로 <title> 태그와 동일하게 사용)
  • <meta property=”og:url” content=”현재 페이지 URL” />: 현재 페이지의 정식 URL을 명시합니다.
  • <meta property=”og:image” content=”이미지 URL” />: 공유될 때 함께 표시될 이미지의 URL을 지정합니다. 시선을 사로잡는 고품질 이미지를 사용하는 것이 좋습니다.
  • <meta property=”og:locale” content=”ko_KR” />: 웹페이지의 언어 및 국가 설정을 지정합니다.

CMS 및 빌더 사용 시:

대부분의 CMS 및 웹사이트 빌더는 Open Graph 설정을 위한 별도의 필드를 제공합니다. 해당 필드에 설명을 입력하고 이미지를 업로드하는 등의 방식으로 쉽게 적용할 수 있습니다. SEO 플러그인 (예: 워드프레스의 Yoast SEO, Rank Math)을 사용하면 더욱 상세한 Open Graph 설정을 관리할 수 있습니다.

3단계: 검증 및 테스트

사이트 제목과 Open Graph 설명을 적용한 후에는 실제로 어떻게 표시되는지 확인하는 것이 중요합니다.

  • 소스 코드 확인: 웹 브라우저에서 해당 페이지의 소스 코드를 열어 <title> 태그와 <meta property=”og:description”> 태그가 올바르게 적용되었는지 확인합니다.
  • 소셜 미디어 미리보기 도구 활용: 페이스북, 트위터 등 각 소셜 미디어 플랫폼에서 제공하는 미리보기 도구를 사용하여 공유 시 어떻게 표시되는지 미리 확인해 보세요. 예를 들어, 페이스북의 Sharing Debugger를 사용하면 Open Graph 태그를 검사하고 미리보기를 확인할 수 있습니다.
  • 실제 공유 테스트: 실제 소셜 미디어에 링크를 공유하여 제목과 설명, 이미지가 의도한 대로 표시되는지 최종적으로 확인합니다.

이 단계를 통해 사용자가 사이트의 내용을 쉽게 이해하고 소셜 미디어에서 매력적으로 공유될 수 있도록 웹사이트 제목과 Open Graph 설명을 효과적으로 관리할 수 있습니다. 

https://k-food-1.com/%EC%A0%80%EC%9E%A5%EC%86%8C/1010


information에서 더 알아보기

구독을 신청하면 최신 게시물을 이메일로 받아볼 수 있습니다.