I added open graph meta tags to my thymeleaf page.
When I try to share my page - it looks like tags absent.
My page (partially) code
<!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>
And my share page button
<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>
I expected share preview card if full by open graph tags, but now it is empty, I can share, but haven't information. Only the link from the share button, but no info from og prefix info
UPDATES
My generated HTML head code looks like:
<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>
Related
I have a fragment for the head tag, and from within this I would like to call another fragment for my styles and scripts.
templates/fragments/commonHead.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonHead(title)">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="~{fragments/styles :: styles}"></div>
<div th:replace="~{fragments/scripts :: scripts}"></div>
<title th:text="${title}"></title>
</head>
templates/fragments/styles.html
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="styles" th:remove="tag">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link type="text/css" th:href="#{/css/normalize.css}" rel="stylesheet"/>
<link type="text/css" th:href="#{/css/style.css}" rel="stylesheet"/>
</div>
templates/fragments/scripts.html
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="scripts" th:remove="tag">
<script src="https://cdn.jsdelivr.net/npm/axios#1.1.3/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</div>
And this is how I am calling the common head fragment.
templates/schedule.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/commonHead :: commonHead('Schedule')}"></head>
<body>
----
But when I do this, there are no errors, but the generated html does not complete the head tag. There must be some issue, but I have no indication what is wrong. Is it not possible to do this? I have tried both with <div th:replace="~{fragments/styles :: styles}"></div> and <div th:replace="~{styles :: styles}"></div> (same for scripts) in case it doesn't need the directory when the fragment is in the same folder.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
EDIT:
After further troubleshooting here, it seems like it is completely overlooking the fragments in commonHead. If I intentionally call something with the wrong name (like <div th:replace="~{fragmentsX/stylesX :: stylesX}"></div>) I get no errors, and of course the fragment is not included.
It seems like the issue was with having the head tag in my commonHead fragment. When I changed that to div (with th:remove="tag" so that the div didn't show up in the html), then it worked fine.
Only change was made to templates/fragments/commonHead.html, final version is below.
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="commonHead(title)" th:remove="tag">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="~{fragments/styles :: styles}"></div>
<div th:replace="~{fragments/scripts :: scripts}"></div>
<title th:text="${title}"></title>
</div>
I made Rails app and released.
I set ogp and twitter card by using meta-tags gem.
However,Twitter Cards Validator could not find any meta tags.
The browser shows codes blow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美味しい和菓子が見つかるメディア | MOMIJI</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="美味しい和菓子が見つかるメディア">
<meta name="keywords" content="和菓子, スイーツ, momiji">
<link rel="canonical" href="https://momiji.work/articles">
<meta property="og:title" content="MOMIJI">
<meta property="og:description" content="美味しい和菓子が見つかるメディア">
<meta property="og:type" content="website">
<meta property="og:url" content="https://momiji.work/articles">
<meta property="og:image" content="http://momiji.work/assets/wa_1.jpg">
<meta property="og:site_name" content="MOMIJI">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MOMIJI">
<meta name="twitter:description" content="美味しい和菓子が見つかるメディア">
<meta name="twitter:image" content="http://momiji.work/assets/wa_1.jpg">
<meta name="twitter:site" content="#Justin0370">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="jcjt5ya59ZrydFwnxiBcOdi7w3O5sXXSe6QXktFwt6uygvwi/DYmaTgV0yx0HbP/P8l1Zvsz5x5APEjlzsfE5A==" />
<link rel="stylesheet" media="all" href="/assets/application-c4248fae82b61852d60924641256d5953280f16c38ed2795e77c3a303f6fa588.css" data-turbolinks-track="true" />
<script src="/assets/application-0d8e513de520a20d78d2ba43d84d1c021d3937e16f681fee552500eb92297b4e.js" data-turbolinks-track="true"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Twitter Card Validator shows
INFO: Page fetched successfully
WARN: No metatags found
If you can know why my app can't show twitter card, answer this question, please.
require 'open-uri'
require 'json'
#result = JSON.parse(open(URI.parse(url)).read)
757: unexpected token at '<!DOCTYPE html> <html lang='en'> <head><script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script> <title>Fundly | Search </title> <meta charset='utf-8'> <meta content='initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width' name='viewport'> <script src="//cdn.optimizely.com/js/3536001.js" type="text/javascript"></script> <meta content="authenticity_token" name="csrf-param" /> <meta content="V3GRiKIwWG9+WxN7VsiNtqOnkWu1CkuutIqJ00CQLrQ=" name="csrf-token" /> <meta name='description'> <meta content='noindex' name='robots'> <!-- Facebook OpenGraph metadata --> <meta content='Search' property='og:title'> <meta content='website' property='og:type'> <meta content='https://fundly.com/search' property='og:url'> <meta content='http://fundly.com/assets/logos/v2/fundly_logo_vertical_lockup.png' property='og:image'> <meta content='Fundly' property='og:site_name'> <meta content='Start Your Search' property='og:description'> <meta content='148669528535835' property='fb:app_id'> <!-- End Facebook OpenGraph metadata --> <link href="//doapv6pcsx1wa.cloudfront.net/assets/favicon_heart-ac3d0cee1ff7eb05cfec822b455dc319.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link href="//fonts.googleapis.com/css?
i have created a theme in themeroller and used like this in my app
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="assets/css/jquery.mobile.1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
On first load, the new theme is used, but when i login to the app and logout, the old default blue theme appears, why is this?
Do not use jQuery Mobile's default CSS file. Instead use jQuery Mobile's structure CSS file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- YOUR CUSTOM THEME CSS -->
<link rel="stylesheet" href="your_custom_theme.css" />
<!-- JQUERY STRUCTURE CSS -->
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
I am using the facebook like button on a facebook app page. When a user likes a page only the url is posted to their wall.
I have tried the following
<meta property="og:title" content="my content" />
<meta property="og:image" content="my content"/>
<meta property="og:description" content="my content">
<meta property="og:type" content="product">
<meta property="og:url" content="my content">
<meta property="og:site_name" content="my content">
<meta property="fb:app_id " content="APPID">
alongside
<meta name="title" content="mycontent" />
<meta name="description" content="mycontent" />
<link rel="image_src" type="image/jpeg" href="mycontent"/>
The app is written is rails. Has any one got a solution to this.
Don't forget the Open Graph namespace:
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" lang="en" style="overflow:hidden;">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# <?php echo AppInfo::appNamespace(); ?>: http://ogp.me/ns/fb/<?php echo AppInfo::appNamespace(); ?>#">
...
Use the Facebook Open Graph Debugger to check your site.