I've been attempting to implement the new Facebook open graph features with my flash app. My swf is calling the JavaScript function I have on my page (tested with the simple alert()), however I don't see the post going through on my timeline nor am I getting the response alert(). I've also tested my website with the Facebook object debugger and it tells me that the og:url, og:type, and og: title properties are required, but not present(even though they are in my code).
<meta name="fb:app_id" content="<%=appId%>" />
<meta property="og:type" content="MYNAMESPACE:Game Achievement" />
<meta property="og:title" content="GaveAchievementTitleHere" />
<meta property="og:image" content="https://www.example.com/image.jpg" />
<meta property="og:description" content="description" />
<meta property="og:url" content="https://www.example.com/index.aspx"/>
<meta property="game:points" content="42" />
<meta property="game:secret" content="1" />
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
function postAction(namespace,actionName,objectName,url)
{
//alert("postAction("+namespace+","+actionName+"."+objectName+","+url+")");
FB.api('/me/'+namespace+':'+actionName+
'?'+objectName+'='+url+'&access_token='+<%=Access_Token%>,'post',
function(response)
{
if (!response || response.error)
{
alert('Error occured');
}
else
{
alert('Post was successful! Action ID: ' + response.id);
}
});
};
</script>
Check that you have "App Domain" defined in your Application basic settings, and that your OpenGraph object url is within this domain.
(I had this kind of issue and setting the AppDomain fixed it. By the way, for an achievement Facebook uses "game.achievement" as object type)
Related
In my Next.js app I'm trying to insert og meta tags with dynamic content on a product page. So the content of the meta tags will change based on the product data fetched from server.
I am fetching product data using getServerSideProps and passing product data to page component as props.
export const getServerSideProps = wrapper.getServerSideProps(
store => async (context) => {
const response = await fetch(url, {
method: 'GET',
});
const data = await response.json();
return {
props: {
host: context.req.headers.host,
product: data.product
}
}
}
)
First Approach
I tried to insert meta tags directly on my product page component within <Head> component. Here meta tags even with static conetnt are not showing in page source.
const Product = ({product}) => {
return (
product ?
<>
<Head>
<title>{product.title}</title>
<meta name="description"
content={product.description}/>
<meta property="og:title" content={product.title}/>
<meta property="og:type" content="video.movie"/>
<meta property="og:url" content={`${props.host}/products/${product.slug}`}/>
<meta property="og:description" content={product.description}/>
<meta property="og:image" content={product.thumbnail}/>
</Head>
<Course/>
</> : null
);
};
Second Approach
return (
<Html lang="en">
<Head>
{/*<meta property="og:image" content="https://static.onlinevideobooks.com/abed1e5658b3ad23c38c22646968e4f2/files/media/images/2022/04/5b0645b9-ab03-4233-b5f3-86b092d4062b/conversions/cad47d2beb9143eab3d65ea4a75b0b0e-1280x720.webp" />*/}
{/*<title>your keyword rich title of the website and/or webpage</title>*/}
<meta name="description"
content="description of your website/webpage, make sure you use keywords!"/>
<meta property="og:title" content="short title of your website/webpage"/>
<meta property="og:type" content="video.movie"/>
<meta property="og:url" content="https://example.com/"/>
<meta property="og:description" content="description of your website/webpage"/>
<meta property="og:image"
content="https://example.com/image"/>
</Head>
</Html>
);
I tried inserting meta tags within <Head> in _document.js file. Here I am passing only static conetnt as I don't have dynamic data in _document.js. This time meta tags are showing up in page source and I can also preview them on facebook.
Third Approach
Then I try to insert those tag in _app.js file as I receive pageProps in this component.
Unfortunately when I pass dynamic content in meta tags like first approach, they do not show up in page source but they do when I pass static conetnt similar to second approach.
full _app.js code gist
UPDATE
As regard to my third approach, I checked once again and surprisingly I can see all meta tags in page source when inserted either with static or dynamic content in _app.js. I can preview the url when content is static but when content is dynamic I can not preview the url using either Facebook debug or Open graph
My Next.js version is 12.2.0
It's possible that the code you have in your _app.js is blocking the meta tags from being rendered. The "View page source" in browsers will not wait for client code to finish rendering. You can verify this and click "View page source" from your browser. Do you see any of the HTML you are expecting, for example do you see your meta tags and product html?
I expect that you probably don't see anything except some static HTML tags. One thing you could try is moving your use of hooks and rendering logic down into its own MainLayout component.
You can then try your first approach where you do something like this:
const Product = ({product}) => {
return (
product ?
<>
<Head>
<title>{product.title}</title>
<meta name="description"
content={product.description}/>
<meta property="og:title" content={product.title}/>
<meta property="og:type" content="video.movie"/>
<meta property="og:url" content={`${props.host}/products/${product.slug}`}/>
<meta property="og:description" content={product.description}/>
<meta property="og:image" content={product.thumbnail}/>
</Head>
<MainLayout>
<Course/>
<MainLayout>
</> : null
);
};
Where MainLayout contains all the logic you have in your _app.js. This should keep your actual _app.js free of any client side code that is blocking the meta tags from rendering.
Basically we want to utitlize Next.js static optimization and have it pre-render the meta tags for your page so that the browser and web crawlers get the data without having to wait for any client side rendering.
Hopefully this helps someone, but my issue was the placement of the <Head> tags within _app.js. For some reason, when it was nested under <Auth0ProviderWithHistory> the meta tags would not render, moving it outside of this gave me victory.
Broken
<Auth0ProviderWithHistory>
<Head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{openGraphData.map((og) => (
<meta {...og} />
))}
<title>{pageProps.title}</title>
</Head>
<CssBaseline>
<div className="page-layout">
<NavBar />
<Component {...pageProps} />
<Footer />
</div>
</CssBaseline>
</Auth0ProviderWithHistory>
Fixed
<span>
<Head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{openGraphData.map((og) => (
<meta {...og} />
))}
<title>{pageProps.title}</title>
</Head>
<Auth0ProviderWithHistory>
<CssBaseline>
<div className="page-layout">
<NavBar />
<Component {...pageProps} />
<Footer />
</div>
</CssBaseline>
</Auth0ProviderWithHistory>
</span>
Not sure what's going under the hood, but removing the Head tag resolves this for me.
I just put my meta tags without nesting them inside Head, and it worked.
I've got an idea to run Flutter app on WebOS. I've downloaded the latest WebOS sdk and a Simulator (as they already deprecated the Emulator)
I've created a simple Hello World app that simply uses HTML and it ran just fine on the Simulator. Then I decided to add a logic for running Flutter app to it. So now the compiled app structure is like this
The content of the index.html is as follows
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="flutter_iz_tube_tv">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>IZ Tube TV</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = '3924677883';
</script>
<script src="flutter.js" defer></script>
<script src="webOSTVjs-1.2.4/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.4/webOSTV-dev.js" charset="utf-8"></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
And here is the content of appinfo.json
{
"id": "com.example",
"version": "0.0.1",
"vendor": "Test TV",
"type": "web",
"main": "index.html",
"title": "tv_app",
"icon": "icon.png",
"largeIcon": "largeIcon.png"
}
This app runs fine in browser if I use a web server.
But the problem starts when I load it on a WebOS Simulator using App button on RCU.
I just cannot run. And the problem is, obviously, because it uses a simple file: protocol instead of running an http server.
I've googled a lot and haven't found a solution to this.
Does anyone know how to run an app like this in simulator?
I've found out it's impossible to do in a Simulator. But there is a workaround. We can add a redirection to the "head" part of index.html file like this (https://webostv.developer.lge.com/develop/app-developer-guide/hosted-web-app/):
<meta http-equiv="refresh" content="0;url=http://0.0.0.0:8080/index.html">
Thus effectively redirecting it to the remote app. And WebOS can display a Flutter app
I am trying to send events to Google Analytics v4 property from a local application. I am testing with code inside a local html file (see code below).
If I deploy this file on a webhost, I can see incoming events in GA DebugView after loading page - as expected.
It does not work, if I open this file locally. If this code does not work locally, it also won't work in some electron app, right? Or have I misunderstood something? If it works on a webhost but not locally - does anything have to be configured differently in Google Analytics?
If executed locally, in developer console I get error messages like this:
Tag fired: {function: "__get", vtp_eventName: "scroll", vtp_settings: ["map", "streamId", "G-XXXXXXXXXX", "eventParameters", ["map", "percent_scrolled", ["macro", 19]]], vtp_deferrable: false, tag_id: 29}
Unallowed document protocol.
Event processing aborted.
index.html
(... with replaced measurement ID as G-XXXXXXXXXX)
<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>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<script>
function fire() {
gtag('event', 'ACTION', {
'event_category': 'CATEGORY',
'event_label': 'LABEL',
'value': 1
});
}
</script>
</head>
<body>
page loaded ...
<button onclick="fire()">fire event!</button>
</body>
</html>
I create a component SeoHeader to handle meta tag creation on NextJs project
import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/dist/client/router';
const SeoHeader = ({ title, description, image }) => {
const router = useRouter();
return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<meta name="description" content={description} key="description" />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} key="og:title" />
<meta property="og:description" content={description} key="og:description" />
<meta property="og:image" content={image} key="og:image" />
<meta property="og:url" content={`https://www.energici.fr${router?.asPath}`} key="og:url" />
<meta name="twitter:card" content={description} key="twitter:card" />
<meta property="og:site_name" content="Energici, l'info bien être" key="og:site_name" />
<meta
property="twitter:url"
content={`https://www.energici.fr${router?.asPath}`}
key="twitter:url"
/>
<meta
name="twitter:image:alt"
content="Energici la plateforme du bien être"
key="twitter:image:alt"
/>
<meta property="twitter:domain" content="energici.fr" />
<title>{title}</title>
</Head>
);
};
export default SeoHeader;
If I import this component on _app.js everything is going well. I can see the meta tags in html dom and if I share the link preview card is ok.
But if I share another page for example this one : https://www.energici.fr/decouvrons-la-kinesiologie
I can see the correct meta tag in html dom but if I share the link in facebook for example or if I test it here https://metatags.io/ I cannot se anything, it's like there is no meta tag.
Any idea ?
Neither the crawler for Facebook, nor the crawler for metatags.io can execute JavaScript. Any HTML tags that are inserted by client side JavaScript won't be available to them.
Googlebot can execute JavaScript, so your meta data may work for Google. The caveat is that Googlebot has to render your pages, so crawling and indexing can take weeks longer than it would otherwise.
You can solve these problems by prerendering your site. After implementing that, crawlers will see HTML with your tags and not have to run JavaScript.
how to use NextHead in next js and set open graph tag. I am passing props from the detail page but It is not appearing in the source.
<NextHead>
<title>{title}</title>
<meta property="og:type" content="website"/>
<meta name="description" content={description}/>
<meta property="og:title" content={title}/>
<meta name="description" content={description}/>
<meta name="keywords" content={keyword}/>
<meta property="og:url" content={url}/>
<meta property="og:description" content={description}/>
<meta property="og:image" content={image}/>
</NextHead>
So here's what I found. In the newer version of Next.js (without getInitialProps), whenever I created the meta tag in a page or component it would show up in the head when I inspected the page, but it wouldn't show up in the head when I opened the 'page source'. While debugging the problem, I tried to pass my dynamic meta tags into _app.js via pageProps and it worked! I'm still not sure why this happens and whether there is a better solution. But here's what I did:
_app.js:
function App({ Component, {metaTags, ...rest} }) {
return (
<>
<Head>
{metaTags &&
Object.entries(metaTags).map((entry) => (
<meta property={entry[0]} content={entry[1]} />
))}
</Head>
<Component {...rest} />
</>
)
}
Here's what my getServerSideProps object looked like. It used the pre-fetched event data to create the metaTags and passed it in props:
export async function getServerSideProps({ params }) {
const { id: slug } = params;
const {
data: { event },
} = await getEventLandingDetailsApi(slug);
const metaTags = {
"og:title": `${event.title} - ${event.edition}, ${event.country} Ticket Price, Registration, Dates & Reviews`,
"og:description": event.description.split(0, 150),
"og:image": event.logo.url,
"og:url": `https://someurl.com/events/${event.slug}`,
};
return {
props: {
event,
metaTags
}
}
}
You can see from the example here, next/head is imported and will add specific meta tag to the specific page.
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage
If this is not working, please provide the error message from your dev console. There should be some error that cause this approach not working.
One of the issues is that the Next.js Head component requires all meta tags to have a name attribute. I don't see this documented anywhere and I believe this is why for example this
<meta property="og:url" content={url}/>
from the original question did not end up in the DOM. It took me quite some time to understand this gotcha, so I hope this helps someone.
In your config.js file in the root folder, export the data you want to include in your meta tags. E.g.
export const MY_SEO = {
title: 'MyTitle',
description: 'My description',
openGraph: {
type: 'website',
url: 'My URL'
title: 'MyTitle',
description: 'My description',
image: '...jpg',
}
};
Inside a Meta.js file in your components folder, you could have:
import Head from 'next/head';
import { MY_SEO } from '../config';
const Meta = () => (
<Head>
<title key="title">{MY_SEO.title}</title>
<meta
key="description"
name="description"
content={MY_SEO.description}
/>
<meta
key="og:type"
name="og:type"
content={MY_SEO.openGraph.type}
/>
<meta
key="og:title"
name="og:title"
content={MY_SEO.openGraph.title}
/>
<meta
key="og:description"
name="og:description"
content={MY_SEO.openGraph.description}
/>
<meta
key="og:url"
name="og:url"
content={MY_SEO.openGraph.url}
/>
<meta
key="og:image"
name="og:image"
content={MY_SEO.openGraph.image}
/>
</Head>
);
export default Meta;
In your pages/_app.js, add
import Meta from '../components/Meta';
to your import statements, and simply add the <Meta /> component.
Why need to have metadata tag every page? It should be set at your root page. Try this plugin, https://github.com/garmeeh/next-seo
Use the <Head> component exposed by next/head.
import Head from 'next/head';
const IndexPage = ({ data }) => (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
{data?.pageType && <meta name="page-type" content={data?.pageType} />}
{data?.pageHype && <meta name="page-hype" content={data?.pageHype} />}
</Head>
<p>Hello world!</p>
</div>
);
export default IndexPage;
There are some gotchas, though. From their documentation:
The contents of head get cleared upon unmounting the component, so
make sure each page completely defines what it needs in head, without
making assumptions about what other pages added.
The trickiest, which will have you loose your hair is this one:
title, meta or any other elements (e.g. script) need to be contained
as direct children of the Head element, or wrapped into maximum one
level of <React.Fragment> or arrays—otherwise the tags won't be
correctly picked up on client-side navigations.
Creating a component that contained the conditionally rendered meta tags was already too much, because that made the return too deep for Next. Make sure your meta tags are directly under <Head> or, as the documentation says, wrapped into maximum one <React.Fragment> or condition, as illustrated in my code snippet.
I'm writing this as a reference for everyone, If your running next.js version from 9.5.2 just add the following <Head /> as an example create a document inside your pages dir i.e _document.js that will overwrite a default document provided by next.js like so
_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head /> // do this
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Just need to change from property to name, it will work.
<NextHead>
<title>{title}</title>
<meta name="og:type" content="website"/>
<meta name="description" content={description}/>
<meta name="og:title" content={title}/>
<meta name="description" content={description}/>
<meta name="keywords" content={keyword}/>
<meta name="og:url" content={url}/>
<meta name="og:description" content={description}/>
<meta name="og:image" content={image}/>
</NextHead>