Open Graph 태그 생성기 사용 방법

페이지 정보를 준비하는 방법

Open Graph 태그 생성기는 페이지 정보를 메타 태그 마크업으로 정리할 때 사용하는 도구입니다. 제목과 설명을 바탕으로 기본 결과를 만들고, 필요한 경우 이미지 주소, 페이지 주소, 사이트 이름, 타입, 로케일을 함께 지정할 수 있습니다. 웹페이지의 공유용 정보를 한곳에서 준비하려는 상황에 알맞습니다.

입력란은 제목, 설명, 이미지 URL, URL, 사이트 이름, 타입, 로케일로 구성됩니다. 제목과 설명은 기본 정보를 이루며, 나머지는 페이지의 상황에 따라 선택합니다. 이미지 주소를 입력하면 이미지 요소가 결과에 들어가고, 페이지 주소를 넣으면 URL 요소가 추가됩니다. 사이트 이름도 값을 제공한 경우에만 관련 요소가 나타납니다.

입력한 문자는 생성되는 마크업 안에 HTML 이스케이프 형태로 반영됩니다. 따라서 제목이나 설명에 HTML에서 특별한 의미를 가질 수 있는 문자가 있어도 결과에는 변환된 값이 들어갑니다. 이 도구는 제공한 페이지 정보를 바탕으로 마크업을 생성하므로, 필요한 내용을 먼저 정리한 뒤 입력하면 결과를 읽기 쉽습니다.

입력부터 결과 확인까지

1. 페이지를 대표하는 제목을 입력합니다. 제목 값이 비어 있거나 거짓으로 평가되면 계산은 성공할 수 있지만 생성할 마크업은 나오지 않습니다. 실제 페이지를 구분할 수 있는 제목을 넣고 다음 입력으로 이동합니다.

2. 페이지 내용을 짧게 설명하는 문장을 입력합니다. 제목 값이 있으면 결과에는 제목 요소와 설명 요소가 포함됩니다. 설명은 해당 페이지의 내용을 나타내도록 작성하고, 입력한 문장을 결과에서 확인합니다.

3. 이미지가 필요하면 이미지 URL 값을 입력합니다. 값을 제공한 경우에만 이미지 요소가 결과에 추가됩니다. 이미지 URL을 입력하지 않았다면 그 요소가 보이지 않는 것이 입력 조건에 따른 결과입니다.

4. 페이지 URL이나 사이트 이름을 사용할 때에는 각 값을 해당 입력란에 넣습니다. 페이지 URL을 제공하면 URL 요소가 들어가고, 사이트 이름을 제공하면 사이트 이름 요소가 포함됩니다. 두 값 모두 선택 입력이므로 페이지에 필요할 때만 작성합니다.

5. 타입과 로케일을 확인합니다. 별도 값을 지정하지 않은 상태에서 마크업이 생성되면 타입에는 website, 로케일에는 en_US가 사용됩니다. 다른 값을 쓰려면 생성하기 전에 각 입력란에 직접 지정합니다.

6. 생성을 실행한 뒤 결과의 제목 요소와 설명 요소를 먼저 살펴봅니다. 추가 값을 넣었다면 이미지, URL, 사이트 이름 요소가 각각 나타나는지도 확인합니다. 특수문자가 포함된 입력은 이스케이프된 형태로 보이는지 결과에서 점검합니다.

7. 원하는 정보가 빠졌다면 해당 입력값을 보완하고 다시 생성합니다. 제목이 없는 상태에서는 선택 항목을 늘려도 마크업이 만들어지지 않으므로 제목부터 확인합니다. 결과를 사용할 때에는 입력한 값과 생성된 마크업의 대응 관계를 차례로 비교합니다.

생성된 마크업 읽기

결과에 제목 요소와 설명 요소가 함께 있으면 제목 값이 있는 상태에서 기본 마크업이 생성된 것으로 볼 수 있습니다. 이 두 요소는 제목이 있는 생성 결과에서 확인해야 할 기본 항목입니다. 설명을 입력했는지, 문장이 원하는 페이지 정보를 나타내는지는 결과의 내용과 함께 직접 살펴봅니다.

이미지, URL, 사이트 이름 요소는 입력 여부에 따라 달라집니다. 이미지 URL을 넣지 않았는데 이미지 요소가 나타나지 않는 것은 누락이라기보다 선택값을 제공하지 않은 결과입니다. 페이지 URL과 사이트 이름도 같은 방식으로 판단하며, 필요한 값만 넣었는지 확인합니다.

타입과 로케일을 비워 둔 결과에서는 website와 en_US를 기준값으로 확인할 수 있습니다. 다른 지역이나 타입을 표시하려는 경우에는 생성 전에 값을 지정해야 합니다. 결과에 들어간 문자는 HTML 이스케이프된 형태일 수 있으므로 원문과 글자 표현이 달라 보여도 입력값이 변환되어 반영된 것인지 비교합니다.

이 결과는 입력한 메타데이터를 바탕으로 마크업을 조립한 것입니다. 따라서 결과만 보고 URL이나 이미지 리소스의 유효성, 특정 서비스에서의 표시 방식까지 판단하지는 않습니다. 사용 목적에 맞는 값을 넣었는지와 필요한 요소가 조건에 맞게 포함되었는지를 나누어 확인하면 결과의 범위를 분명하게 이해할 수 있습니다.

사용 예시

온라인 상점의 봄 신상품 페이지에 사용할 Open Graph 메타데이터를 준비합니다.

온라인 상점의 봄 신상품 페이지에서 제목을 ‘봄 신상품’, 설명을 ‘새로운 계절 상품을 확인하세요’로 입력합니다. 이미지 URL과 페이지 URL, 사이트 이름을 함께 제공한 뒤 마크업을 생성하고 기본 요소와 선택 요소의 포함 여부를 확인합니다.

제목 요소와 설명 요소가 포함됩니다. 이미지 URL, 페이지 URL, 사이트 이름을 입력했다면 각각의 선택 요소가 추가되며, 타입과 로케일을 비워 두었다면 website와 en_US가 사용됩니다.

제한 사항

• 제공한 메타데이터를 바탕으로 마크업을 조립하는 도구이므로, 결과만으로 URL이나 이미지 리소스의 유효성 또는 특정 서비스의 표시 방식을 확인할 수 없습니다.

자주 발생하는 오류

• 제목을 비운 채 생성을 실행하면 계산은 성공해도 마크업이 나오지 않을 수 있습니다. 제목 값을 먼저 입력한 다음 다시 생성하세요.

자주 묻는 질문

제목을 입력하지 않아도 Open Graph 태그가 생성되나요?

제목 값이 있으면 제목 요소와 설명 요소가 결과에 포함됩니다. 반대로 제목이 비어 있거나 거짓으로 평가되면 계산은 성공해도 생성되는 마크업이 없습니다. 제목을 입력한 뒤 다시 결과를 확인하세요.

이미지 태그는 항상 결과에 포함되나요?

이미지 URL 값을 제공한 경우에만 이미지 요소가 결과에 들어갑니다. 해당 값을 입력하지 않은 결과에 이미지 요소가 없는 것은 선택 입력의 조건과 일치합니다.

타입과 로케일의 기본값은 무엇인가요?

타입을 지정하지 않으면 website가 사용되고, 로케일을 지정하지 않으면 en_US가 사용됩니다. 다른 값을 원한다면 생성 전에 각 입력란에서 직접 정해야 합니다.