【问题标题】:iOS10 Messages Link Preview ImageiOS10 消息链接预览图
【发布时间】:2016-12-23 11:48:42
【问题描述】:

任何 iOS10 Beta 测试人员都知道 Messages 是否使用类似于 Facebook Open Graph 的语法来设置元描述和图像等内容?

我正在建立一个网站,并希望在 iOS10 启动时为它做好准备。

以下是我所说的类型:

<!-- Facebook Meta -->
<meta property="og:title" content="Site | Title of Page" />
<meta property="og:image" content="http://www.domain.com/im-content/social-post-images/facebook image.png" />
<meta property="og:url" content="http://www.domain.com" />
<meta property="og:site-name" content="Site | Title of Page"/>
<meta property="og:type" content="website" />
<meta property="og:description" content="Here is a description of my site that will show up in the Facebook card." />

这是我要控制的图像/信息:

【问题讨论】:

    标签: ios facebook facebook-opengraph ios10 twitter-card


    【解决方案1】:

    至少在使用Open GraphTwitter Card

    演示

    Open Graph

    标记:

    <meta property="og:image" content="https://www.j-26.com/assets/facebook.jpg"/>
    

    预览:


    Twitter Card

    标记:

    <meta name="twitter:image" content="https://www.j-26.com/assets/twitter.jpg"/>
    


    值得注意的发现

    我使用 Twitter Card 和 Open graph 测试了this page,iOS 似乎更喜欢 Open Graph。在测试页面上,Twitter Card 标记放置在 Open Graph 标记之前并且用于 Twitter Card 的图像小于在 Open Graph 中使用的图像。尽管尺寸较小且位置较早,iOS 还是选择显示 Open Graph 中的图像。

    【讨论】:

    • 非常感谢,约翰!非常感谢您的帮助:)
    • 您是否设法通过 SSL 进行此操作?我的 http og:image 标签适用于原始 http,但任何 https 图像都不会加载,即使我使用 og:image:secure_url
    • 你的答案有错别字 - 推特卡片标记应该写成 twitter:image 而不是 og:image - 让我困惑不已。
    • 好收获。现在修复它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-02-04
    • 2014-07-20
    • 1970-01-01
    • 1970-01-01
    • 2018-12-22
    • 2018-06-13
    相关资源
    最近更新 更多