I fallow this post: https://www.jwplayer.com/blog/publish-your-videos-to-facebook-with-a-jw-player/
To play my audio files on facebook, and I saw who youtube set the properties on metatag section for that action.
And I try to replicate that on my audio file, and work only with a static html, but when I make a dinamic file with express, nodejs and amazon doenst work
If you check the debug tool for facebook says that og:image is wrong or missing: https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Ftest.mdzradio.com%2Faudios%2Fshare%2F577ea3e92a3ab98c18b037db
But if you see the source of the URL the metatag is there.
<!DOCTYPE html>
<html>
<head>
<title>Title of the audio</title>
<meta charset="UTF-8">
<meta property="og:site_name" content="Diario" />
<meta property="og:url" content="{{http}}/audios/share/{{audioId}}" />
<meta property="og:title" content="{{name}}" />
<meta property="og:image" content="https://s3-sa-east-1.amazonaws.com/radiomdz/images/FpR1JTd.jpg" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<meta property="og:description" content="{{description}}" />
<meta property="og:type" content="video" />
<meta property="og:video:url" content="https://s3-sa-east-1.amazonaws.com/radiomdz/audios/player.swf?file={{audioUrlEncoded}}&autostart=true" />
<meta property="og:video:secure_url" content="https://s3-sa-east-1.amazonaws.com/radiomdz/audios/player.swf?file={{audioUrlEncoded}}&autostart=true" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="40" />
<meta property="og:video:url" content="https://s3-sa-east-1.amazonaws.com/radiomdz/audios/player.swf?file={{audioUrlEncoded}}&autostart=true" />
<meta property="og:video:secure_url" content="https://s3-sa-east-1.amazonaws.com/radiomdz/audios/player.swf?file={{audioUrlEncoded}}&autostart=true" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="40" />
<meta property="og:video:tag" content="Radio" />
<meta property="og:video:tag" content="Radio" />
<meta property="og:video:tag" content="Radio" />
<meta property="fb:app_id" content="595357037290855" />
<script src="{{http}}/js/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="iWIqfC4bEJIOjuvBSzixtN4wOjqOgHz7FKSbrwVpCbc=";</script>
</head>
<body>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "{{audioUrl}}",
image: "{{audioImage}}",
height: 40,
width: 400,
autostart: true
});
</script>
</body>
</html>
You can test with this URL:
http://ec2-52-35-59-187.us-west-2.compute.amazonaws.com/audios/share/577ea3e92a3ab98c18b037db
Related
When I am using meta og tags in _app.js its work with static content,
but when I use it on other pages like index , its not showing anything in whatsapp sharing
_app.js
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="user-scalable=no" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="HandheldFriendly" content="true" />
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content={"https://connectme.co.in"} />
<meta property="og:image" content={"https://images.wsj.net/im-515021?width=860&height=573"} />
</Head>
its working here but in index page
its not working
index.js
<Head>
<meta property="og:title" content={profileData?.name} />
<meta property="og:image" content={profileData?.profileimg} />
<meta property="og:type" content="profile.image" />
<meta property="og:url" content={"https://connectme.co.in/"} />
</Head>
profileData is ny dynamic data
now its not working here ,
when i Checked in facebook debugger its showing this
Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
I have created a simple Node.js web server to render html content on the browser. Specifically the html contains meta tags for sharing on social media to enable URL preview as soon as the website link is shared on social platforms like FB,Twitter,LinkedIn,etc.
I have already added open graph tags for sharing in the returned html content. It works well for FB and Twitter but gives an error with "We encountered a server error while trying to inspect the URL." as response.
Here is code of server with a dummy endpoint.
const express=require('express');
const app = express();
require('dotenv').config();
app.get('/dummy',(req,res)=>{
res.send(`
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dummy Endpoint</title>
<meta name="type" content="article" />
<meta name="title" content="Dummy Endpoint"/>
<meta name="description" content="Used for testing"/>
<meta name="image" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="Dummy endpoint"/>
<meta property="og:description" content="Used for testing"/>
<meta property="og:image" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta property="og:image:secure_url" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta property="og:image:secure" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="450" />
<meta name="twitter:title" content="Dummy Endpoint"/>
<meta name="twitter:description" content="Dummy endpoint"/>
<meta name="twitter:image" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta name="twitter:card" content="summary"/>
`)
})
app.listen(process.env.PORT || 5000, () => {
console.log('Server started at '+process.env.PORT)
});
Website link : https://whispering-woodland-66525.herokuapp.com/dummy (Page is empty, check head section in Inspect)
Response of Facebook sharing debugger : https://developers.facebook.com/tools/debug/?q=http%3A%2F%2Fwhispering-woodland-66525.herokuapp.com%2Fdummy
Response of LinkedIn Post Inspector : https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fwhispering-woodland-66525.herokuapp.com%2Fdummy
I have tried out refreshing the Post Inspector page multiple time and adding a dummy query parameter to the the url in the Post Inspector to prevent serving of cached content, but things are not working out.
I am unable to understand if there is something wrong or missing in the code or is it a problem with LinkedIn web crawlers.
I believe LinkedIn Post Inspector is expecting a complete HTML document. Consider wrapping your metadata into the header of the document. Try returning:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dummy Endpoint</title>
<meta name="type" content="article" />
<meta name="title" content="Dummy Endpoint"/>
<meta name="description" content="Used for testing"/>
<meta name="image" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="Dummy endpoint"/>
<meta property="og:description" content="Used for testing"/>
<meta property="og:image" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta property="og:image:secure_url" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta property="og:image:secure" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="450" />
<meta name="twitter:title" content="Dummy Endpoint"/>
<meta name="twitter:description" content="Dummy endpoint"/>
<meta name="twitter:image" content="https://www.kindpng.com/picc/m/252-2524695_dummy-profile-image-jpg-hd-png-download.png"/>
<meta name="twitter:card" content="summary"/>
</head>
</html>
I'm following this tutorial: http://www.thymeleaf.org/doc/layouts.html (got to Thymeleaf Layout Dialect section).
In there you can find an example:
<!DOCTYPE html>
<html>
<head>
<!--/* Each token will be replaced by their respective titles in the resulting page. */-->
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
...
</head>
<body>
<!--/* Standard layout can be mixed with Layout Dialect */-->
<div th:replace="fragments/header :: header">
...
</div>
<div class="container">
<div layout:fragment="content">
...
</div>
<div th:replace="fragments/footer :: footer">© 2014 The Static Templates</div>
</div>
</body>
</html>
Footer and header are replaced by th:replace tag in above example, while <head> has <title> tag in layout file.
Basically, I want to replace whole <head> tag with th:replace.
Therefore, I have:
My layout file:
<!DOCTYPE html>
<html>
<head th:replace="/html/components/head :: head">
</head>
<body>
<div layout:fragment="content">
</div>
...
<div th:replace="/html/components/footer :: footer" />
</body>
<html>
My content file:
<!DOCTYPE html>
<html layout:decorator="/html/layouts/layout">
<head>
<title>My content title</title>
</head>
<body>
<div layout:fragment="content">
...
</div>
</body>
</html>
And finally my /html/components/head.htm file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="head">
<meta charset="utf-8" />
<title layout:title-pattern="$CONTENT_TITLE">Layout Title should be replaced by Content Title!</title>
...
</head>
<body>
</body>
</html>
Content is alright. Footer and head are included (replaced) from files as expected but page title is blank!
I get:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
...
What's wrong?
Finally, I've found a way to achieve what I wanted.
In layout file <title> tag must stay. All other tags I grouped with <object> tag and annotated it as follows:
<head>
<title layout:title-pattern="$CONTENT_TITLE">Layout Title will be replaced by Page Title!</title>
<object th:include="/html/components/head :: head" th:remove="tag" />
</head>
In my html/components/head.htm file I had to remove <title> tag so it won't be duplicated after include.
<head th:fragment="head">
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
This way head fragment is included in <object> tag and thanks to th:remove="tag" <object> tag gets removed and my final HTML output is:
<head>
<title>My content title</title>
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
Obviously, I removed NO TITLE TAG HERE message too, once I got it working.
I think I found a slightly less verbose way to for using th:replace and th:fragment together, e.g. to include common <head> metadata and static resource includes in your pages.
Put the th:remove="tag" in the fragment definition, so you don't have to repeat the th:remove="tag" everytime including it.
fragment_head.html
<thymeleaf xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
th:fragment="head" th:remove="tag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" th:href="#{/css/vendor/bootstrap.min.css}"/>
</thymeleaf>
mypage.html
<head>
<thymeleaf th:replace="fragment_head :: head" />
</head>
You can replace whole head tag.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="pl" th:replace="fragments/head :: head">
</head>
<body>
...
</body>
</html>
resources/templates/fragments/head.html:
<head lang="pl">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<link href="../static/css/mycss.css"
th:href="#{css/mycss.css}" rel="stylesheet" media="screen"/>
</head>
Can anyone tell me how it is possibile that the following layout in a Rails 4 app
# app/views/layout/login.html.erb
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>PIPPO</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<link href="/assets/login.css" media="all" rel="stylesheet" />
<script src="/assets/login.js"></script>
<%= csrf_meta_tags %>
</head>
<body>
<div class="main-content">
<%= yield %>
</div>
</body>
</html>
With the following controller
class SessionsController < ApplicationController
layout 'login'
...
def destroy
Session.find(session[:id]).close
reset_session
respond_to do |format|
flash[:success] = t('sessions.logout')
format.html { redirect_to login_url }
end
end
end
and routes
...
get 'login', to: 'sessions#new', as: 'login'
get 'logout', to: 'sessions#destroy', as: 'logout'
...
produces the following HTML once I click on <%= link_to 'logout', logout_path %>?
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>PIPPO</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<link href="/assets/application.css" media="all" rel="stylesheet" />
<script src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="l9+umk+wjpXY4UFiKEeuQkGgMvjbbZ2uDxyJHowTJFo=" name="csrf-token" />
</head>
Am I missing anything here? It is two days I'm trying to figure this out.
Why is it using the head from the main layout instead of the one in login?
Thanks for your help.
UPDATE - Forgot to mention my log file states:
Rendered sessions/new.html.erb within layouts/login (1.4ms)
As per the layout name given in the question, i.e.,
app/views/layout.login.html.erb
There are couple of things wrong here:
layouts should be placed in app/views/layouts folder
File name should be login.html.erb and not layout.login.html.erb
In your case, Rails could not find login.html.erb in app/views/layouts, it rendered the default layout app/views/layouts/application.html.erb.
This is a part of what is in the <head> of every single page, and is therefore downloaded by the user every single time they load a page - most of them don't even affect browsers:
<meta name="keywords" content="long list of keywords here" />
<meta name="description" content="Site's description here" />
<meta name="language" content="en_uk" />
<meta name="robots" content="nofollow" />
<meta name="application-name" content="Site name" />
<meta name="msapplication-tooltip" content="Site description" />
<meta name="msapplication-starturl" content="http://example.com/" />
<meta name="msapplication-navbutton-color" content="#004000" />
<meta name="msapplication-task" content="name=Do something;action-uri=http://example.com/page1;icon-uri=http://example.com/img/icon/action1.ico" />
<meta name="msapplication-task" content="name=Do something;action-uri=http://example.com/page2;icon-uri=http://example.com/img/icon/action2.ico" />
<meta name="msapplication-task" content="name=Do something;action-uri=http://example.com/page3;icon-uri=http://example.com/img/icon/action3.ico" />
<meta name="msapplication-task" content="name=Do something;action-uri=http://example.com/page4;icon-uri=http://example.com/img/icon/action4.ico" />
<meta name="msapplication-task" content="name=Do something;action-uri=http://example.com/page5;icon-uri=http://example.com/img/icon/action5.ico" />
<meta property="og:title" content="Site name (Again!)" />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://example.com/" />
<meta property="og:image" content="http://example.com/img/ads/square3.png" />
<meta property="og:site_name" content="Site name (AGAIN!)" />
<meta property="fb:admins" content="FB UID" />
<meta property="og:description" content="Site descripion (AGAIN!)" />
As you can see there's even some redundant properties because different scrapers use different things. And that's without any Google Plus1 button, or any other sharing site besides Facebook...
Is there any way to tidy this up? Maybe I could have it so that they only appear on the frontpage and then is there any way to tell anything that actually wants the meta info that it can be found there?