Open Graphを使用したソーシャルネットワーク上のクールな共有ページ

私は1つの記事に、すべての主要なソーシャルネットワークで手探りされているページを準備するための短いレシピをまとめることにしました。 このトピックにまったく参加していない人は、まずOpen Graphプロトコルについて読む必要があります 。



Facebook、VKontakte、Classmates、およびGoogle Plusの場合：

<meta property="og:type" content="website"> <meta property="og:site_name" content=" "> <meta property="og:title" content=""> <meta property="og:description" content="."> <meta property="og:url" content="http://example.com/page.html"> <meta property="og:locale" content="ru_RU"> <meta property="og:image" content="http://example.com/img.jpg"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TwitterおよびVKontakteの場合（VKontakteはタイトルのタイトルを選択します。タイトルは以下のコードにあります）：

 <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content=""> <meta name="twitter:description" content="."> <meta name="twitter:image:src" content="http://example.com/img.jpg"> <meta name="twitter:url" content="http://example.com/page.html"> <meta name="twitter:domain" content="example.com"> <meta name="twitter:site" content="@"> <meta name="twitter:creator" content="@...">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Googleplusは通常Open Graphを選択するため、特別なタグを追加する必要はありません。

 <!-- <meta itemprop="name" content=""> <meta itemprop="description" content=""> <meta itemprop="image" content=""> -->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

適切なサイズの画像を選択することが主な問題です。 同じソーシャルネットワーク内であっても、画像が恥知らずに散らばるシナリオがあります。 以前は、画像をトリミングする方法を理解するために特別なテンプレートを使用し、主なものを失わないことを保証しました。







そして、私は彼らが象でどのようにやっているのか見張っていました。







はい、968×504ピクセルは、Facebook 1200×630が推奨する最小値よりも小さくなっています。 しかし、このサイズと比率では、画像はどこにも振りかけられず、見栄えがします。



ちなみに、ソーシャルネットワークはページをキャッシュし、キャッシュをリセットする方法を学ぶまでデバッグ中に夢中になります： VK pages.clearCache 、 Facebook Open Graph Object Debugger 。



コメントで技術を適用する他の微妙さについて教えてください？ 良い共有。