<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
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">
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.
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" />
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
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>