MSN にインライン メディアと埋め込みを表示する方法
HTML とメディア RSS を使用して、記事本文内に画像、ビデオ、スライドショー、ソーシャル埋め込みを適切に表示する方法について説明します。 このガイドでは、MSN でのスムーズなレンダリングを実現するために、サポートされているタグ、メタデータ、および書式設定のベスト プラクティスについて説明します。
この記事の内容
HTML ガイドライン
HTML を使用して、記事の本文フィールド、またはスライド内のスライド画像の説明フィールドを指定できます。 他のフィールドでは使用できません。 HTML を使用する場合に留意すべき一般的なガイドラインはほとんどありません。
- Microsoft インジェスト サービスでは、許可されていないタグが常に削除されます。 タグの内容と子も削除される場合があります。
- Microsoft インジェスト サービスは、インライン スタイルなどのレンダリング エクスペリエンスに影響を与える可能性がある要素から HTML をクリーンすることがあります。
- 発行元は HTML 階層をシンプルに保ち、10 レベルを超える階層が深くリンクされないようにすることをお勧めします。
- 連続する複数の <br> タグを使用しないでください。 <br> 文書の末尾の改行は削除されます。
- <このドキュメントで明示的に説明されていない目的で使用される iframe> は削除されます。
許可される HTML タグ
これらのタグは、アーティクル本文内で許可されます。
- フォント スタイル<b>, <i>, <em>, <strong>
- フォント サイズ<sub>, <sup>, <small>
- 見出し<h1>, <h2>, <h3>, <h4>, <h5>
- リンク<a> - href 値では、HTTPS、HTTP、mailto を使用することをお勧めします。
- 画像<Img>
- テーブル<table>、<th>、<tr>、<td>、<thead>、<tbody>、<tfoot>、<col>、<キャプション>、<colgroup>
- 一覧表示<ol>、 <ul>、 <li>
- グループ化<span>, <div>, <p>, <br>
- 埋め込み<blockquote>、 <iframe> ビデオとサポートされているソーシャル埋め込みでのみ許容されます。
注
一般に、属性は、 <a> の href や <img> の src などの基になる機能によって使用されない限り、すべての要素から削除されます。
制限付き HTML タグ
次のタグは常に受信記事の本文から削除され、コンテンツが拒否される可能性があります。
- <スタイル>
- <script>
- <オブジェクト>
- <param>
- <アプレット>
- <埋め込む>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <図>
- <メディア>
- <div><a href='https://infogram.com' /></div>
- <href='...giphy.com/gifs...'>via GIPHY</a>
画像
画像の配置
<img> または <figure> タグを使用して記事の HTML 本文に画像を追加すると、本文内でその場所が自動的に保持されます。 それ以外の場合、 <media:content> を使用すると、インジェスト サービスによって自動的に選択された場所に画像が配置される可能性があります。 タグに <media:content> 要素の URL と一致する "src" URL がある場合、イメージは 1 回だけ取り込まれます。img タグが配置されている場所に配置されます。
先頭の画像
<img> タグに class="type:primaryImage" を追加することで、特定の画像をプロモーション カードの注目の画像として使用できることをインジェストに通知できます。
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
インライン HTML で画像を表示する
<img> タグ
フィード項目の HTML 本文内で <img> タグを使用する場合は、追加のメタデータを指定できます。 インラインと Media RSS タグの両方で同じ画像 URL にメタデータが指定されている場合、 <media:content> メタデータが常に優先されます。
次の例のように data-*属性を利用することで、すべての画像メタデータを HTML 内にインラインで配置できます。
<content:encoded> <![CDATA[ <p>Article body paragraph 1</p> <img src="http://contoso.com/image.jpg" width="620" height="569" title="Image title" alt="Image alt text" data-portal-copyright="Joe Gargery/Fabrikam Images" data-has-syndication-rights="1" data-license-id="698526" data-licensor-name="Licensor name" data-focal-region="x1:245,y1:145,x2:520,y2:320" /> <p>Article body paragraph 2</p></content:encoded>
<図> タグ
前の例のように、 <img> タグに省略可能なパラメーターを設定することもできます。
<content:encoded> <![CDATA[ <p>Article body paragraph 1</p> <figure> <img src="http://contoso.com/image.jpg" width="620" title="image title" alt="Image alt text"/> <figcaption> Image caption <span class="copyright">Image copyrights</span> </figcaption> </figure> <p>Article body paragraph 2</p></content:encoded>
メディア RSS を使用して画像を表示する
画像メタデータを追加する推奨される方法は、Media RSS <media:content> 要素を使用してイメージ メタデータを指定することです。 既定では、画像は記事の上部に配置されます。
<media:content> 要素をアーティクルの本文内で指定することはできません。 これらは、ルート項目要素 (RSS では <item> または Atom では <entry> ) の直接の子として指定する必要があります。
<!-- REQUIRED: URL must be provided for media elements NOTE: you need to specify medium and set to "image" or "video" depending on the content type --><media:content url="https://contoso.com/image.jpg" type="image/jpeg" medium="image"> <!-- provide image credits (such as original photographer..etc) in this tag--> <media:credit>Joe Gargery/Fabrikam Images</media:credit> <!-- image title --> <media:title>Image1 title</media:title> <!-- use the text tag to specify alt-text --> <media:text>Image1 alt-text</media:text> <!-- to provide focal region information, you may use Microsoft Ingestion namespace as follows --> <mi:focalRegion> <mi:x1>245</mi:x1> <mi:y1>145</mi:y1> <mi:x2>520</mi:x2> <mi:y2>320</mi:y2> </mi:focalRegion> <!-- Following 3 fields are used to specify image rights. If you do not indicate HasSyndicationRights as false, we assume you have the rights.--> <mi:hasSyndicationRights>1</mi:hasSyndicationRights> <mi:licenseId>698525</mi:licenseId> <mi:licensorName>Licensor name</mi:licensorName></media:content>
ビデオ
MSN では、First-Party Player (1PP) とサード パーティ プレーヤー (3PP) の構成がサポートされています。
1PP ビデオ: このシナリオでは、Microsoft インジェスト サービスが MSN サーバーにファイルをダウンロードして格納できるように、ビデオ ファイル URL を指定する必要があります。 1PP ビデオは、MSN ビデオ Player を使用してレンダリングされます。
3PP ビデオ: 3PP ビデオは、プロバイダー固有のプレーヤー (YouTube、DailyMotion など) で再生されます。
HTML でビデオを表示する
1PP
<video> HTML タグを使用して、インライン ビデオを表現できます。
<video id="8172818" title="Video title" poster="https://contoso.com/thumbnail.jpg" data-description="this is a sample inline video" data-portal-copyright="Joe Gargery/Fabrikam Videos"> <source src="https://contoso.com/video.mp4" type="video/mp4"></source> </video>
3PP
YouTube は、 <iframe> 要素を使用してサポートされている唯一の 3PP プレーヤーです。
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
重要
最近の YouTube 側のプラットフォームの変更により、MSN は現在 YouTube の埋め込みをモデレートできません。 その結果、フィードまたは記事 HTML を介して送信されたすべての YouTube 3PP ビデオは、インジェスト中に拒否されます。 この問題はグローバル コンテンツのごく一部に影響しますが、パートナーは YouTube の埋め込みを今後の通知まで使用しないようにする必要があります。 サポートが復元されたら、このガイダンスを更新します。
メディア RSS を使用したビデオの表示
メディア RSS を使用してメディアを埋め込むには、<media:content>要素と<media:group>要素を HTML 本文の外部に配置し、<item> (RSS) 要素または <entry> (ATOM) 要素の直接の子として追加する必要があります。 これらのタグは、記事本文内 ( <content:encoded>内など) 内の HTML コンテンツにラップしたり、組み合わせたりすることはできません。また、インジェスト中は無視されます。
1PP
<!-- REQUIRED: URL must be provided for media elements. It is also used to uniquely identify the video.NOTE: you need to specify medium and set to "image" or "video" depending on the contenttype --><media:content url="https://contoso.com/video.mp4" duration="91" type="video/mp4" medium="video"> <!-- a <guid> may be specified to uniquely identify the video. If not specified, the URL will be used as an identifier. --> <guid>8172818</guid> <!-- video title must be specified. --> <media:title>Video title</media:title> <!-- video image thumnail is required if the video is 3PP (except YouTube) --> <media:thumbnail url="https://contoso.com/image.jpg"/> <!-- provide video attribution in media:credit, recommended format is: Author name/Agency name --> <media:credit>Joe Gargery/Fabrikam Videos</media:credit> <!-- description is used to specify caption text displayed below the video --> <media:description>Video description</media:description></media:content>
YouTube
<media:content type="application/x-shockwave-flash" medium="video" isDefault="true" expression="full" duration="117" url="https://www.youtube.com/v/XnZ_J3l_0z4"> <media:thumbnail url="https://contoso.com/images/thumb14ds12.jpg" /> <media:player url="https://www.youtube.com" /> <media:title>Video title</media:title> <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>
DailyMotion
<media:content type="application/x-shockwave-flash" medium="video" isDefault="true" expression="full" duration="117" url="https://www.dailymotion.com/video/x6qnrdo"> <media:thumbnail url="https://contoso.com/images/thumb60-zTG.jpg" /> <media:player url="https://www.dailymotion.com" /> <media:title>Video title</media:title> <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>
その他
パブリッシャーのブランドがオンボードされている場合は、サポートされている 3PP ビデオ プレーヤーを指定する必要があります。 これらのサポートされている 3PP ビデオ プレーヤーの場合は、すべての 3PP ビデオの <guid> 要素を介して一意のビデオ識別子を指定する必要があります。
<!-- REQUIRED: <guid>, duration, title and description are required fields --><media:content type="application/x-shockwave-flash" medium="video" isDefault="true" expression="full" duration="117" url="https://contoso.com/videos/268192"> <guid>268192</guid> <media:thumbnail url="https://contoso.com/images/thumb14ds12.jpg" /> <media:player url="https://contos.com/player" /> <media:title>Video title</media:title> <media:description>Video description</media:description> <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>
ビデオのクローズド キャプション
<media:subtitle> 要素を使用して、W3C Timed Text 形式に基づいて外部の時間指定テキスト形式ファイルを提供できます。 現在サポートされているのは TTML 1 のみです。
<media:content type="video/mp4" duration="75" medium="video" url="https://contoso.com/videos/sports.mp4"> <.....> <.....> <media:subTitle type="application/ttml" lang="en" href="https://www.contols.org/closedcaptions.ttml"
/></media:content>
サポートされているリンク
ビデオ ファイルは、MP4 ファイルなどの承認済みの形式で保存する必要があります。 Filesは、自分の Web サイトからの場合、または AWS などのサーバーでホストされている場合に許可されます。
サポートされていないリンク
Dropbox リンク、YouTube リンクなどは、RSS フィードではサポートされていません。 これは、ビデオが"ゲート"であるため、これらのリンクから簡単にもすぐにプルすることもできないためです。
関連項目
"プロバイダーからの詳細" モジュールは、ブランドが記事ページとギャラリー ページに 3 つのコンテンツ リンクを表示し、ブランド独自の Web サイトにリンクする機会です。
このモジュールに表示される 3 つのリンクを決定するには、次の 2 つの方法があります。
- 最新の記事を自動的に設定する – Microsoft は、ブランドから提供されたフィードの間で取り込んだ最新のストーリーへのリンクを表示します。 標準リンクは既定で使用されますが、指定されていない場合、Microsoft はこのリンクを表示しません。
- 記事に関連するリンクを提供 する - これを行う方法の例については、以下を参照してください。 このオプションが選択されている場合は、フィード内の各コンテンツ 項目に少なくとも 3 つの関連リンクを指定する必要があります。
関連リンクは、ルート レベルのフィード項目 (アーティクルとギャラリー) に子要素として追加できます。 一般に、パブリッシャーは msn の "関連" セクションに表示するために、少なくとも 3 つのリンクを指定する必要があります。
すべての関連リンクとインライン リンクは、HTTPS スキームを使用することをお勧めしています。
Atom でを指定するには、パブリッシャーは要素を使用するだけです。 また、Atom 名前空間を宣言した後、RSS で同じ要素を使用する必要もあります。 さらに、サムネイル 画像が必要であるため、次の例に示すように、 <media:> 要素と組み合わせることができます。
<item><…> <!-- Example of specifying 3 Related Links. In RSS, you need to use of the atom namespace `xmlns:atom="http://www.w3.org/2005/Atom"` --> <!-- REQUIRED: links must have valid "href" and "title" attribute values.--> <atom:link rel="related" type="text/html" href="https://contoso.com/news_1.html" title="New IRS proposal"> <!-- REQUIRED: you must provide a thumbnail image with the link --> <media:thumbnail url="https://contoso.com/image2.jpg" /> </atom:link> <atom:link rel="related" type="text/html" href="https://contoso.com/news_2.html" title="New IRS proposal"> <media:thumbnail url="https://contoso.com/image2.jpg" /> </atom:link> <atom:link rel="related" type="text/html" href="https://contoso.com/news_3.html" title="New IRS proposal"> <media:thumbnail url="https://contoso.com/image3.jpg" /> </atom:link></item>
スライド ショー
インライン スライドショーを記事の本文 HTML 内の特定の場所に追加するには、一連の<figure>要素のコンテナーとして特別なコンストラクト <div class="Gallery">を使用します。
<div class="slideshow"> <!-- use <cite> to specify an authro for the inline slideshow. If not specified, the parent article's author will be assigned --> <cite>Slideshow author</cite> <!-- use <title> to specify an authro for the inline slideshow. If not specified, the parent article's title will be assigned --> <title>Slideshow title</title> <!-- each figure element is considered a separate slide --> <figure> <img src="https://v3spec.msn.com/image1.jpg" title="slide 1 title" /> <figcaption>slide 1 caption <span class="copyright">slide 1 image copyrights</span> </figcaption> </figure> <figure> <img src="https://v3spec.msn.com/image2.jpg" title="slide 2 title" /> <figcaption>slide 2 caption <span class="copyright">Joe Gargery/Fabrikam Images</span> </figcaption> </figure></div>
メディア RSS を使用してスライドショーを表示する
インラインのスライドショーを追加するには、 <media:group> 要素を <item の子として使用します> スライドショーを埋め込む必要があります。
記事内のインライン メディア RSS スライドショーの場所は、インジェスト サービスによって決定されます。 スライドショーを特定の場所に配置する必要がある場合は、代わりに HTML を使用します。
<!-- Note that in the case of embedded slideshow, the slideshow title and description will be the same as the parent article's--><media:group> <!-- Inline slideshow title. If you do not specify a title for inline slideshow, the slideshow will be ingested with the same title of the parent article. --> <media:title>Slideshow title</media:title> <!-- Inlien slideshow author. Similar to title, if not specified, the slideshow will have the same author of the parent article. --> <media:credit role="author">Slideshow author</media:credit> <!-- in this case you can provide consecutive slides in <media:content> --> <media:content url="https://contoso.com/image1.jpg" type="image/jpeg" medium="image"> <!-- provide iamge attribution in media:credit, recommended format is: Photographer name/Agency name --> <media:credit>Joe Gargery/Fabrikam Images</media:credit> <!-- REQUIRED: slide title must be provided in the following element --> <media:title>Slide 1 title</media:title> <!-- alt text for slide image--> <media:text>Slide 1 alt-text</media:text> <!-- slide caption should be added in the description element. HTML is allowed in this field when you wrap content within a CDATA structure. --> <media:description> <![CDATA[ <p>Slide 1 description</p> ]]> </media:description> <!-- additional slide image metadata --> <mi:focalRegion> <mi:x1>245</mi:x1> <mi:y1>140</mi:y1> <mi:x2>540</mi:x2> <mi:y2>320</mi:y2> </mi:focalRegion> <mi:hasSyndicationRights>1</mi:hasSyndicationRights> <mi:licenseId>698525</mi:licenseId> <mi:licensorName>Licensor name</mi:licensorName> </media:content> <media:content url="https://contoso.com/image2.jpg" type="image/jpeg" medium="image"> <media:credit>Joe Gargery/Fabrikam Images</media:credit> <media:title>Slide 2 title</media:title> <media:text>Slide 2 alt-text</media:text> <media:description>Slide 2 description</media:description> <mi:focalRegion> <mi:x1>110</mi:x1> <mi:y1>312</mi:y1> <mi:x2>615</mi:x2> <mi:y2>520</mi:y2> </mi:focalRegion> <mi:hasSyndicationRights>1</mi:hasSyndicationRights> <mi:licenseId>698526</mi:licenseId> <mi:licensorName>Licensor name</mi:licensorName> </media:content></media:group>
ソーシャル メディアの埋め込み
記事 HTML 本文には、次のソーシャル埋め込みを挿入できます。
- X
- Infogram
- Spotify
- 繁栄
- Google マップ
- Giphy
- TikTok
各ソーシャル プロバイダーが推奨する標準の埋め込みコードを使用して、埋め込み内容が記事に保持されていることを確認できます。
ソーシャル埋め込みソースを指すすべての URL は厳密に https である必要があります。それ以外の場合は拒否されます。
埋め込みの例を次に示します。
X
<blockquote class="twitter-tweet" align="center" width="350"> <p>We’re more optimistic than ever. The future will surprise the pessimists </p>— Bill Gates (@BillGates) <a href="https://twitter.com/BillGates/status/835506391339139073">February 25, 2017</a></blockquote>
Facebook (iframe)
<iframe frameborder="0" allowTransparency="true" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcontosoice%2Fposts%2F1651549695142860&width=500"></iframe>
Facebook (div)
<div class="fb-post" data-href="https://www.facebook.com/contosoice/posts/1651549695142860" data-width="500" data-show-text="true"> <blockquote cite="https://www.facebook.com/contosoice/posts/1651549695142860"> <p>Post title</p>Posted by <a href="https://www.facebook.com/contosoice/">Contoso ICE</a> on <a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a> </blockquote></div>
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BjxlMSWnMJ-/" data-instgrm-version="8"> <div> <p><a href="https://www.instagram.com/p/BjxlMSWnMJ-/">Imagine putting 864 servers at the bottom of the ocean #ProjectNatick.</a></p> <p>A post shared by <a href="https://www.instagram.com/microsoft/"> Microsoft</a> (@microsoft) on <time>Apr 22, 2018 at 11:47am PDT</time></p> </div></blockquote>
Pinterest ピン ウィジェット
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Pinterest ボード ウィジェット
<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/official-news/"></a>
Pinterest プロファイル ウィジェット
<a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/"></a>
Infogram (レスポンシブ)
<script id="infogram_0_df4c17c3-3940-4434-b3a5-b1ef8ac096ef" title="Infogram: 8 years of greatness (infographic)" src="https://e.infogram.com/js/dist/embed.js?qlT" type="text/javascript"></script>
Infogram (iframe)
<iframe src="https://e.infogram.com/df4c17c3-3940-4434-b3a5-b1ef8ac096ef?src=embed" title="Infogram: 8 years of greatness (infographic)" width="700" height="8127" scrolling="no" frameborder="0" style="border:none;" allowfullscreen="allowfullscreen"></iframe>
Spotify
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Flourish (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Flourish (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Google マップ
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13981.509066247283!2d-81.79698!3d28.827626!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x64c6defc49caa9f0!2sLake-Sumter%20State%20College!5e0!3m2!1sen!2sus!4v1587812382206!5m2!1sen!2sus" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Giphy
<iframe src="https://giphy.com/embed/1WbNcJYD0ruf8nl3OJ" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<blockquote class="reddit-card" data-card-created="1596039116"> <a href="https://www.reddit.com/r/microsoft/comments/hg4uiq/microsoft_official_support_thread/"> Microsoft: Official Support Thread</a> from <a href="http://www.reddit.com/r/microsoft">r/microsoft </a></blockquote><script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>
TikTok
<blockquote class="tiktok-embed" cite=https://www.tiktok.com/@testtest/video/microsoft_official_support_thread data-video-id="microsoft_official_support_thread" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@bronniiieee" href=https://www.tiktok.com/@bronniiieee rel="noopener noreferrer">@billgates</a> <p>Who is THAT?</p> <a target="_blank" title="Music" href=https://www.tiktok.com/music/microsoft_official_support_thread rel="noopener noreferrer">Microsoft: Official Support Thread</a> </section></blockquote>