I have a strange situation with my website where whenever it appears on Google Search, the alt text of one of the images is also displayed despite not being part of the <title> tag.
On my website (sparen.github.io), I have the following header:
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Andrew Fan's Code Dump: The Embodiment of Code and Hacks (AFCDTECH)</title>
<link rel="stylesheet" type="text/css" href="blah.css">
<meta content="Andrew Fan's Code Dump: The Embodiment of Code and Hacks (AFCDTECH)"
name="description">
<meta name="keywords" content="Sparen, Touhou, Danmakufu, ph3, Tutorial, Script, Project">
<meta name="viewport" content="initial-scale=1">
<script>
<!-- Removed Google Analytics stuff for purposes of StackOverflow Question-->
</script>
</head>
<body id="mhome">
<div class="yui-t1" id="top">
<center><img alt=""Site Logo"" src="images/logo.png" style="width:90%"></center>
However, in Google Search, the title appears as follows:
***This is actually a different page, but all pages on my website seem to have the same issue, and all have the same header structure.
I don't know why it has that extra 'Site Logo' thing, which only appears as part of the image alt text in my banner (which is not even in the head but rather the body of the page).
It hasn't disappeared in the past few months, and it'd be nice to know if there's something I never took into consideration when originally building my website or if there's something BlueGriffon did before I migrated away from it.
Google seems to be confused by your quotes inside the alt text. Just remove them or use
<img alt='"Site Logo"' src="images/logo.png" style="width:90%">
Am I wrong or this could be a flaw (vulnerability?) in Google Search?
Related
I'm adding WCAG accessibility to non-Google display ads. I produce ads using transparent PNGs that tween to 0,0 to animate and build the ad and to show the focus/hover state. Our text in the ad is part of the PNGs. My simplified code below is:
<!DOCTYPE html>
<html>
<head>
<meta content="width=300,height=250" name="ad.size">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>300x250</title>
<link href="300x250.css" rel="stylesheet" type="text/css">
<script defer src="https://url.com/script-that-animates-images/" type="text/javascript"></script>
</head>
<body>
<div id="container">
<a href="https://url.com" title="Advertisement — Text that repeats the image's text. Call to action." id="rolloverCatch">
<div id="content">
<!-- animated images that include the text -->
<img src="https://www.fillmurray.com/300/250">
</div>
</a>
</div>
</body>
</html>
I've added title to the anchor — on hover the image text is repeated — but is that correct and enough? (e.g., alt is for images, title for links, is this correct?) I realize the ideal situation would be to render plain text but what more can be done to better align with accessibility requirements using only images in a display ad? On the images themselves, should I be adding aria-hidden=true? Is there an appropriate reference to use here?
Concerning Google display ads, is the accessibility functions added within that system? I'm tracking I do not have anchors within the uploaded HTML source, should Google display ads have alt text on the top-most image instead?
I'm using accessibleweb.com and Disability Studies Quarterly as references for the above but I'm having trouble finding timely or better resources.
I think in your example the most natural way to do it is to add an alt attribute to the <img> element:
<div id="container">
<a href="https://url.com" id="rolloverCatch">
<div id="content">
<!-- animated images that include the text -->
<img src="https://www.fillmurray.com/300/250" alt="Advertisement — Text that repeats the image's text. Call to action.">
</div>
</a>
</div>
When the <a> element has a text, or another element having itself an accessible name between its opening and closing tags, it takes that as its own accessible name.
And by the way, all the images that have something meaningful must have an alternative text (with alt, aria-label or aria-albelledby).
Like the title says, when I open my html file, it looks weirdly zoomed in. I checked the browser setting and its at 100% zoom. But what is even weirder, when I zoom out to 90% and then zoom in again to 100%, the webpage looks like how I intended it to look like.
I am very new to web development. Any clue as to what might be causing this issue?s
Edited to make question clearer:
This is what I have in my head tag.
I only use css, no scss or anything like that. I write code in visual studio.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Personal CSS -->
<link rel="stylesheet" href="homepage_style.css">
<!-- Google Font "Karla" -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Karla">
<!-- Font Awesome Library -->
<script src="https://kit.fontawesome.com/f4b0af8bdd.js" crossorigin="anonymous"></script>
<title>My Portfolio</title>
I have tested your code, and it works well for me. So by the look of it, it should be the <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> line.
This line makes your page adapt to the user's screen resolution and scale. As we may have different screen resolutions, or simply the body I used to test ( a simple Lorem Ipsum ) could be so much different than yours, it didn't gave me that issue.
As I don't know the contents of your website, i will recommend you to remove the shrink-to-fit=yes as it should be what it is causing this.
That may affect other contents, so maybe you could use some Bootstrap ( you may already be using it ) to readjust some parts of the page if they get misconfigured.
I am currently at a dead end on one of the projects I am working on.
I'm working on the translation of an application in Xamarin Ios, at the moment
the entire application can be translated and the language of the application can be changed directly via the app.
But this application also has Tutorials pages that explain in a few words what is the purpose of this feature.
These pages are in html and have a relatively simplistic content that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p>Use this page to add a new friend</p>
<p>It could be a good idea to give him a pseudo</p>
</div>
</body>
</html>
These pages should be translated on the fly when the user
decides to change the language of the application.
Currently the entire application could be translated into several languages except these html pages, simply because I have no idea what's the best way to do it.
I didn't find any information or documentation about this (I'm pretty sure that's because I'm using Xamarin Ios).
I am looking for a way to fill my html file with the contents of my resx files in which I would put the content html pages.
1 - I will have to save Html tags in my resx files if I decide to write <strong> this word </ strong>, which does not seem to me very practical and will oblige me to record every sentence and / or word that stands between specific tag ?
2 - How can I do this binding between my html file and my resx file? To get something like this
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p> [contentFromMyResxFile] </p>
<p> [AnotherContentFromMyResxFile] </p>
</div>
</body>
</html>
content being loaded directly from my resx file and so could adapt to the language of the application.
After a few days of searching and trying to solve, got nowhere.
CKEditor 4.7.0 is stripping the content between the <title></title> tags. I need CKEDitor to leave the title content alone no matter how / where the title tag is used.
I have tried:
allowedContent: true,
extraAllowedContent : 'title',
extraAllowedContent: 'title[*]',
config.allowedContent = true; (in config.js)
CKEDITOR.dtd.$removeEmpty['title'] = false; (in config.js)
No luck with above. Then tried suggestion here ckeditor deteles page <title></title> title which works, but I end up with:
<!DOCTYPE html>
<html>
<head>
<title>OK Title</title>
</head>
<body> </body>
</html>
<p><br />
<title></title>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Web template presented with pure css."><meta name="keywords" content="css template"></p>
<link href="style.css" rel="stylesheet" />
<link href="red.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /><!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<div class="w3-center">
<h4>BEAUTIFUL RESPONSIVE WEB SITES</h4>
What I am doing is pasting into CKEditor an example CSS templates from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_black&stacked=h
I understand this is not the way standard HTML should be displayed (not to spec), but I need to prevent CKEditor from modifying the title tag no matter, just ignore it and let me use it wherever:) This is just a simple project for classroom where no one sees source of page and I need title tag to show in browser tab when I project page on whiteboard for students.
UPDATE: did discover if I save with the source in view, CKEditor does not modify the title tag. Works this way but not when in visual mode which like to have:)
After what seemed like endless searches found some info on a drupal forum. Had so many links open lost track of exact site where obtained the info, sorry.
Solved the problem by adding the following to my config.js in CKEditor 4.7.0:
config.allowedContent = true;
config.protectedSource.push(/<title>[\s\S]*?<\/title>/gi); // allow content between <title></title>
Hope this will help someone else:)
Ive been making a website for a technology fair project, and it has come to a stage where I want to make it more universal. However when I try to add another language (Chines Mandarin as an example) It just converts the text to some wired english characters.
Here is my example Website
<html lang="cmn">
<head>
<title></title>
</head>
<body>
<!-- This is meant to say in Mandarin "This is some text" -->
這是一些文本
</body>
</html>
But when the page loads, this is what I get
這是一些文本
Im pretty sure that its not some settings in my browser Firefox, because I've or so tried it in Google Chrome
Any suggestions?
Add the following meta definition inside your head tag:
<meta charset="utf-8" />
Did you tried:
<meta charset="utf-8" />
?