https://qwerty.work/tags/ogp/ Recent content in Ogp on qwerty.work Hugo -- gohugo.io ja-JP Fri, 16 Mar 2012 01:20:02 +0900 https://qwerty.work/post/2012/03/facebook/ Fri, 16 Mar 2012 01:20:02 +0900 https://qwerty.work/post/2012/03/facebook/ <p>自分のブログをシェアしたり、されたときにあまり表示されて欲しくない画像がサムネイルで表示されたりすることがありますが、その画像を意図的に指定する方法があるようです。</p> <p>OGP （Open Graph Protocol）といわれるものを、～に追加することでできるようで、以下の一行を加えるだけでできます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;meta</span> <span style="color:#a6e22e">property=</span><span style="color:#e6db74">&#34;og:image&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;http://指定したい画像のパス&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span></code></pre></div><p>今回、指定した画像はこれ↓</p> <p><img class="gallery-image" data-flex-basis="240px" data-flex-grow="100" height="128" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2012/03/facebook/images/1331825183_blog.png" width="128">  </p> <p>でも、上記だけでは内部的に情報不足で、Facebookにおいては下記６つが必須なようです。</p> <ul> <li>og:title</li> <li>og:type</li> <li>og:image</li> <li>og:url</li> <li>og:site_name</li> <li>fb:admins or fb:app_id</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;meta</span> <span style="color:#a6e22e">property=</span><span style="color:#e6db74">&#34;og:title&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;その記事のタイトル&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;meta</span> <span style="color:#a6e22e">property=</span><span style="color:#e6db74">&#34;og:type&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;blog&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;meta</span> <span style="color:#a6e22e">property=</span><span style="color:#e6db74">&#34;og:image&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;http://指定したい画像のパス&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;meta</span> <span style="color:#a6e22e">property=</span><span style="color:#e6db74">&#34;og:url&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;http://シェアするURL&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;meta</span> <span style="color:#a6e22e">property=</span><span style="color:#e6db74">&#34;og:site_name&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;サイト名&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;meta</span> <span style="color:#a6e22e">property=</span><span style="color:#e6db74">&#34;fb:admins&#34;</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">&#34;1234567890&#34;</span><span style="color:#f92672">/&gt;</span> </span></span></code></pre></div><p>最後のfb:adminsの設定でfacebookのユーザID</p> <p> </p> <p>以下のサイトでは、シェアした際にFacebookが取得する情報をあらかじめ確認をすることや、足らない情報などを表示することができます。</p> <p> </p> <p>OGP （Open Graph Protocol）については以下のサイトが参考になります。</p>