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>
Related
when i click to popup window they open and
when i choose image from my local system
the popup window automatically close and also i can't see the onchange event respose in content.js
were is the code
popup.html
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<input id='inputfile' type='file' name='inputfile' ><br>
</body>
<script src="content.js" defer="defer"></script>
</html>
content.js
document
.getElementById("inputfile")
.addEventListener("onChange", getFileNameWithExt);
function getFileNameWithExt(event) {
const name = event.target.files[0];
console.log(name);
}
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 recently took a course on back-end web developing.
As the title says, I don't get how can I use a header partial for the whole website but have different titles for each page. (because is included in the tag)
Is there any trick?
1st) In your Express route:
app.get("/", function(req, res){
res.locals.title = "Abel's Home Page"; // THIS LINE IS KEY
res.render("home.ejs");
});
2nd) In your views/home.ejs file:
<% include partials/header.ejs %>
3rd) In your views/partials/header.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title> <!-- THIS LINE IS KEY -->
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" href="../logo_sm.png" type="image/x-icon">
</head>
<body>
Each page that includes the partial is free to pass data to said partial through parameters. See here for an example.
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
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.