facebook share 할때 description을 잘못가져가는 경우.

요즘 소셜 공유 기능이 대세다, 
그 기능을 붙이는 것은 소셜 api와, 또 여러 블로그, 카페등 인터넷에서 많이 도움이 되는 글들을 찾아볼수 있다.
이번에 소셜공유 버튼을 붙이다 보니, facebook share를 할때, 정보를 잘못읽어가는 경우가 자주 생겨서 여기저기 찾다가 답이 된ㄴ 글을 http://akrabbestari.blogspot.com/2011/01/facebook-share-wrong-description-by.html 에서 찾았다.

facebook share에서는 기본적으로 description meta tag에서 해당 정보를 찾아보고, 해당 정보가 없을경우, 페이지내에서 최소 120자 이상의 글을 가지고 있는 첫번째 paragraph(p tag)를 찾아서 거기에 있는 내용으로 공유 텍스트를 입력해준다는것이다.
(그 p tag안에 있는 내용은 tag를 포함하지 않아야 한다.)

암튼, facebook share를 할때 정확한 정보를 facebook에서 찾아갈수 있도록 하기 위해서는
1. description meta tag를 이용하거나,
2. p tag 안에 html tag가 없는 내용을 120자 이상 넣어주면 된다.(단, 필요에 따라서는 display:none을 처리해서 감춰줘도 된다. 난 이렇게 했다.^^)

둘중 하나만 해줘도 제대로된 정보를 facebook이 읽어갈수 있다.

META TAG에 대해서 알아보자.

- META TAG (메타태그) -

META TAG를 사용한다는 것은 자신의 문서를 남에게 보여주는 일정형식이 있는데 그것에 대한 정보

를 나타낼때 사용을 하는 것입니다. 그러므로 개인이나 가족의 홈페이지로서 어떤 특정인들만의 방문

만을 목적으로 했다면 구태여 사용하지 않아도 지장은 없습니다. 그러나 각종 검색엔진에서 검색로봇

이 당신의 홈페이지를 찾아서 나타나게 해주려면은 META TAG 의 사용은 필연적일수 밖에 없습니다.

즉 홈페이지의 홍보와 자사의PR을 위한다면 META TAG의 역활이 가장 크다고 할것입니다.

또한 여러분이 계정에 올려놓은 홈을 다른 계정으로 옮겼을 시에도 자동으로 이동한 홈으로 가게

해주는 것도 바로 이 META TAG 를 사용한것입니다. META TAG<HEAD>~~~~</HEAD>

사이에 넣어주면 되는것입니다.

<HTML>

<HEAD>
<TITLE>SAVER의 META TAG 강좌</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
<META HTTP-EQUIV="refresh" CONTENT="10; URL="이동할 홈주소">
<META NAME="Description" CONTENT="홈페이지의 정의">
<META NAME="Keyword" CONTENT="당신의 홈페이지 키워드">
<META NAME="Author" CONTENT="제작자 이름">
</HEAD>

<BODY>
문서의 내용이 들어가는곳.
</BODY>
</HTML>

위의 META TAG 의 각각의 역활에 대해서 설명을 하도록 하겠습니다.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">


이 테그는 한글 전용으로 나타남을 뜻하는 것입니다.IE의 경우는 이것이 정해지면 다른 언어는 깨져

보이는 경우가 있는데 브라우저에서 한글표현이 자유롭도록 만들어주는 태그입니다.여러분의 홈에도

당연히 들어가는 것이 좋습니다. 참고로 CHARSET=ISO-8859-1은 영어권 전용을 의미합니다.

<META HTTP-EQUIV="refresh" CONTENT="10; URL="이동할 홈주소">


웹페이지를 방문 하다보면 주로 첫화면에서 많이 나오는 상황인데 일정한 시간이 지나면 마우스

를 클릭하지 않아도 다음 페이지로 넘어가는걸 많이 보셨을 것입니다. 그러한 경우에 사용하는 태그

입니다. 여기서는 10초가 지나면 지정한 URL 로 이동을 하게 되는것입니다. 이외에도 이테그는 여러

분이 무료계정을 사용하시다가 다른 계정으로 옮겨갈경우 또는 도메인이 바뀌어서 기존의 도메인에서

바뀐 도메인으로 이동할때도 사용되는 테그 입니다.

<META NAME="Description" CONTENT="홈페이지의 정의">


이테그는 그렇게 많이 사용되지는 않으나 알아두시는 것도 괜찮을 것으로 봅니다. 홈의 가장 핵심이

되는 단어를 넣어주시면 됩니다. 예를 들어 홈페이지 강좌 사이트라고 했을때 가장 핵심이 되는 단어

는 무엇일까요? HTML SCHOOL 이런 단어를 넣어주면 될까요? 저는 도메인 네임을 적어넣었습니다.

여러분은 여러분홈에 맞는 주제어를 찾아서 넣어주시면 됩니다.

<META NAME="Keyword" CONTENT="당신의 홈페이지 키워드">


META TAG 중에서 가장 중요한 태그라고 보시면 됩니다. 검색로봇이 웹페이지에 접근했을 때 홈페

이지가 어떤 내용을 다루고 있나를 알게 해 주는 역할을 합니다. CONTENT="~" 부분에 여러분의

홈페이지를 나타내는 키워드를 되도록 이면 많이 입력해 주시기 바랍니다.많을수록 좋습니다.

다다익선이 여기에 해당되는 단어입니다.CONTENT 안에 핵심어들을 콤마로 나열해 주면 됩니다.

예 : HTML,JAVA,CGI,CSS,홈페이지,프로그래밍,등등.

<META NAME="Author" CONTENT="제작자 이름">


이테그는 홈을 만든 본인의 이름이나 예명등을 넣어주면 됩니다.

웹 출판을 한다면 보다 많은 META TAG가 있습니다만은 META TAG의 필요성은 이정도만 아셔도

되리라 봅니다. 홈페이지를 만드신다면 최소한 위의 META TAG정도는 넣어주시기 바랍니다.

출처 : Tong - 까비천사님의 tag/css통