기본 태그,링크들

우리가 자주쓰는 기본 태그들의 의미:

No	Blog address	콘텐츠	블로그이름
1	https://blog.ab180.co/posts/open-graph-as-a-website-preview	메타정보	AB180
2	https://nowonbun.tistory.com/517	opengraph 기본태그	명월일지
3	https://ogp.me/	the open graph protocol
4	https://gemma2ee.tistory.com/11	카카오 url 공유할때 og tag,img	개발자인가 디자인어인가
5	https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0	meta tag og
6	https://www.next-t.co.kr/blog/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94-SEO-%ED%85%8C%ED%81%AC%EB%8B%88%EC%BB%ACSEO-%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-OpenGraph-metaogtag-%ED%8A%B8%EC%9C%84%ED%84%B0%EC%B9%B4%EB%93%9C-TwitterCards	meta og tag	테크니컬SEO
7	https://hianna.tistory.com/300	<a>,<p>,<pre>	애나
	https://naradesign.github.io/media-query.html	@media

 

opengraph의 기본 태그

1. og:title - 사이트의 제목 태그

2. og:type - 사이트의 종류 스타일 예) video.movie

3. og:image - 사이트를 나타낼 대표 이미지

4. og:url - 사이트의 대표 url

Copy!

 [소스 보기] 

	<meta property="og:title" content="명월일지" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://nowonbun.tistory.com" />
	<meta property="og:image" content="https://t1.daumcdn.net/cfile/tistory/1935C94C505D9F8B13" />

opengraph의 옵션 태그

1. og:audio - 사이트에 포함되는 오디오 파일 url

2. og:description - 사이트의 설명

3. og:determiner - 문장 시작에 나타나는 단어 선택(?)이라는 것 같은데, 한글과는 관계가 없을 듯 싶네요. 그냥 공란입니다.

4. og:locale - 사이트의 언어 선택입니다. 기본값은 en_US입니다만, 한글의 경우는 ko_KR입니다.

5. og:locale:alternate - 사이트의 다른 언어 종류라는데, 다국적 사이트일 때 적용하는 태그일 듯 싶습니다.

6. og:site_name - 전체 사이트는 title로 표시하면 site_name은 좀 더 세부적인 카테고리 정도의 레벨입니다.

7. og:video - 사이트에 포함되는 비디오 파일 url

Copy!

 [소스 보기] 

	<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
	<meta property="og:description" content="개발 즐겁게 합시다." />
	<meta property="og:determiner" content="the" />
	<meta property="og:locale" content="en_GB" />
	<meta property="og:locale:alternate" content="fr_FR" />
	<meta property="og:locale:alternate" content="es_ES" />
	<meta property="og:site_name" content="Open graph 태그" />
	<meta property="og:video" content="http://example.com/bond/trailer.swf" />

opengraph의 구조 프로퍼티

og:오브젝트:url - 이미지 혹은 비디오, 오디오 오브젝트의 경로

og:오브젝트:secure_url - SSL(HTTPS)의 경로

og:오브젝트:type - 오브젝트 타입의 종류

og:오브젝트:width - 오브젝트 너비

og:오브젝트:height - 오브젝트 높이

og:오브젝트:alt - 오브젝트 설명

Copy!

 [소스 보기] 

	<meta property="og:image" content="http://example.com/ogp.jpg" />
	<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
	<meta property="og:image:type" content="image/jpeg" />
	<meta property="og:image:width" content="400" />
	<meta property="og:image:height" content="300" />
	<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
	<meta property="og:video" content="http://example.com/movie.swf" />
	<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
	<meta property="og:video:type" content="application/x-shockwave-flash" />
	<meta property="og:video:width" content="400" />
	<meta property="og:video:height" content="300" />
	<meta property="og:audio" content="http://example.com/sound.mp3" />
	<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
	<meta property="og:audio:type" content="audio/mpeg" />

저 위 링크를 통해 조사한 것인데 Arrays(배열) 과 Object Types의 경우는 필요가 없을 것 같네요.

예를 들면 music:duration는 음악 파일인 경우 음악 파일의 길이를 표시하는 것같은데, 이게 SNS상에서 표시가 되나? 제가 facebook이랑 twitter에서 시험해 봤는데 이 정보는 공유가 안되네요.

검색 엔진에서 좋은 건가? 개인적으로 좀 이해가 안되서 생략했습니다.

 

여기까지 opengraph에 대해서 조사했는데 많은 분들이 opengraph를 사용하면 검색 최적화가 된다라고 쓰여 있기는 하는데 제가 조사한 google 메뉴얼에는 어디에도 opengraph가 검색 순위에 영향을 준다라고 설명한 글은 없네요.

링크 - https://support.google.com/webmasters/answer/7451184?hl=ko

그러나 확실히 google 검색 랭크에는 다른 평판이 높은 사이트에 얼마나 링크가 되어있는지에 따라 블로그의 순위가 결정된다고 되어있습니다. 즉, opengraph 자체로는 구글 검색 엔진에 미치는 영향은 없지만 여러 SNS에 등록이 되어서 많은 사람들이 그 링크를 타고 오게 되면 2차적으로 구글 검색 순위에 도움이 된다고 할 수 있습니다.

출처: https://nowonbun.tistory.com/517 [명월 일지]

 

example:

기본적으로 웹에 설정해줘야하는 og 메타태그

Naver 블로그, 카카오톡 미리보기 설정

<meta property="og:title" content="콘텐츠 제목" />

<meta property="og:url" content="웹페이지 URL" />

<meta property="og:type" content="웹페이지 타입(blog, website 등)" />

<meta property="og:image" content="표시되는 이미지" />

<meta property="og:title" content="웹사이트 이름" />

<meta property="og:description" content="웹페이지 설명" />

트위터 미리보기 설정

<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />

<meta name="twitter:title" content="콘텐츠 제목" />

<meta name="twitter:description" content="웹페이지 설명" />

<meta name="twitter:image" content="표시되는 이미지 " />

모바일 앱 미리보기 설정

모바일 앱이 존재하는 경우 앱으로 연결 시 노출

<--iOS-->

<meta property="al:ios:url" content=" ios 앱 URL" />

<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />

<meta property="al:ios:app_name" content="ios 앱 이름" />

<--Android-->

<meta property="al:android:url" content="안드로이드 앱 URL" />

<meta property="al:android:app_name" content="안드로이드 앱 이름" />

<meta property="al:android:package" content="안드로이드 패키지 이름" />

<meta property="al:web:url" content="안드로이드 앱 URL" />