안드로이드 링크 미리보기(Open graph) 사용법

페이스북이나 카카오톡에 링크만 공유했을뿐인데, 이미지나 제목, 내용까지 보여주는 걸 다들 보셨을겁니다. 이것을 open graph라고 하는데, 개발할 때도 유용하게 이용할 수 있습니다. 

open graph는 HTML의 head부분에 있는 메타태그를 가져오는 방법입니다. 

요즘 웬만한 페이지에는 메타태그를 가지고 있습니다.

아래는 네이버의 메타태그 부분입니다. 

<meta property="og:***">이라는 부분이 보이시죠? 지금부터 이 부분을 가져오는 코드를 짜보겠습니다. 역시! 쉽습니다^^

카카오톡이나 페이스북처럼 링크가 하나면 불러오는 데 시간이 많이 걸리지 않지만, 저는 데이터 베이스에 많은 링크를 저장해뒀다가 불러오려고 하기 때문에 굉장히 느려집니다. 심지어 어플이 감당하지 못하고 다운먹기도 하죠... 

그럼, 어떻게 해야 많은 양의 링크의 미리보기를 편하게 할까?

생각을 살짝 바꾸면 됩니다! 

굳이 링크를 저장해서 불러올 때 og tag들을 불러올 것인가를 고민해봐야겠죠. 

저는 이것을 애초에 database에 저장하기 전에 og tag를 미리 불러온 다음 저장하는 방법으로 해결하였습니다. 

database에 링크만 저장하는 게 아닌 링크, 타이틀, 이미지, 내용을 저장하는 것이죠.

서론이 길었네요.. OG TAG를 불러오는 코드를 살펴보겠습니다. 

AddActivity.java

@SuppressLint("StaticFieldLeak")
private class JsoupAsyncTask extends AsyncTask {
    String this_url;

    JsoupAsyncTask(String get_url) {
        this_url = get_url;
    }

    @Override
    protected void onPreExecute() {
        super.onPreExecute();
    }

    @Override
    protected Void doInBackground(Void... params) {
        try {
            Connection con = Jsoup.connect(this_url);
            Document doc = con.get();
            Elements ogTags = doc.select("meta[property^=og:]");
            if (ogTags.size() <= 0) {
                return null;
            }
            // 필요한 OGTag를 추려낸다
            for (int i = 0; i < ogTags.size(); i++) {
                Element tag = ogTags.get(i);

                String text = tag.attr("property");
                if ("og:title".equals(text)) {
                    get_Title = tag.attr("content");
                } else if ("og:image".equals(text)) {
                    get_Image = tag.attr("content");
                } else if ("og:description".equals(text)) {
                    get_Description = tag.attr("content");
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    protected void onPostExecute(Void result) { // doInBackground 작업 후 작업
        add_title.setText(get_Title);
        add_des.setText(get_Description);
        //피카소로 사진 로딩 속도 개선
        try {
            Picasso.get().load(get_Image).into(add_image);
        } catch (IllegalArgumentException i) {
            Log.d("checkings", "사진이 없음");
        }
    }
}

HTML에 접속할 때는 항상 thread나 asyncTask를 이용하세요! 안그러면 어플이 다운먹을지도 몰라요 ㅠㅠ 

이 중에 og tag를 불러오는 중요한 부분은 try 부분입니다.

Connection con = Jsoup.connect(this_url);
Document doc = con.get();
Elements ogTags = doc.select("meta[property^=og:]");
if (ogTags.size() <= 0) {
    return null;
}
// 필요한 OGTag를 추려낸다
for (int i = 0; i < ogTags.size(); i++) {
    Element tag = ogTags.get(i);

    String text = tag.attr("property");
    if ("og:title".equals(text)) {
        get_Title = tag.attr("content");
    } else if ("og:image".equals(text)) {
        get_Image = tag.attr("content");
    } else if ("og:description".equals(text)) {
        get_Description = tag.attr("content");
    }
}

여기서 필요한 ogtag를 추려내면 됩니다. 

og태그의 종류는 

title, 

url, 

image, 

description, 

type, 

site_name 등등 

페이지마다 다양하게 있습니다. 

대부분 가지고 이쓴 태그는 title, url, description 정도이고 나머지는 페이지에 따라 없을 수도 있어요. 

이상 Open graph 사용법을 알아보았습니다^^