我正在开发一个博客页面,其中每个博客都可以通过
访问http://<domain>.com/blogs?id=2344
如果我复制此链接并粘贴在LinkedIn,Facebook等社交媒体平台上,我想显示缩略图,标题和简短描述以及帖子。 post div看起来如下
<div id="10002" name="div_post" class="post row" categoryname="Business"><div class="container-fluid"><div class="row post-header"><div class="col-sm-3 col-md-2 col-xs-5 hidden-xs text-center pull-right bbrown"><div class="profile_pic"><div class="pretty_alias" id="avatar_10001"><h3 class="hiddens to_curve top"><span class="char char0"><div>k</div></span><span class="char char1"><div>g</div></span><span class="char char2"><div>r</div></span><span class="char char3"><div>l</div></span><span class="char char4"><div>a</div></span></h3><h3 class="bottom"><span class="id id0"><div>3</div></span><span class="id id1"><div>8</div></span><span class="id id2"><div>3</div></span><span class="id id3"><div>7</div></span><span class="id id4"><div>5</div></span><span class="id id5"><div>6</div></span></h3></div></div><span class="col-sm-12 text-center bbrown"><h6 class="text-capitalize usertitle"></h6></span></div><h1 style="margin-left:0.5em">Post heading</h1><h6 style="margin-left:1.6em" class="poststamp">March 10th 2016</h6></div></div><div class="container-fluid"><div class="row post-content"><div class="col-xs-11 col-sm-12"><div class="pull-right" style="width:50%;margin-left:20px;"><div class="row"><img class="img-responsive" src="http://thissite.com/post_img_10002_1.jpg"></div></div>Content </a><br> </div></div></div><div class="container"><div class="row"><h6 style="margin-left:0.5em"> <span class="badge">Business</span></h6></div></div></td></tr></tbody></table></span></div></div></div></div></div></div>
其他密切相关的博客将显示在此博客下方。在LinkedIn脉冲中可以看到非常相似的行为。唯一的区别是我们使用查询字符串来获取帖子。
非常感谢任何帮助。
答案 0 :(得分:2)
请检查:http://ogp.me/
标题,图像等的一个例子......
<meta property="og:title" content="Facebook Open Graph META Tags"/>
<meta property="og:image" content="https://blog.com/img/facebooklogo.png"/>
<meta property="og:site_name" content="John Smith Blog"/>
<meta property="og:description" content="Facebook's Open Graph protocol allows for web developers to add description" />
您可能应该更改模板以提供这些标记。