MSN에 인라인 미디어 및 포함을 표시하는 방법
HTML 및 Media RSS를 사용하여 문서 본문에 이미지, 비디오, 슬라이드 쇼 및 소셜 포함을 올바르게 표시하는 방법을 알아봅니다. 이 가이드에서는 MSN에서 원활한 렌더링을 보장하기 위해 지원되는 태그, 메타데이터 및 서식 지정 모범 사례를 간략하게 설명합니다.
이 문서의 내용
HTML 지침
HTML을 사용하여 슬라이드 쇼에서 아티클의 본문 필드 또는 슬라이드 이미지 설명 필드를 지정할 수 있습니다. 다른 필드에서는 허용되지 않습니다. HTML을 사용할 때 유의해야 할 몇 가지 일반적인 지침은 다음과 같습니다.
- Microsoft Ingestion Services는 항상 허용되지 않는 태그를 제거합니다. 태그 내용 및 자식도 제거될 수 있습니다.
- Microsoft Ingestion Services는 인라인 스타일과 같은 렌더링 환경에 영향을 줄 수 있는 요소에서 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> 은 비디오 및 지원되는 소셜 포함에만 허용됩니다.
참고
일반적으로 특성은 img>의 및 src의 href와 같은 기본 기능에서 사용되지 않는 한 모든 요소에서 <<> 제거됩니다.
제한된 HTML 태그
다음 태그는 항상 들어오는 아티클의 본문에서 제거되며 콘텐츠가 거부될 수 있습니다.
- <스타일>
- <스크립트>
- <개체>
- <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>
- <a href='... giphy.com/gifs...'>GIPHY</a를 통해>
이미지
이미지 배치
img> 또는 <그림> 태그를 사용하여 문서의 HTML 본문에 <이미지를 추가하면 자동으로 본문 내에서 해당 위치가 유지됩니다. 그렇지 않으면 media:content>를 사용하는 <경우 이미지가 Ingestion Services에서 자동으로 선택한 위치에 배치될 수 있습니다. 태그에 media:content> 요소의 <URL과 일치하는 "src" URL이 있는 경우 이미지는 한 번만 수집되고 img 태그가 배치되는 위치에 배치됩니다.
선행 이미지
img> 태그에 class="type:primaryImage"를 추가하여 프로모션 카드 특정 이미지를 추천 이미지로 사용할 수 있음을 수집에 <알릴 수 있습니다.
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
인라인 HTML을 사용하여 이미지 표시
<img> 태그
피드 항목의 HTML 본문 내에서 img> 태그를 <사용할 때 추가 메타데이터를 제공할 수 있습니다. 인라인 및 미디어 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의 항목> 또는 <Atom의 항목> )의 직속 자식으로 지정해야 합니다.
<!-- 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 Ingestion Services가 파일을 다운로드하고 MSN 서버에 저장하기 위해 비디오 파일 URL을 제공해야 합니다. 1PP 비디오는 MSN 비디오 Player를 사용하여 렌더링됩니다.
3PP 비디오: 3PP 비디오는 공급자별 플레이어(예: YouTube, DailyMotion 등)에서 재생됩니다.
HTML을 사용하여 비디오 표시
1PP
비디오> 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를 사용하여 비디오 표시
Media RSS <media:content> 를 사용하여 미디어를 포함하려면 및 <media:group> 요소를 HTML 본문 외부에 배치하고 (RSS) 또는 <entry> (ATOM) 요소의<item> 직계 자식으로 추가해야 합니다. 이러한 태그는 아티클 본문 내의 HTML 콘텐츠(예: 내 <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 시간 제한 텍스트 형식에 따라 외부 시간 제한 텍스트 형식 파일을 제공할 수 있습니다. 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 자체 웹 사이트에서 온 경우 또는 AWS와 같은 서버에서 호스트되는 경우 허용됩니다.
지원되지 않는 링크
Dropbox 링크, YouTube 링크 등은 RSS 피드에서 지원되지 않습니다. 이는 비디오가 '게이트'되므로 해당 링크에서 쉽게 끌어올 수 없고 즉시 끌어올 수 없기 때문입니다.
관련 링크
"공급자로부터 더 많은 것" 모듈은 브랜드가 아티클 및 갤러리 페이지에 세 개의 콘텐츠 링크를 표시할 수 있는 기회이며, 이는 브랜드의 웹 사이트에 연결됩니다.
이 모듈에 표시되는 세 가지 링크를 결정하는 방법에는 두 가지가 있습니다.
- 최신 문서를 자동으로 채웁니다 . Microsoft는 브랜드에서 제공하는 피드 간에 수집한 최신 스토리에 대한 링크를 표시합니다. 기본적으로 정식 링크를 사용하지만 제공되지 않으면 Microsoft에서 이 링크를 표시하지 않습니다.
- 문서와 관련된 링크 제공 – 이 작업을 수행하는 방법에 대한 예제는 아래를 참조하세요. 이 옵션을 선택한 경우 피드의 각 콘텐츠 항목과 관련된 링크를 3개 이상 제공해야 합니다.
관련 링크를 루트 수준 피드 항목(문서 및 갤러리)에 자식 요소로 추가할 수 있습니다. 일반적으로 게시자는 msn의 "관련" 섹션에 표시되도록 3개 이상의 링크를 제공해야 합니다.
모든 관련 및 인라인 링크는 HTTPS 체계를 사용하는 것이 좋습니다.
Atom에서 를 지정하기 위해 게시자는 요소를 사용하기만 하면 됩니다. 또한 Atom 네임스페이스를 선언한 후 RSS에서 동일한 요소를 사용해야 합니다. 또한 썸네일 이미지가 필요하므로 다음 예제와 같이 미디어:> 요소와 <결합할 수 있습니다.
<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>
슬라이드쇼
특수 구문 <div class="Gallery"> 를 일련의 <그림> 요소 컨테이너로 활용하여 문서의 본문 HTML 내의 특정 위치에 인라인 슬라이드 쇼를 추가할 수 있습니다.
<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> 요소를 슬라이드 쇼를 포함하려는 항목>의 <자식으로 사용합니다<.
문서 내의 인라인 미디어 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>
핀터레스트 핀 위젯
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
핀터레스트 보드 위젯
<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>