Generating Facebook Open Graph Meta Tags Dynamically

Generating Facebook Open Graph meta tags dynamically

First, I want to reiterate that I am almost positive that your problem is due to the fact that the url you are passing into the debugger is not dynamically generated. The url tag essentially acts as a redirector. Unless it's the exact same (meaning the meta tags on the url meta object is the same as those on the url you are passing in) as the url you are testing, you won't get the results you're looking for.

The meta tag

<meta property="og:url"> 

needs to be dynamically generated. The debugger is being redirected to your default index page instead of the dynamically generated page.

For example, I assign an id to every object I'm using, and so I have something like the following

<meta property="og:url" content="http://example.com/index.php?id=<?php echo $_GET['id'] ?>"/> 

I pass in that exact url into the debugger, and thus the final page the debugger lands on will be that exact url.

Also, in the following

<meta property="og:type" content=""/>

how is the property being dynamically generated? Did you remember to set in your actual code something like the following?

<meta property="og:type" content="<?php echo $_GET['type'] ?>"/>

You also appear to be shoving everything into the url, which is dangerous and can cause huge headaches, which might be the issue here. Instead, shove only one thing , eg ?type=bistro and then propagate the necessary data from the DB.

I would recommend dynamically generating most OG tags based on an object_id. Store the relevant OG info for every object_id, and then propagate them when accessed. This way, you can also easily expand and edit the tags you use when OG is updated.

If you have problems with OG you shouldn't hesitate to post them as new questions instead of comments as I guarantee other people also have the same problem.

Dynamic Facebook Open Graph tags possible?

Facebook does not parse JavaScript at all, you can´t use dynamic Open Graph tags. It does not really make sense to change them on the fly anyway.

You can only change the OG tags dynamically on the server - obviously. For example: https://yourdomain.com/dynamicogtags.php?title=xxx&description=xxx

<meta property="og:title" content="<?php echo $_GET['title'];?>">

Not sure if that´s what you want to do though, the URL looks pretty ugly that way. Rewrite would be nice, of course.

You also may want to try something like prerender.io, but i am not sure if it will handle dynamic og tags.

Angular 4 - Update Meta tags dynamically for Facebook (Open graph)

Open Graph OG Tags must be within the sourcecode!

You need to provide a static html page containing the the open graph tags like og:image og:title and og:description in the html sourcecode, since facebook, twitter and co a just scraping the plain html without rendering it through javascript. Angular dynamically updates the dom through js and therefore the crawlers just get the initial index.html.

There are several ways to serve an html containing open graph
tags ans solve your issue:

• Serverside rendering with angular universal
• use an proxy rendering your page
• overwriting index.html on the fly replacing og tags
• serving static html pages (not sure if this is supported by angular)

I guess you already use something like ngx-meta to add og tags?

Angular Universal - Server Side Rendering with meta tags in Angular 2/3/4/5

I guess server-side rendering is the most appropriate way to solve your issue. For this you can host a node server or use eg. AWS Lambda. The disadvantage with this, your app has to be actively hosted and can not be served statically anymore. Anyways this seems to be the best way since it also is improves SEO. Angular Universal is the term to search for:

• Angular Universal
• Angular Universal Starter Boilerplate
• Angular Universal PWA with serverside rendering serverless with aws lambda boilerplate

Angular Universal Prerendering on build

You can also prerender specific routes on the build process and serve angular as a static app with multiple prerendered index.html files. If you only have few static routes this works perfectly fine. Thinking of more generic routes with dynamic parts, this is not the solution. Go for server side rendering. The angular universal boilerplate also contains an example for this. See prerender.ts

Alternative Solutions

Prerendering Angular with a proxy to provide OG Tags

If you like to avoid implementing serverside / prerendering during the build process (setting up angular universal sometimes is a pain for not good structured apps.) you can try to use a proxy service prerendering you page. Take a look at eg. prerender.io.

Overwriting index.html

Redirect all requests to an script which overwrites the og:tags. Eg. Using PHP and .htaccess to overwrite og tags this is possible with modern environments too. Eg. you could use cloudfront / api gateway and a lambda function. Have not seen an example for this though.

Facebook Cache and Open Graph Debugging

Be aware that caches may still have cached the open graph information from their first crawl. Ensure your source code is the lastest and all caches, reverse proxies like nginxx, cloudfront are cleared.

Use Facebook Debugger to debug open graph caches and clear facebook opengraph cache

dynamically create facebook share metatags [og:] in asp.net

All your meta tags in the code behind are missing the part where you set the property attribute. Something like

HtmlMeta tag = new HtmlMeta();
tag.Attributes.Add("property", "og:title");
tag.Content = "Title";
Page.Header.Controls.Add(tag);

See the following thread,
How to send the og:Title og:Image og:Description og:url info from C# to Facebook

Dynamic Image for Facebook Opengraph og:image meta tag

Yes and no. Facebook scrapes your site once, and cached the metadata that it finds, unless you specifically go here and force the scraper to crawl your site again. The cache does generally expire (perhaps after 1-2 days?), so when requested again outside of this cache period, Facebook will crawl the site again.

You can have a dynamically generated og:image meta tag, but it will only be read the one time (per cache period), and only that instance of the image will be saved.

For example, if user A shares your page, and your page returns imageA.png in the og:image tag, then that is the image that will be associated with your page's metadata.

If user B then shares the same page within the same cache period, Facebook will forgo the metadata scraping and assume that imageA.png is still a valid og:image.

---

Related Topics