时间戳

首页 > 解决方案 > 为什么开放图形标签不适用于百里香模板

thymeleaf - 为什么开放图形标签不适用于百里香模板

问题描述

我在 thymeleaf 页面中添加了开放图形元标记。当我尝试分享我的页面时 - 看起来标签不存在。

我的页面（部分）代码

<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      prefix="og: //ogp.me/ns#">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link th:href="@{/css/app.css}" rel="stylesheet"/>
        <title th:text="${'pageTitle'}">Title</title>

        <meta property="og:type"  content="article" />
        <meta property="og:url"   th:content="${'https://my_site_url'}" />
        <meta property="og:title" th:content="${'pageTitle'}" />
        <meta property="og:description"   th:content="${'DESCRIPTION'}" />
        <meta property="og:image"         th:content="@{'https://pp.vk.me/c629531/v629531034/3172e/xEBYyER1WE4.jpg'}" />
    </head>

    <body>
        <section class="base fullpage">
            <div class="fullpage__content">
                <div th:replace="component/partial/header"/>
                <div th:replace="${page}"/>
            </div>
            <div class="fullpage__bottom">
                <div th:replace="component/partial/footer"/>
            </div>
        </section>
        <div th:replace="component/auth/auth"/>
    </body>
</html>

还有我的分享页面按钮

<a th:href="@{'https://twitter.com/share?url=' + ${full_my_Page_Url}}" rel="canonical" target="_blank" class="c-article-socials__link twitter-share-button">
  <div class="icon">
     <img th:src="@{/img/icons/social/tw-h.svg}" alt="">
  </div>
</a>

我希望通过打开的图形标签共享预览卡，但现在它是空的，我可以共享，但没有信息。只有来自共享按钮的链接，但没有来自 og 前缀信息的信息

更新 我生成的 HTML 头代码如下所示：

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="/css/app.css" rel="stylesheet">
 <title>Статья</title>

 <meta property="og:type" content="website">
 <meta property="og:url"content="https://localhost:8443/articles/instruction/2">
 <meta property="og:title" content="Статья">
 <meta property="og:description" content="DESCRIPTION">
 <meta property="og:image" content="/cmsstatic/img/posts/image_5.png">
</head>

标签： thymeleaffacebook-opengraph

解决方案

推荐阅读