Language accents displaying as ??? on my website - html

Currently I am trying to display Korean Language characters on my website but instead it's displaying text which looks like ??? where the Korean language should be.
You can seen an example in the screen shot below.
I have tried to add the following to my meta and no luck.
<meta http-equiv="content-language" content="ko"/>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
Here's the current structure of my head content.
<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="UTF-8" >
<!-- <meta http-equiv="content-language" content="ko"/> === commented out as it didn't do anything.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
EDIT: I have viewed some of the following questions and they did NOT help solve my issue. Question 1 & Question 2.

The meta tag
<meta http-equiv="content-language" content="ko"/>
is not declaring the encoding of the text. It is only a clue to search engines that your page is in the language specified. The lang attribute has the same effect.
You should use the charset attribute:
<meta charset="UTF-8">

Related

how to resize my image preview for website

Hi I'm using the below code to setup a image preview
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<meta property="og:image" content="https://i.imgur.com/VjUU72S.png" width="1200" height="600"/>
It sets up the preview for the link sent but it is really small (see image below)
However I want it to be alot bigger like the below image
How can i achieve this? ive already tried to do the below
<meta property="og:image" content="https://i.imgur.com/VjUU72S.png" width="1200" height="600"/>
The actual image size is '1200x600'
Discord relies on the meta tag of twitter cards to render image sizes. More info on twitter website
So, just add this in your head :
<meta name="twitter:card" content="summary_large_image">
I have come to a solution for this and achieved my goal.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Im Danial Ahmed and this is my personal
website">
<meta name="twitter:image:src" content="https://imgur.com/DaUY6vk.png">
<meta name="twitter:image:src" content="https://imgur.com/DaUY6vk.png">
<meta name="twitter:site" content="#unofficialdxnny">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="unofficialdxnny (Danial Ahmed)
index.html">
<meta name="twitter:description" content="Im Danial Ahmed and this is my
personal website">
<meta property="og:image" content="https://imgur.com/DaUY6vk.png">
<meta property="og:image:alt" content="Im Danial Ahmed and this is my
personal website">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta property="og:site_name" content="unofficialdxnny">
<meta property="og:type" content="object">
<meta property="og:title" content="unofficialdxnny (Danial Ahmed) Website">
<meta property="og:url" content="https://unofficialdxnny.netlify.app">
<meta property="og:description" content="Im Danial Ahmed and this is my
personal website">
<meta name="expected-hostname"
content="https://unofficialdxnny.netlify.app/">
<meta name="theme-color" content="#1167ab">

Facebook Open Graph tags Not Recognized

I'm currently building https://redeemable.app/, and the open graph meta tags are not being recognized on most popular platforms (including http://developers.facebook.com/tools/debug and Twitter).
Checking the page source code, I have the following in my < head> tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#1E3A50">
<meta property="og:title" content="Claim this Redeemable NFT" />
<meta property="og:image" content="https://flowerpatch.app/polygon/render/card-25993.png" />
<meta property="og:image:height" content="200" />
<meta property="og:image:width" content="300" />
<meta property="og:url" content="https://redeemable.app/r/0xd22ec97e5173241afa4aba8796d4d552d70bf4669dbe5e5e928fa7117ab026f6" />
<meta property="og:type" content="website" />
<meta property="og:description" content="From: 0xc1D622d588B92D2F7553c6fe66b1Ce6C52ec36f9" />
<meta name="twitter:card" content=“summary_large_image” />
<meta name="twitter:site" content="#redeemableNFT" />
<meta name="twitter:title" content="Claim this Redeemable NFT" />
<meta name="twitter:description" content="From: 0xc1D622d588B92D2F7553c6fe66b1Ce6C52ec36f9" />
<meta name="twitter:image" content="https://flowerpatch.app/polygon/render/card-25993.png" />
<meta name="description" content="From: 0xc1D622d588B92D2F7553c6fe66b1Ce6C52ec36f9" />
<meta name="keywords" content="Redeemable, NFT, Reward" />
<title>Redeem NFT</title>
<link rel="shortcut icon" type="image/svg+xml" href=/img/logos/redeemable-favicon-32.png />
</head>
On some open graph validators, these meta tags work just fine:
for example, dnschecker recognizes all my meta tags
and others including iframely
However, on the facebook graph validator, on twitter, and on Discord (which happen to be the most important ones), my links fail to be recognized.
For example, the image, title, and description are not recognized on opengraph.xyz and facebook's debugger
I don't understand why the meta tags work on some sites but not others. It seems like I am doing everything else correctly - the html is being loaded server-side, and I verified all the tags exist in the pagesource, so this answer is not applicable. Additionally I have the OGP prefix in the html tag, so this is not applicable either.
Has anyone experienced this before?

og:title, description and image

i'm currently going a thumbnails generator for my site and maybe other people can use it so what this does is to generate a html file and that file get instant uploaded to the webhost so the file looks like the following code but the issue that facebook saying they didn't detect the og: title and description and image ... weird maybe i'm doing something wrong or the code is wrong ?
Just to note i use the facebook debug to scrape it and check : https://developers.facebook.com/tools/debug/sharing/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ar" dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="fb:admins" content="John.Evenetcha"/>
<meta property="fb:app_id" content="2217370698541973"/>
<meta property="og:locale" content="ar_AR">
<title> تيار المحبة </title>
<meta name="description" content="القيادي بحزب تيار المحبة حسام الهمادي ينفي اشاعة التحالف مع نداء تونس ويصفها">
<meta name="Keywords" content="Tayar Al Mahaba" />
<meta property="article:author" content="https://www.facebook.com/John.Evenetcha" />
<meta property="article:publisher" content="https://www.facebook.com/John.Evenetcha" />
<meta property="og:type" content="article" />
<meta property="og:title" content="تيار المحبة"/>
<meta property="og:image" content="https://scontent.ftun2-1.fna.fbcdn.net/v/t1.0-9/44410830_2120345971363361_6384115955156385792_n.jpg?_nc_cat=111&_nc_ht=scontent.ftun2-1.fna&oh=246eea65cc7fddd40108f6bd8f840876&oe=5C52445D"/>
<meta property="og:site_name" content="تيار المحبة"/>
<meta property="og:description" content="القيادي بحزب تيار المحبة حسام الهمادي ينفي اشاعة التحالف مع نداء تونس ويصفها"/>
<meta http-equiv="REFRESH" content="0;url=https://tayar-al-mahaba.cf/TAM/news/view/9">
<BODY>
Redirecting...
</BODY>
</head>
</html>
Solved the issue! the problem was that i generate it using VB.NET and got System.Text.Encoding.Unicode in the rewrite method i though that will make it good :D

Facebook Post deep link (app links ) to iOS app

I am posting on Facebook wall through HTML page i have added all meta tags on page as well as configured bundle id & appstore id on facebook console also. When i am clicking on post it's redirecting to facebook internal browser but i want to open my app if it's installed or redirect to app store if not.
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta property="al:ios:url" content="artist://" />
<meta property="al:ios:app_store_id" content="49155" />
<meta property="al:ios:app_name" content="Artist" />
<meta property="fb:app_id" content="805534" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://fbdigi.hua.org/AAD/AA_app_icon.png" />
</head>
</html>
I have added below code & it worked:
Final App link code:
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta property="al:ios:url" content="artist://" />
<meta property="al:ios:app_store_id" content="49155" />
<meta property="al:ios:app_name" content="Artist" />
<meta property="al:web:should_fallback" content="false" />
<meta property="fb:app_id" content="805534" />
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://fbdigi.hua.org/AAD/AA_app_icon.png" />
</head>
</html>

Facebook do not use image link?

I have a header that looks like this on my ASP.NET MVC webpage :
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<title>MyTitle</title>
<meta content="Återanvänd på rätt vis" property="og:title">
<meta content="website" property="og:type">
<meta content="http://MyWebb.se/Post/Detail/392" property="og:url">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" property="og:image">
<meta content="Some info" property="og:description">
<meta content="MyWebb" property="og:site_name">
<meta content="Återanvänd på rätt vis" name="twitter:title">
<meta content="http://MyWebb.se/Post/Detail/392" name="twitter:url">
<meta content="Some more info." name="twitter:description">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" name="twitter:image">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" name="description">
<meta content="keywords" name="keywords">
<link href="/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon">
<link href="/Content/Theme/MainTheme.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
And when checking it with this tool : https://developers.facebook.com/tools/debug it does fetch the image.
But when I paste the url in to the wallpost it will only fetch title and desciption, no image. If the thumb however is square the image load just fine.
Why is "not square" images working? Should I generate empty space on all my thumbs(transparent borders with png) so they get a square format? Or is there another solution?
Maybe its because I'm missing the end tag for the meta data? But then the test tool should not fine the data?
The problem was that the og:image was of to small format, after this was fixed it worked just fine without stating the size.
Try defining the image type, width and height as per the example on the Facebook Developer docs - https://developers.facebook.com/docs/web/tutorials/scrumptious/open-graph-object/
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="3523">
<meta property="og:image:height" content="2372">
See also this SO answer - New og:image size for Facebook share? - it sounds like there are minimum dimensions for the images.