special characters not showing on page - html

I have meta tag as given below:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/>
<meta name="keywords" Content="“SAT Course†“SAT exam†“SAT Prep†“SAT Preparation Courseâ€" />
<meta name="description" Content="Take Kaplan’s SAT preparation course. We use proven score raising strategies and give you access to 4 practice tests so you can take the test with confidence." />
<meta name="copyright" Content="Copyright Kaplan Test Prep and Admissions 2008" />
<meta name="Content-language" Content="en-uk" />
<meta name="Distribution" Content="global" />
<meta id="tcm" name="TMCID" Content="tcm:55-7918-64"></meta>
it was working fine but after some changes it start behaving differently. it is not showing special character properly some extra text is added on the page.
I have tried using charset='utf-8'.
Please suggest! what can be reason behind this.

The character set you have used to save the HTML in does not match the character set the browser thinks is being used. Check your editor to find out what you are really using.
I recommend setting it to UTF-8. This is a well supported encoding that supports just about any character you are likely to use, along with a large number that you aren't.
Note that the encoding you specify using meta tags does not override any encoding specified in real HTTP headers sent by your webserver. See http://www.w3.org/International/O-HTTP-charset for advice on how to change it.
As an aside, if you mean the language is "British English" then you want "en-gb" not "en-uk".

Related

How add meta property="og:locale" content="?"

I have seen several different articles, and I want to know, to be sure what is right,
How add meta og:locale example: en_US or en-US Which is correct? or is the same?
on my website I have add it like this
<meta property="og:locale" content="en_US"/>
According to their documentation here http://ogp.me/,
og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
The accepted format is en_US, so your meta property tag is in the correct format. If you want to add an alternative language, you can do so with
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
As stated in their website.

Integrating with Twitter

I hate to be doing this, but since going through the proper channels has led to being completely ignored for two weeks, I bring myself here instead. Hopefully you guys can prove why we're better ;)
I'm trying to integrate Twitter Cards, however despite following the instructions, and despite the Validator loading just fine (screenshot of the validator), it fails to show up in actual Tweets.
The URL being Tweeted in this example is http://pfq.link/?Megayena and the relevant Meta tags on that page are:
<meta name="twitter:card" content="product" />
<meta name="twitter:site" content="#SystemSalamence" />
<meta name="twitter:creator" content="#SystemSalamence" />
<meta name="twitter:domain" content="pokefarm.com" />
<meta name="twitter:title" content="Sei's Mightyena on PokéFarm Q" />
<meta name="twitter:image" content="http://pfq.link/?Megayena=004000ccff99300300.png" />
<meta name="twitter:label1" content="Species" />
<meta name="twitter:data1" content="Mightyena [Mega Forme Q]" />
<meta name="twitter:label2" content="Held item" />
<meta name="twitter:data2" content="No item" />
<meta name="twitter:description" content="Sei's Mightyena is a Level 100 Mightyena [Mega Forme Q]. She is hungry, so come visit her on Solaria and give her a Berry!" />
Everything looks valid, and it works on the validator preview, so why are Tweets not getting their cards?
When visiting the URL and inspecting (view source in the browser) your tag refers to a different URL than the one in the question.
it currently refers to:
http://pokefarm.com/img/script/pokemon?00400ccff99300300Megayena
Trying to visit that image URL, It returned a HTML page that contains an error (PHP error).
maybe that is the problem.
Have you tried using a summary card rather than a product card?
https://dev.twitter.com/cards/types/summary
While I can't see any obvious errors in the code, it might be worth trying different cards and seeing if they work.
The problem comes perhaps from there :
The image must be a minimum size of 120px by 120px
See https://dev.twitter.com/cards/types/summary

html not showing content properly in firefox

I have an HTML file. When I open in the text editor it shows the below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Srimad Bhagavatam Canto 4 Chapter 9 Verse 5</title>
<link rel="STYLESHEET" href="../../../om.css" type="text/css" title="om tat sat">
<meta http-equiv="Content-Type" content="text/html; Charset=ISO-8859-1">
<meta name="KEYWORDS" content="Srimad Bhagavatam">
<meta name="DESCRIPTION" content="Srimad Bhagavatam Canto 4 Chapter 9 Verse 5">
</head>
<body>
<p class="h">4.9.5</p>
<p class="c">sa vai tadaiva pratipāditāḿ giraḿ</p>
<p class="c">daivīḿ parijñāta-parātma-nirṇayaḥ</p>
<p class="c">taḿ bhakti-bhāvo 'bhyagṛṇād asatvaraḿ</p>
<p class="c">pariśrutoru-śravasaḿ dhruva-kṣitiḥ</p>
<p class="t">TRANSLATION</p>
<p>At that time Dhruva Mahārāja became perfectly aware of the Vedic conclusion and understood the Absolute Truth and His relationship with all living entities. In accordance with the line of devotional service to the Supreme Lord, whose fame is widespread,
Dhruva, who in the future would receive a planet which would never be annihilated, even during the time of dissolution, offered his deliberate and conclusive prayers.</p>
</body>
</html>
When i open this html file in firefox. the output is
4.9.5
sa vai tadaiva pratipÄditÄmÌ giramÌ
daivÄ«mÌ parijñÄta-parÄtma-nirnÌ£ayahÌ£
tamÌ bhakti-bhÄvo 'bhyagrÌ£nÌ£Äd asatvaramÌ
pariÅ›rutoru-Å›ravasamÌ dhruva-ksÌ£itihÌ£
TRANSLATION
At that time Dhruva MahÄrÄja became perfectly aware of the Vedic conclusion and understood the Absolute Truth and His relationship with all living entities. In accordance with the line of devotional service to the Supreme Lord, whose fame is widespread, Dhruva, who in the future would receive a planet which would never be annihilated, even during the time of dissolution, offered his deliberate and conclusive prayers.
I am not able to understand the problem, why its changing the diacratics and showing some wrong letters?
Please try changing
<meta http-equiv="Content-Type" content="text/html; Charset=ISO-8859-1">
to
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
ISO 8859-1 is a single-byte encoding that only includes the first 256 unicode characters.
#geedubb beat me to it, that is the solution. to expand, UTF-8 can represent every unicode character while as #geedbubb points out ISO 8859-1 is limited.
The simplest fix is to save the file, in your text editor, in UTF-8 encoding
with BOM. Any reasonable text editor has a command for this.
This will override any charset declaration in the document itself and even HTTP headers.
You can then remove the tag <meta http-equiv="Content-Type" content="text/html; Charset=ISO-8859-1"> as useless. If you wish to retain it for documentation purposes, you need tp change ISO-8859-1 to UTF-8, of course.
ISO-8859-1 is sufficient for Western and Northern European languages only (and not really even for them). For texts like those in your page (Devanagari text in scientific/academic transliteration), UTF-8 is the only character encoding that makes sense on web pages.

How to successfully implement og:image for the LinkedIn

THE PROBLEM:
I am trying, without much success, to implement open graph image on site: http://www.guarenty-group.com/cz/
The homepage is completeply bypassing the og:image tag, where internal pages are reading all images from the site and place og:image as the last option.
Other social networks are working fine on both internal pages and homepage.
THE CONFIGURATION:
I have no share buttons or alike, all I want is to be able to share the link via my profile.
The image is well over 300x300px: http://guarenty-group.com/img/gg_seal.png
Here is how my head tag looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guarenty Group : Pojištění pro nájemce a pronajímatelé</title>
<meta name="keywords" content="" />
<meta name="description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání." />
<meta name="image_src" content="http://guarenty-group.com/img/gg_seal.png" />
<meta name="image_url" content="http://guarenty-group.com/img/gg_seal.png" />
<meta property="og:title" content="Pojištění pro nájemce a pronajímatelé" />
<meta property="og:url" content="http://guarenty-group.com/cz/" />
<meta property="og:image" content="http://guarenty-group.com/img/gg_seal.png" />
<meta property="og:description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání [...]" />
...
</head>
THE TESTING RESULTS:
In order to trick the cache i have tested the site with http://www.guarenty-group.com/cz/?try=N, where I have changed the N every time. The strange thing is that images found for different value of N is different. Sometimes there is no image, sometimes there is 1, 2 or 3 images, but each time there is a different set of images.
But, in any case I could not find the image specified in the og:graph!
MY QUESTIONS:
https://developer.linkedin.com/documents/setting-display-tags-shares is saying one thing, and the personnel on the support forum is saying "over 300" Does anyone know What is the official minimum dimension of the image (both w and h)?
Can an image be too large?
Should I use the xmlns, should I not use xmlns or it doesn't matter?
What are the maximum (and minimum) lengths for og:title and og:description tags?
Any other suggestion is of course welcomed :)
Thanks in advance, cheers~
This answer I found on LinkedIn forums might be of help to you:
Guys, I've spent a whole day trying different things. What worked for
me is using the mata [sic] tags as following:
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="{Your content}" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{Your content}" />
Just try to add prefix to every tag (not to html tag), then re-sign in
with your LI account to clear the cache...
Post your results.
I found this simple fix which worked for me after lots of complicated solutions which didn't work:
LinkedIn
The only way to “clear” the sharing preview cache for LinkedIn is to trick LinkedIn into thinking your page is a different (and new) page.
This is done by adding a made-up parameter to the link. It doesn’t affect your webpage, but it does force the metadata to be re-fetched.
Example:
Original link: //beantin.se/consultant-resume
"New" link: //beantin.se/consultant-resume?1
I was having the same issue last night. Spent hours researching solutions and I tried the solutions recommended by others in this post but to no avail. Finally I contacted LinkedIn about this issue and they responded right away. Their development team has implemented a new tool called "Post Inspector", which allows you to optimize content sharing. Literally, in just minutes this actually worked.
All you have to do is type in your URL and they do all the busy work i.e. verifying correct code of properties such as image, author, title, description, publication date etc. Not only do they verify, they also tell you what code to include, what is missing, and how to fix it.
Here is the website to use Post Inspector:
https://www.linkedin.com/post-inspector/
LinkedIn is also caching previews. If OpenGraph image was incorrectly cached at some point before, try defeating the cache with a query parameter on a shared link, e.g. https://your-website.com/?1.
Just a little late lol,
But I came across this exact issue, figured out that linkedIn was pulling the meta tags from the final landing page.
My website that i was trying to link to had an instant redirect, adding the og tags to the page where it was redirected to fixed the issue.
Make sure your og: tags are part of the head tag.
I ran into this recently, spent a huge amount of time working on it with all the types of solutions above. I was working with someone else's HTML and finally figured out that the html was simply missing the head tag, while it did have the closing tag for head.
Linked In is apparently not scanning page text for the og tags, but processing the page dom, and if the dom objects aren't properly coded, they won't process. If you have issues with unmatched tags or unclosed tags, this could be your issue if everything else is not working.
I did not need to add prefix to the meta tags or add og image height and width tags once the html was fixed. Linked In processed it fine once the html was fixed.
If you don’t want to add a fake query string parameter to your LinkedIn URLs—as suggested in e.g., #Kym's answer—a simple solution is just to sign out and then sign back in.
For me solution was to put all the <meta> tags (without prefix) inside <head> tag.
For other social networks like Facebook, Twitter or Google you don't even need to have <head> tag. (because it it optional in HTML5 specs)
PS. There is a new nice way for testing <meta> tags on your website: https://metatags.io/
After researching for a day, I found that meta tag with attribute property should be used instead of name.
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
...
Ref: https://ogp.me/
In my case I did exactly this and it worked fine (on my page of course).
Put these four lines in the head:
<title> aanalytics </title>
<meta data-react-helmet="true" property="og:image" content="/photos/s5.jpg">
<meta data-react-helmet="true" property="og:type" content="website">
<meta data-react-helmet="true" property="og:url" content="https://www.aanalytics.de">
BUT, pay attention that if you have more than one head in your page, these lines need to be inserted in the first head otherwise it will not work.
I also had prefix="og: http://ogp.me/ns#” in the html
I got it finally working by adding the full image path:
<meta name="image" property="og:image" content="https://hasan.life/images/preview.png">
This is worked for me.
Somehow this problem happens if you don't set your open graph tags properly.
Instead of this:
<meta name="image" property="og:image" content="{content}" />
Try this:
<meta name="image" property="og:image" content="{content}" />
<meta property="og:image:secure_url" content="{content}" />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="442" />
I've tried for more than half an hour and I found this one which worked 100% correctly
Source: https://www.linkedin.com/help/linkedin/answer/a521928/making-your-website-shareable-on-linkedin?lang=en
• You can also check your Open graph credentials on https://www.opengraph.xyz/
<meta name="title" property="og:title" content="Enter your title here">
<meta property="og:type" content="Enter any tyoe like Article or Website">
<meta name="description" property="og:description" content="Enter description here">
<meta name="image" property="og:image" content="Enter image URL here">
<meta property='og:url' content='Enter website URL here'/>

Facebook Linter showing og:type as webpage when it is defined as company

I have a company web page that I've added a Facebook 'Like' button too. I have defined the namespace for FB and OG and added in all my Metatags - my code is below. URL is www.akascia.com.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Akascia" />
<meta property="og:type" content="company" />
<meta property="og:url" content="http://www.akascia.com" />
<meta property="og:image" content="http://www.akascia.com/images/akascia_fb_logo.png" />
<meta property="og:site_name" content="Executive search, purely done by Akascia" />
<meta property="fb:admins" content="********" />
<meta property="fb:page_id" content="**********" />
<meta property="og:email" content="admin#akascia.com"/>
<meta property="og:phone_number" content="+44 2070 787 665"/>
However, when I run the site through the Facebook linter, I get the following results:
Warnings that should be fixed
Extraneous Property: Objects of this type do not allow properties named fb:page_id.
Extraneous Property: Objects of this type do not allow properties named og:email.
Extraneous Property: Objects of this type do not allow properties named og:phone_number.
Open Graph Object Properties
fb:admins Array of length 1
⍾ ********
og:url http://www.akascia.com/
og:type website
og:title Akascia
og:image
og:site_name Executive search, purely done by Akascia
og:updated_time 1320835017
Raw Open Graph Document Information
Canonical URL http://www.akascia.com/
Meta Tag <meta property="og:title" content="Akascia" />
Meta Tag <meta property="og:type" content="company" />
Meta Tag <meta property="og:url" content="http://www.akascia.com" />
Meta Tag <meta property="og:image" content="http://www.akascia.com/images/akascia_fb_logo.png" />
Meta Tag <meta property="og:site_name" content="Executive search, purely done by Akascia" />
Meta Tag <meta property="fb:admins" content="731575475" />
Meta Tag <meta property="fb:page_id" content="114216411121" />
Meta Tag <meta property="og:email" content="admin#akascia.com" />
Meta Tag <meta property="og:phone_number" content="+44 2070 787 665" />
So it seems that it thinks the webpage should have the og:type:webpage, even though I'm declaring as a 'company' and in the raw data it's showing it's scraped it as 'company' too. Hence it's giving the warnings for the telephone numbers etc.
The 'Like' button seems to work but I'm not 100% sure it's right. So I'm a bit confused as to why this is happening.
The current list of builtin object types is listed here: http://developers.facebook.com/docs/beta/opengraph/objects/builtin/
Company isn't in the list. Website is the default that it's falling back to, and if you scroll down the page to where it has an example for a Website Object type, you can see it doesn't list support for all your properties, hence the Extraneous Property warnings.
You can create your own object type, though, that supports any properties you want. Create a Facebook Application, and go to the "Open Graph" section. You can create an action and an object type (such as, perhaps "like" a "company"), and then go to the "Open Graph/Dashboard" to add custom properties to your "company" object type. One type of custom property is a ContactInfo that would include your phone number and such; or you could just add a few string properties that are exactly what you need. You can then click "Get Code" to copy the new set of meta tags to use on your page.
This walkthrough probably describes the process better: https://developers.facebook.com/docs/customopengraph/walkthrough/
But really, after all that, if you're happy with how it is showing up on peoples' feed when they "Like" your page, then it is probably fine the way it is. You could add an og:description tag with any extra info you want in there, and just delete the extraneous tags.
old og:type like company, product ... are deprecated. They are not included in the current OpenGraph specification.
Very few og:type are still available (website, article, video....).
If you really want to use the og:type company, you will have to declare it in your own opengraph namespace.
CF : http://ogp.me/ , http://graph.facebook.com/schema/og/ and http://developers.facebook.com/docs/beta/opengraph/objects/builtin/
(the last link was first added by Melinda Weathers)
For the fb:admin tag, try putting in a personal profile's link.
i.e. your facebook page has a profile associated with it which is an admin to the page- the ID for the profile should work.