Video is not shared to facebook account - html

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta property="fb:app_id" content="appsid" />
<meta property="og:url" content="http://103.231.125.106/nesos/fblink.jsp" />
<meta property="og:video" content="http://103.231.125.106/nesos/videoappsuser/flowplayer-3.2.18.swf?config={'clip':{'url':'http://103.231.125.106/nesos/videoappsuser/151014150717SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:secure_url" content="https://103.231.125.106/nesos/videoappsuser/flowplayer-3.2.18.swf?config={'clip':{'url':'https://103.231.125.106/nesos/videoappsuser/151014150717SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
Video not playing in same page of facebook

Related

Meta tags in twitter are not working. No preview of website is appearing up there

The meta tags are not working on the twitter
how can I solve this problem
<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">
<meta name="description" content="this is desc">
<!-- facebook -->
<meta property="og:title" content="This is the title">
<meta property="og:description" content="the desc of the webpage">
<meta property="og:image" content="https://via.placeholder.com/1200X630">
<meta property="og:url" content="https://www.facebook.com/">
<!-- twitter -->
<meta property="twitter:card" content="summary">
<meta property="twitter:url" content="https://www.metatags.org/">
<meta property="twitter:title" content="twitter title">
<meta property="twitter:image" content="https://pbs.twimg.com/profile_images/1334493324900700161/qUsiG1DS_mini.jpg">
<meta property="twitter:description" content="twitter this is desc">
<title>Document</title>
</head>
Their debugger shows me something like this
link to the website which i am trying to implement https://jashandeep1659.github.io/meta_tags_in_html/withmeta.html
You should change property to name as shown in the documentation: https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started
<!-- twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://www.metatags.org/">
<meta name="twitter:title" content="twitter title">
<meta name="twitter:image" content="https://pbs.twimg.com/profile_images/1334493324900700161/qUsiG1DS_mini.jpg">
<meta name="twitter:description" content="twitter this is desc">

Open Graph tags rendering but not working on facebook debug

I'm using Next.js + SSG to render my pages, here's what my <Head /> looks like:
<Head>
<title>{title}</title>
<meta name="title" content={`${title} - MySite`} />
<meta name="description" content={description} />
<meta name="og:title" content={title} />
<meta name="og:description" content={description} />
<meta
name="og:image"
content={`${getBaseUrl()}/static/images/logo.png`}
/>
<meta
name="og:image:secure_url"
content={`${getBaseUrl()}/static/images/logo.png`}
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:alt" content="mysite logo image" />
<meta property="og:site_name" content="mysite" />
<meta property="og:url" content={getBaseUrl()} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
The rendered HTML looks like this:
<title>Home</title>
<meta name="title" content="Home - MySite" />
<meta name="description" content="MySite desc" />
<meta name="og:title" content="Home" />
<meta name="og:description" content="MySite desc" />
<meta
name="og:image"
content="https://mysite.so/static/images/logo.png"
/>
<meta
name="og:image:secure_url"
content="https://mysite.so/static/images/logo.png"
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:alt" content="mysite logo image" />
<meta property="og:site_name" content="mysite" />
<meta property="og:url" content="https://mysite.so" />
<meta name="twitter:card" content="summary_large_image" />
But nothing seems to work... Facebook Debug doesn't pick up anything. It says: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Any ideas about what I'm doing wrong?
Live site can be seen here: https://dev.reactive.so
Turns out it was due to the package next-themes needing pages to be conditionally rendered to avoid a theme flicker. Here's a link to the PR if you're interested.

How to play shared video on the same Facebook page instead of a new window

Video shared perfect but video play in new window but I want play video in same Facebook page.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta property="og:video" content="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf?config={'clip':{'url':'http://103.231.125.106/nesos/videoappsuser/150930171515SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:secure_url" content="https://releases.flowplayer.org/swf/flowplayer-3.2.18.swf?config={'clip':{'url':'https://103.231.125.106/nesos/videoappsuser/150930171515SampleVideo_1080x720_1mb.mp4'}}" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

why facebook meta og:image tag is not read properly

I am trying to have a share url feature on facebook. But facebook is not reading the og:image meta tag. It does read the title properly.
what is wrong?
I have put meta tags in head and no meta tag is in body.
Please provide help.
EDIT:
Based on ogp.me, I did include all the required tags but still FB is not reading og:image....please help what is missing??
http://www.itraintowin.com/video/kKU5romNuWg
<!-- for Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />
<!-- for Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- for Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
Fill the content =" ... " according to the content of your page

Recommended Meta Elements?

Setting up a "basic framework" for my website projects, I'm wondering which meta elements are really necessary/recommended? In particular, I'd like to know how to deal with the language attribute(s)!? In the following example, I think sth. is repeated unnecessarily...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="language" content="en" />
<title> Title </title>
<base href="http://www.mydomain.com" />
<meta name="charset" content="utf-8" />
<meta name="content-language" content="en" />
<meta name="language" content="en" />
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
</head>
P.S. "content-language" = "language"?
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Definitely recommended
<meta http-equiv="content-style-type" content="text/css" />
Useless, browsers only support CSS.
<meta http-equiv="content-script-type" content="text/javascript" />
Useless, browsers only support JavaScript.
<meta http-equiv="content-language" content="en" />
Redundant to <html lang="en">
<meta http-equiv="language" content="en" />
Doesn't exist, AFAIK.
<title> Title </title>
Definitely recommended.
<base href="http://www.mydomain.com" />
Depends on how you want your relative links to work, I suppose.
<meta name="charset" content="utf-8" />
<meta name="content-language" content="en" />
<meta name="language" content="en" />
Look like typo's.
<meta name="description" content="description" />
Probably useful.
<meta name="keywords" content="keywords" />
Ignored by every search engine due to widespread abuse.
Use this for HTML 5:
<!DOCTYPE html>
This looks wrong:
<meta name="charset" content="utf-8" />
should probably be this for HTML 5:
<meta charset="utf-8">
That is the new HTML 5-way of setting charset encoding. It is highly recommended to also include the old way:
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
These should be directly after the opening head-tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>The title</title>
</head>
<body>
</body>
</html>