각 SNS로 공유시 이미지,타이틀,요약 등의 전달은 각 SNS에 맞게 전달해야 합니다. 값을 만들어 전달해야 하는 방식이 있고 페이지에 있는 meta tag를 가지고 알아서 가져가는 경우로 나뉘는데 트위터,페이스북 같은 경우 meta tag를 그대로 가지고 갑니다.

라이믹스 순정 상태에서는 트위터용 meta tag는 만들어지지 않습니다. 페이스북의 경우 og 태그를 참조하는데 og 태그까지는 잘 만들어지고 있구요.

*라이믹스 최신버전에서는 이제 트위터 meta tag도 생성이 됩니다.

그럼 추가로 트위터용 meta tag를 생성하는 방법은 크게 무료,유료로 나눌 수 있습니다.

무료는 공개배포되고 있는 애드온을 이용하는 방법이고 유료로는 SEO pro 모듈을 구입해서 사용하는 것 입니다.

저는 배포된 애드온을 사용하는데 이 애드온은 사실 고쳐져야 할 부분이 많아서 그냥 사용하기에는 부족한 면이 있어 제가 고친 내역을 그대로 여기에 올려 보겠습니다.

https://xe1.xpressengine.com/index.php?mid=download&package_id=22753315

배포되고 있는 트위터 카드 애드온은 위 주소에서 받을 수 있습니다.

문제점

• 문서 내부에 첨부된 파일의 첫번째를 트위터용 이미지 주소로 가져오기 때문에 이미지가 아닌 파일이 처음으로 첨부된 경우 무용지물입니다.
• og 태그는 라이믹스에서 이미 만들어지고 있는데 애드온에서 추가적으로 만들어 중복? 같은 상황입니다.

위 문제를 포함해서 개선을 아래와 같이 해보았습니다.

• 첨부된 이미지에서 선택하여 실제 이미지의 주소를 제공
• og 태그 만들어내는 코드는 삭제
• 사이트 부제 입력도 추가해서 메인 페이지에서는 사이트명 - 사이트부제 의 제목으로 태그 생성
• 첨부된 이미지 중 커버이미지(대표이미지)로 선택된 것이 있다면 그 이미지를 우선 적으로 선택

대략 위와 같은 정도로 수정된 소스를 보여드리니 수정하실 분은 수정해서 혹은 귀찮으신 분들은 원본자료를 그대로 사용하시되 완벽하지 않다는 점은 감안 하셔야 합니다. 

그리고 제가 고친 것도 섬네일을 고려하지 않았기 때문에 첨부된 이미지가 없고 섬네일이 있는 경우는 사이트 대표 이미지가 전달되니 이점은 참고적으로 알려드립니다.(원작 자체가 첨부파일 기준)

sns_card.addon.php 

<?php
/**
 * sns_card.addon.php
 * User: canto87
 * Date: 2014/06/02
 * Time: 21:15
 */
if(!defined('__XE__')) exit();

if($called_position == "before_display_content"){
$doc_src = Context::get('document_srl');
$module_info = Context::get('module_info');
$hi =' - ';
if($doc_src){
$oDocumentModel = &getModel('document');
$oDocument = $oDocumentModel->getDocument($doc_src);
$title = cut_str(strip_tags($oDocument->get('title')),70,'').$hi.$module_info->browser_title.$hi.$addon_info->sitename;
$content = cut_str(trim(preg_replace('/\s\s+/', ' ',strip_tags($oDocument->get('content')))),200,'');
$file_list = $oDocument->getUploadedFiles();;
if($file_list){
foreach($file_list as $key => $val){
$filename = strtolower($val->uploaded_filename);
if((substr($filename,-3)=='gif' || substr($filename,-3)=='jpg' || substr($filename,-3)=='peg' || substr($filename,-3)=='png')){
  $uploaded_images[] = $val->uploaded_filename;
  if($val->cover_image == 'Y') $dcover_images[] = $val->uploaded_filename;
}
}
if(count($dcover_images)>0){
$filePath = getFullUrl('').str_replace('./','',$dcover_images[0]);
}else{
$filePath = getFullUrl('').str_replace('./','',$uploaded_images[0]);
}
}else{
$filePath = $addon_info->logo;
}
}
else
{
$meta_des = $module_info->meta_description;
$site_module_info = Context::get('site_module_info');
$_is_indexmodule = ($site_module_info->module_srl === $module_info->module_srl);
if($_is_indexmodule){
$title = $addon_info->sitename.$hi.$addon_info->sitename_sub;
}else{
$title = $addon_info->sitename.$hi.$module_info->browser_title;
}
$filePath = $addon_info->logo;
if($meta_des){
$content = $meta_des;
}else{
$content = $addon_info->content;
}
}

$meta = '<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="'.$addon_info->twitter.'">
<meta name="twitter:title" content="'.$title.'">
<meta name="twitter:description" content="'.$content.'">
<meta name="twitter:image:src" content="'.$filePath.'">
<meta name="twitter:domain" content="'.$addon_info->sitename.'">';
Context::addHtmlHeader($meta);
}

info.xml

<?xml version="1.0" encoding="UTF-8"?>
<addon version="0.2">
<title xml:lang="ko">Twitter Card 애드온</title>
<description xml:lang="ko">
트위터로 게시글을 보낼 시 요약 정보등을 표시해주는 Meta Tag를 만들어줍니다.
트위터 개발자 페이지에서 사이트 도메인을 등록할 필요가 있습니다.
</description>
<version>1.1</version>
<date>2014-06-02</date>
<author email_address="canto87@naver.com" link="http://canto.btool.kr">
<name xml:lang="ko">Canto</name>
</author>

<extra_vars>
<title xml:lang="ko">설치 설명서 :: <a href='http://www.xpressengine.com/index.php?mid=download&package_id=22753315' target='_blank' >트위터 설정 관련 설명서</a></title>
<var name="twitter">
<title xml:lang="ko">Twitter ID</title>
<description xml:lang="ko">사이트 전용 트위터가 존재한다면 트위터 아이디를 적어주세요
예) @twitter ( @ 까지 포함 해 주셔야 합니다. )
</description>
</var>
<var name="logo">
<title xml:lang="ko">사이트 로고</title>
<description xml:lang="ko">첨부파일(이미지)이 없을 경우 요약글의 이미지를 본 이미지로 대체 합니다.
(http://를 포함한 해당 이미지의 전체 주소를 적어주세요.)
</description>
</var>
<var name="sitename">
<title xml:lang="ko">사이트 이름</title>
<description xml:lang="ko">사이트 이름을 설정 할 수 있습니다.
</description>
</var>
<var name="sitename_sub">
<title xml:lang="ko">사이트 부제</title>
<description xml:lang="ko">사이트 부제를 설정 할 수 있습니다.
</description>
</var>
<var name="content">
<title xml:lang="ko">사이트 내용</title>
<description xml:lang="ko">게시글이 아닐 경우 ( 위젯,문서페이지 ) 표시할 사이트 설명을 적어주세요.
</description>
</var>
</extra_vars>
</addon>

1.커버이미지가 있다면 커버이미지로 선택된 이미지

2.커버이미지 선택이 없다면 첨부 된 이미지 파일 중 첫번째 이미지

3.이미지가 없다면 애드온 설정에 입력한 대표이미지 주소의 이미지

제목부분

문서페이지 : 문서제목 - 브라우저타이틀 - 사이트명(애드온설정에 입력된 사이트명)

서브페이지 : 사이트명(애드온 설정) - 브라우저 타이틀

메인페이지 : 사이트명(애드온설정)  - 사이트부제 (애드온 설정)

소스보고 고치셔서 사용하실 분들 고쳐서 사용해보세요.

트위터카드 메타소스가 이상이 없는지 확인해 볼때 아래 url에 검사해 보고 싶은 url을 넣고 검사해 볼 수 있습니다.

https://cards-dev.twitter.com/validator