How do I enable the icon which is shown in chrome´s address bar next to the favorite star?
The site will be in greek but for now I need this icon to appear to make one click translations for non greek speakers.
I added:
<html lang="el">
<meta charset="UTF-8" />
<meta name="google" content="translate" />
<meta http-equiv="Content-Language" content="el-GR" />
But nothing..
Basically seems like the opposite to this article
Disable Chrome translation bar on my website.
Thanks
I'm fairly sure that chrome automatically does this by seeing what your language preference is and then comparing it to the language displayed on the page. No additional code is required.
Related
I run a website that is in English but iOS 14 mobile Safari still offers to translate the page. How do I prevent this?
From this similar question I've found none of these work:
1. <html lang="en">
2. <html translate="no">
3. <meta name="google" content="notranslate">
4. <meta http-equiv="content-language" content="en" />
Isolate the offending bit(s) that are triggering the translate offer. Start with a skeleton:
<!DOCTYPE html>
<html>
<head><title></title></head>
<body></body>
</html>
Did that trigger a translate offer? If not, great, start adding some of the code from the problem page to your skeleton, reloading as you go, until you find the offending bit(s). Once you find out what's triggering the translate offer, you might be able to modify your code or content so that doesn't happen.
I submitted this issue to Apple and it was fixed with iOS and macOS releases in December 2021.
A WebKit engineer via Twitter exchange suggested I submit the specific instance of my issue with the URL in question to Apple using Feedback Assistant. I did this and was then asked to test with builds 19D5026g (iOS) and 21D5025f (macOS). These fixed the issue.
Solution
You can try html tag like this
<html translate="no">.
This will make your html page to non-translate.
Other Versions
<meta name="google" content="notranslate">
<html lang="en" class="notranslate">
<meta http-equiv="content-language" content="en" />
For more: https://www.w3.org/International/questions/qa-http-and-lang
I was wondering if someone could explain how social media rich previews define which og:title to pick.
I use wordpress and for certain pages I insert php echo strings to inject them into the <head>. I choose to do that to change certain titles and descriptions into more commercial texts. What obvisouly happens is that there are 2 og:title meta tags; my injected one and the Wordpress backend page title.
Once I was told that the first meta tag in the top of the <head> will be picked as thé meta tag to be picked up for rich previews for example, but this seems not to happen (anymore).
Below is my current situation and exact order of meta tags in the <head>:
<html>
<head>
<meta charset="UTF-8">
<title>EXAMPLE</title> // my injected and used by Google
<link rel="canonical" content="https://example.com">
<meta name="description" content="description">
<meta name="subject" content="example">
<meta name="og:image" content="/image.jpg"> // my injected and used by Social Media
<meta property="og:title" content="og:title #1"> // my injected og:title, but ignored
<meta property="og:description" content="description">
<meta property="og:url" content="https://example.com">
<meta name="twitter:title" content="EXAMPLE">
<meta name="twitter:description" content="description">
<link rel="alternate" href="https://example.com" hreflang="nl-nl">
<link rel="alternate" href="https://example.com" hreflang="nl-be">
<title>EXAMPLE</title> // default by Wordpress
<meta property="og:title" content="og:title #2"> // default by Wordpress and being used
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta name="og:image" content="/image.jpg"> // default by Wordpress
</head>
</html>
What happens is that Whatsapp and Facebook are taking the 2nd og:title meta tag, which doesn't make sense in my opinion.
Changing the title page in the backend is not a solution, because it becomes something like Check out our wonderful shop!, this is not user friendly. Also I'm not a fan of Yoast, because Yoast loads extra code into the pages, which I don't want.
Who knows a solution to this, or can explain why this is happening?
Update & Answer
Thanks to Chris I understand that og: meta tags are being scanned from top to bottom in the <head>, and updates the 2 identical properties with the last one that is being scanned. This RDFa process is typical for apps like Facebook, Whatsapp, Twitter. One exception: og:image seems to be needed in the top, it doesn't override a second or third one below it.
Google Search related tags are being picked up by the first one in the top of the <head> and keeps that one as "first come, first serve".
Solution: I will inject og: tags into the bottom of the <head> and the other ones will be kept in the top. Tested it and it works.
Facebook and other apps generally use their own slimmed down versions of RDFa parsing, which from my understanding is a way to parse meta data from xml and html documents. From what I was reading, it seems that as the parser goes through your html page, it will add the first metadata piece it finds to it's "current subject", and if it finds another one with the same name, it will then overwrite the "current subject" with the updated info.
It seems like a pretty complicated topic, so I suppose the simple answer would just be that their parser will always take the last meta data tag and use that.
To fix the issue, I would see if you can inject your custom og:title/metadata below the one autoinjected by Wordpress.
You can read more about RDFa parsing here
I am developing a website using html and css and i can't see greek letters.Instead of this,i only see symbols.
i have the following line in my html file:
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
I also tried:
<meta http-equiv="content-type" content="text/html;charset=windows-1253" />
<meta http-equiv="content-type" content="text/html;charset=ibm869" />
<meta http-equiv="content-type" content="text/html;charset=ibm737" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-7"/>
<meta http-equiv="content-type" content="text/html;charset=x-mac-greek"/>
<meta http-equiv="content-type" content="text/html;charset=x-EBCDIC-GreekModern "/>
<meta http-equiv="content-type" content="text/html;charset=x-EBCDIC-Greek "/>
Nothing worked!
p.s. I tried this in Firefox and Internet Explorer
As per your comment
Open your file in Notepad, File -> Save As from the top menu, then there's a drop down in the save as dialogue where you can select character encoding. Make sure UTF-8 is chosen rather than ANSI
Once the file has been saved as UTF-8 then you should have no problems adding Greek letters, (or Russian, Hebrew, Japanese or whatever)
Per the comments / answers here, you'll need to check to see what the encoding is set to. Best way would be to see exactly how the server is sending it by inspecting the Response Headers. You can do this with Developer Tools on most browsers.
I just inspected the headers for this page using Chrome:
Make sure you check the file without the local server which many times that causes the problem. I had the same problem and opened the file from the browser directly and worked perfectly.
I had the same problem while developing a page in greek. The problem wasn't the utf-8. I had to correct the CSS.
Regards,
Nick
I have a wordpress website with a few simple pages and a facebook share button in the header. As it is now, facebook uses the wordpress page name as the title for the share, but I'd like it to use the html title instead (or just specify my own). How would I go about this?
Check this plugin. It allows you to add open graph tags on page or post basis or default settings for your site.
http://wordpress.org/extend/plugins/open-graph-protocol-in-posts-and-pages/
Just set the <meta property> tags in your HTML. Notice the indented lines:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Your Title</title>
<meta property="og:title" content="Your Title" />
<meta property="og:image" content="http://www.example.com/myimage.jpg" />
...
</head>
...
</html>
You have a wide variety of properties to choose from: Open Graph Protocol Official Documentation. Ultimately, this is just a problem of using the right HTML.
I have a problem with the og:image tag. I followed the instructions on SO about implementing the tag, which was very straight forward. It works great when someone like's the page. There is now a problem though, that when I post the link into a message I am composing on facebook, it does not show any thumbnail.
Here's my site: http://www.sunlitehardware.com.au/
So check this.
Okay jump onto facebook, and create a private message to one of your friends.
Paste in this link: http://www.sunlitehardware.com.au/blog/Power-Tools-Save-Your-Energy
Watch the thumbnail box below the post generate, and pull in some data. You'll notice it has a title, a link but no image.
The head of that particular link looks like this:
<head>
<link rel="shortcut icon" type="image/x-icon" href="http://www.sunlitehardware.com.au/site/assets/template/images/favicon.ico" />
<meta property="og:title" content="Power Tools - Save Your Energy" />
<meta property="og:image" content="http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" Sunlite Hardware stock a massive range of tools for all your hardware needs in Sydney City & Bondi Junction." />
<meta name="keywords" content=",hardware, store, city, power tools, llight bulbs, paint, sydney, bondi junction" />
<meta name="verify-v1" content="Ow6TX6iHLufi9DAwV6mWquC9SEW4Les+o/wz29uUdeY=" />
If you take a look, the link to the og:image link, you can see the link points here:
http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg
If you were to click that, you should be able to see the image, i know I can, so the link is working.
Seems like for some reason facebook is ignoring it ..
Take a look at the facebook lint page here: http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.sunlitehardware.com.au%2Fblog%2FPower-Tools-Save-Your-Energy
It has the thumbnail there. It just won't work when making posts. Any ideas?
The Facebook Debugger is a handy way of checking your links and usually warns you of the problems with your OG tags.
For the og:image, try using an image that's closer to 50x50 (yours is roughly 1200x1200).