페이스북 '상태 업데이트' 창에 URL 을 등록할때, 페이스북이 친절하게도 해당 URL 의 내용을 긁어와서 붙여줍니다.
이렇게 되도록 하려면 아래와 같은 코드가 해당 웹페이지에 기술되어야 합니다.
그런데 주의할 것이 있지요.
1. 일단 keywords meta 는 글쎄요.. 뭐에 쓰는진 모르겠네요. 일단 기술은 해 보세요.
2. title meta 와 title 태그가 동시에 존재한다면 title meta 의 content 에 기술된 내용이 적용됩니다.
title meta 와 title 태그의 선후 위치에 상관없이 meta 가 먼저 적용된다는 것이죠.
title meta 가 먼저 기술되고 이후에 title 이 기술되든, title 이 먼저 기술되고 title meta 가 나중에 기술되든 상관이 없어요.
만약 title meta 가 기술되지 않았다면 title 태그에 기술된 내용이 적용됩니다.
3. description meta 가 기술되지 않으면 설명 부분은 무시가 됩니다.
title 만으로도 의미전달이 가능하면 description 이 필요없을 수도 있겠지만, 있으면 더 좋져.
4. og:image meta 가 기술되면 기술된 이미지가 페이스북에서 읽혀져요.
그런데, 2개 이상 기술되면, 맨 처음에 기술된 1건만 페이스북이 읽어와요.. ㅠ.ㅠ
og:image meta 가 기술되었는데 이미지가 읽혀오지 않는다구요..?
혹시 content 에 http:// 로 시작하는 URL 을 기술했나 확인해 보세요.
그럼, 여러개의 이미지를 모두 읽어오게 하려면..? og:image meta 를 기술하지 않으면 됩니다.
이때, 페이스북이 인식하는 이미지를 최대 4~5개 까지 읽어옵니다.
html 태그의 background 속성이나, CSS 를 사용하여 background:url('...') 로 기술하면 페이스북이 읽어오지 않습니다.
맨 처음에 기술된 이미지 1개와, a 태그로 둘러싸인 이미지 4개를 읽어오는 것으로 보입니다.
a 태그로 둘러싸인 이미지 4개는 먼저 기술된 순서로 보이구요..
...
<head>
<meta content="제목A" name="title" />
<meta content="설명" name="description" />
<meta content="키워드" name="keywords" />
<meta content="이미지F" property="og:image" />
<title>제목B</title>
</head>
<body>
...
<img src="이미지A" .. /> ...
<a href=".."><img src="이미지B" .. /></a> ...
<a href=".."><img src="이미지C" .. /></a> ...
<img src="이미지D" .. /> ...
<a href=".."><img src="이미지E" .. /></a> ...
<a href=".."><img src="이미지F" .. /></a> ...
<img src="이미지G" .. /> ...
</body>
</html>
위와 같이 기술되면, 맨처음에 기술된 이미지A와..
a 태그로 둘러싸인 이미지B, 이미지C, 이미지E, 이미지F 등, 이렇게 5개를 페이스북이 읽어간다는 것이죠.
아직 정확한 룰은 모르겠어요. 아마도 이러지 않나 싶긴 합니다만..
'Program > WebService' 카테고리의 다른 글
| 웹 발전사.. IE 말고 다른 웹브라우저로 보세요.. (1) | 2012.07.05 |
|---|---|
| ShortenURL 웹서비스 중에 http://vo.to/ 가 가장 나은듯.. (2) | 2011.12.01 |
| 페이스북 좋아요 버튼, 트위터 트윗 버튼 (facebook like , twitter tweet) (0) | 2011.09.21 |
| 페이스북 '페이지 만들기' 어디로 가야 하면요..? 그냥 페이스북 상단 검색창에 '페' 라고 입력해 보세요. (0) | 2011.07.02 |
| 페이스북의 'status 상태' 는 우리말로 '근황' 이라 하는 것이 맞지 않나 싶어요.. (0) | 2011.06.22 |
