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?
Related
I'm using next-share package to share on social medias the data such as {title, description,image url} from database. I have the public API route to fetch those data on the page to be shared. But after sharing the page I'm getting undefined title, description and image not be displayed may be its because those data are fetched from DB.
How can i fix this issue.
Here are the html codes
{
anyUserProfile?.firstName ?
<Head>
<title>
{process.env.NEXT_PUBLIC_DOMAIN_NAME}{' '}
{anyUserProfile?.firstName +
' ' +
anyUserProfile?.lastName +
' Featured Profile'}
</title>
<meta property="og:title" content={anyUserProfile?.firstName +
' ' +
anyUserProfile?.lastName +
' Featured Profile'} />
<meta name="description" property="og:description" content={anyUserProfile?.about} />
<meta property="og:url" content={"https://prompti.com/usercenter/featured/detail/"+anyUserProfile?.userId} />
<meta property="og:image" content={anyUserProfile?.featuredImage?.length>0? anyUserProfile?.featuredImage[0] : ''} />
<meta property="og:type" content="website" />
</Head>
:
<></>
}
anyUserProfile is the object fetched from DB
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 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
Please search google for amirkabir data miners
Check Title and Description for https://adm-co.net
As you can see in page source, google show Amirkabir Data Miners: داده کاوان امیرکبیر instead of داده کاوان امیرکبیر | Amirkabir Data Miners and completely wrong description.
I registered site in Google Webmaster Tools, and Google Analytics and tried anything.
What do i have to do!?
<title>داده کاوان امیرکبیر | Amirkabir Data Miners</title>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="57x57" href="/Content/images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/Content/images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/Content/images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/Content/images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/Content/images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/Content/images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/Content/images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/Content/images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/Content/images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/Content/images/favicons/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/Content/images/favicons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/Content/images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/Content/images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/Content/images/favicons/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#e3e3e3">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="description" content="شرکت داده کاوان امیرکبیر | تولید کننده نرم افزارهای تحت وب، از قبیل حسابداری آنلاین 'کاج سیستم' ، سیستم مدیریت پروژه 'تسک من' و ...">
<meta name="keywords" content="شرکت داده کاوان امیرکبیر,شرکت,داده,کاوان,امیرکبیر,حسابداری, سیستم های تحت وب, برنامه نویسی,حسابداری آنلاین,سیستم های تحت وب, طراحی نرم افزار, adm, amikabir, data, miners, amirkabir data miners, adm (amirkabir data miners), programming, financial, taskman, taskmanager, web application, web, application">
<meta name="language" content="fa">
<meta name="robots" content="all" />
<meta name="rights" content="Copyright © 2015 ADM-CO - All rights reserved">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Many are getting similar kind of issues, Before Google has automatically set the Meta description when it is not presented in the site. It sets the description as per the search query and based on the content in the website.
Now the Google does the same for the Meta Title and Meta Description even though it is presented in the website.