Following the Umbraco Tutorial , I have installed an empty website, then used the Modernizr template as advised.
I got the same result as tutorial, then I wanted to go ahead and make some other changes such as modifying the website name, since the template shows the current page name instead of The Website name.
(please look at the h1.title item in the below image)
What I have done:
In the HomePage under the Document Type node, I have added a new tab that I named: "Site Config Data", then added to it a new property: "websiteName", then in the Master page template header I inserted the same property field with the recursive option checked, so now it looks like the next:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>#Umbraco.Field("websiteName", recursive: true)</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/css/style.css">
<script src="/scripts/libs/modernizr-2.0.6.min.js"></script>
</head>
Then in the Home page under the Content node, I entered the required website name in the newly added Textbox, then saved and published successfully.
But when I browse to the home page and click on the menu bar options, still the current page shows instead of the website name.
I googled on this issue, but could find nothing, any ideas please ?
A stupid error, the property in the Master template was in the wrong place, it should be in the body tag not in the head tag as shown above in the code block.
Now as I changed it, the website name shows normally in the right place.
Related
In facebook, when I add a link to a website, it automatically brings some synopsis (text and images) from the external website and adds it to the page...
Something like this:
How can this be done? I simply don't know where to start and what to google to find a tutorial about this.
What you're looking for are Open Graph Meta Tags. By including these in the <head> of your page, Facebook can then use this information to generate useful previews.
To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
....
</html>
The excerpt above, as well as additional properties and information, can be found here: The Open Graph protocol.
I don't know where to start with this, my default link preview for my site looks like this:
I don't know why it's displaying bootstrap and not what is in my site. This is the page I am trying to share:
so I was expecting that the link would have the image and the title(blacked out).
But on the good side, when you click on the bootstrap link, it will redirect to my page and not to bootstrap but still what I cannot get is why is it displaying bootstrap and not what is on the page? Where can I change it?
Thanks for the help.
Your problem is this line in your <head>:
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/blog/">
This tells bots, web crawlers, and generally everyone that this page is exactly the same as https://getbootstrap.com/docs/4.0/examples/blog/. It even goes a step further and indicates that this is the proper URL for your page.
Most automated systems will stop parsing your page after seeing a <link rel="canonical"> tag and instead parse the linked page as though it was the current one. This is where Facebook et al. are getting the Bootstrap metadata from.
TL;DR: Remove this line.
For future reference, you can use Facebook’s Sharing Debugger to troubleshoot problems like this. For the given URL, this is the current result:
Note the Canonical URL and Redirect Path fields, which indicate my above diagnosis.
You need to use something like react-helmet or react-meta-tags to set your <head> data correctly. The data you are looking to set would be openGraph data which can be found here.
Not sure if this is the answer you were looking for but I was searching for how to update the info your react app shows when you preview the link in some other app. Every solution I tried wasn't working with github pages and react (react-helmet, react-meta-tags, react-document-meta). What ended up working was that you can edit the index.html located inside the public folder to change this info. Include this somewhere in the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>IMDB</title>
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />
Example from https://ogp.me/
You can also use the ogtag.me API that allows you to shorten your links dynamically and send the data you want it to display on social platforms and then use this shorten links in your share buttons.
I want to add a Twitter button on my website to share content, as well as a Twitter card. I've already added the meta tags.
Here is the code for my share button:
Tweet
This is the code for the meta tags I've added as well:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#nytimes">
<meta name="twitter:creator" content="#SarahMaslinNir">
<meta name="twitter:title" content="When Great Minds Don’t Think Alike">
<meta name="twitter:description" content="How much does culture influence creative thinking?">
<meta name="twitter:image" content="http://176.32.230.11/trialandtest.com/assets/images/profile-img.jpg">
Here is the link to my site:
http://176.32.230.11/trialandtest.com/
I'd be grateful if someone could assist me as to where I am going wrong, because I have my URL whitelisted on Twitter, but when I try to share something it does not share the content on the preview window and shares the old one.
Your share url should be dynamic. I think when you click on the share button it is taking your static url ie. http://176.32.230.11/trialandtest.com
Facebook development newbie.
I have added the meta tags to the html file which I want to share to Facebook.
like:
<meta property="og:type" content="article"/>
<meta property="og:title" content="title"/>
<meta property="og:description" content="description"/>
<meta property="fb:app_id" content="23232323323232"/>
<meta property="og:image" content="https://fajfladjfaljafl.jpg/>
I want to make the image thumbnail in Facebook profile different for different people. For example, people can do a small test here then share the result to Facebook, the image thumbnail should be the test result of that person. So how can I do this.
Now I am thinking to generate a new webpage within specific meta property for that person every time. But this's so dump!
Can I change <meta property="og:image" content="https://fajfladjfaljafl.jpg/> automatically when people share it to Facebook? or any other ideas?
Thank you very much!!
Hi everyone:
I am doing this via feed dialog. As what #Mosh Feu and #CBroe said, it doesn't make sense to change meta data.
I am using feed share link
https://www.facebook.com/dialog/feed?app_id=APP_ID&link=URL&picture=THUMBNAIL_URL&name=NAME&description=DESCRIPTION&caption=CAPTION&redirect_uri=REDIRECT_URI
to define the parameters every time.
I'm working on a not for profit website, and trying to integrate with facebook. The app seems to work fine, single sign on works fine, even a custom "post to wall" function works fine using the javascript sdk. What does not work, however, is adding a photo to represent the entity, and anything other than default text, when a person clicks on the like button.
What's worse is there is some ghost text that I personally have never actually seen (other than in the text box itself) that finds its way into the dialog box when posting and leaving the text box empty.
The documentation here falls short:
https://developers.facebook.com/docs/reference/plugins/like/
Open Graph API tags also did nothing.
If you "like" the "like button" you'll see that their example does exactly what I'm trying to accomplish. There's a photo and a little description of what the button is. Is it possible to do this on other sites?
I've struggled a lot with this myself, but I found that by putting my page's URL into Facebook's debugger, it made the correct image, text, etc. show up when clicking a share button.
Add these tags in your pages' tags.
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:title" content="insert your title here"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.com/foo/"/>
<meta property="og:image" content="http://www.example.com/images/example.jpg"/>
<meta property="og:site_name" content="A human-readable name for your site">
<meta property="og:description" content="A one to two sentence description of your page">
</head>
</html>
To turn your web pages into graph objects, you'll need to add Open Graph protocol tags and the Like button to your webpages.
Instructions are here:
http://developers.facebook.com/docs/opengraph/