I'm looking to embed images in an html file so that they show up as a preview on Twitter once the link is posted.
Currently, I have written this HTML file, but the image included in the meta tag does not display after the link is posted, how can I do this?
Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Embedded Image Test</title>
<meta name="twitter:image:" content="https://teotihuacan-media.com/images/bck.jpg">
<meta name="twitter:image:alt" content="A simple image">
<meta name="twitter:site:"Lorem IpsTest Website",>
<meta name="twitter:description" content="Welcome lorem ipsum dolore">
<HEAD>
<TITLE>Lorem IpsTest Website</TITLE>
</HEAD>
<BODY>
<CENTER><p>izudfhzaiufhnzaouif 5645</p></CENTER>
<CENTER><img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane"></CENTER>
</BODY>
</html>
Based on the docs, it looks like you're missing two required meta tags:
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Title Goes Here" />
Your twitter:site tag is also incorrectly formatted - it should be this:
<meta name="twitter:site" content="Lorem IpsTest Website">
The opening <head> tag should also be moved to right after the opening <html> tag in order to encompass the meta tags. I'm also unsure why you have two <title> tags - get rid of one of them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Image Test</title>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Embedded Image Test" />
<meta name="twitter:image" content="https://teotihuacan-media.com/images/bck.jpg">
<meta name="twitter:image:alt" content="A simple image">
<meta name="twitter:description" content="Welcome lorem ipsum dolore">
</head>
<body>
<p>izudfhzaiufhnzaouif 5645</p>
<img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane">
</body>
</html>
for more information about twitter cards read this https://sproutsocial.com/insights/twitter-cards/
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<html>
<body>
<!--Title and Banner-->
<header>
<title>
<h1>Flip 'n' Sell</h1>
<title>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>`
Here is my html for my page so far
and here is my css. As you can see, all that I have done is styled it to where the default margin and
padding is nonexistent. What when I load this up and look at the webpage, there's nothing, nothing at all. What am I doing wrong. I still new to this all by the way.
* {
margin: none;
padding: none;
box-sizing: border-box;
}
Move the opening <html> tag to under the Doctype declaration before the <head> tag, and change or remove the <title> tag from your body.
The title tag is defining a title for the entire document (what's shown on the browser tab) and may be causing some confusion when rendering the page.See W3 School's post on the title tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Title and Banner-->
<header>
<h1>Flip 'n' Sell</h1>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>
The fix was your title tag was not terminated. Needed the corresponding </title> but in reality the title tag does not belong there and should be removed as I did in my example.
If I try to simply get the source html of a page I cannot get the full source. It breaks in some point. Returns less than half of the exact source html.
var pagedata = UrlFetchApp.fetch("https://stackoverflow.com");
var html = pagedata.getContentText();
Logger.log(html);
returns:
[20-01-06 11:37:12:483 AST] <!DOCTYPE html>
<html class="html__responsive html__unpinned-leftnav">
<head>
<title>Stack Overflow - Where Developers Learn, Share, & Build Careers</title>
<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d">
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">
<link rel="image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">
<link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
<meta name="description" content="Stack Overflow is the largest, most trusted online community for developers to learn, share their programming knowledge, and build their careers."/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<meta property="og:type" content= "website" />
<meta property="og:url" content="https://stackoverflow.com/"/>
<meta property="og:site_name" content="Stack Overflow" />
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:domain" content="stackoverflow.com"/>
<meta name="twitter:title" property="og:title" itemprop="name" content="Stack Overflow - Where Developers Learn, Share, & Build Careers" />
<meta name="twitter:description" property="og:description" itemprop="description" content="Stack Overflow | The World’s Largest Online Community for Developers" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=805608b6266c"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=d0797a2dd6f2" >
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=b556f32ececa" >
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/Product/product.css?v=b21a396b1289" >
<link rel="alternate" type="application/atom+xml" title="Feed of recent questions" href="/feeds">
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/Channels/channels.css?v=05e29db3ebd2" >
<script>
StackExchange.init({"locale":"en","serverTime":1578299832,"routeName":"Home/Index","stackAuthUrl":"https://stackauth.com","networkMetaHostname":"meta.stackexchange.com","site":{"name":"Stack Overflow","description":"Q&A for professional and enthusiast programmers","isNoticesTabEnabled":true,"enableNewTagCreationWarning":true,"insertSpaceAfterNameTabCompletion":false,"id":1,"childUrl":"https://meta.stackoverflow.com","negativeVoteScoreFloor":null,"enableSocialMediaInSharePopup":true,"protocol":"https"},"user":{"fkey":"57ec692c216f7cb3d5bad86dceda031ede043f08f80e49d7b3a503d818751da0","tid":"0e7426d0-71e0-4546-1387-57279d43b924","rep":0,"isAnonymous":true,"isAnonymousNetworkWide":true},"events":{"postType":{"question":1},"postEditionSection":{"title":1,"body":2,"tags":3}},"story":{"minCompleteBodyLength":75,"likedTagsMaxLength":300,"dislikedTagsMaxLength":300},"jobPreferences":{"maxNumDeveloperRoles":2,"maxNumIndustries":4},"svgIconPath":"https://cdn.sstatic.net/Img/svg-icons","svgIconHash":"53ac0f6119d0"}, {"userProfile":{"openGraphAPIKey":"4a307e43-b625-49bb-af15-ffadf2bda017"},"userMessaging":{},"tags":{},"snippets":{"renderDomain":"stacksnippets.net","snippetsEnabled":true},"slack":{"sidebarAdDismissCookie":"slack-sidebar-ad"},"site":{"allowImageUploads":true,"enableImgurHttps":true,"enableUserHovercards":true,"forceHttpsImages":true,"styleCode":true},"questions":{"showPostNoticesV2":true},"paths":{},"monitoring":{"clientTimingsAbsoluteTimeout":30000,"clientTimingsDebounceTimeout":1000},"mentions":{"maxNumUsersInDropdown":50},"markdown":{"asteriskIntraWordEmphasis":true},"flags":{"allowRetractingCommentFlags":true,"allowRetractingFlags":true},"comments":{},"accounts":{"currentPasswordRequiredForChangingStackIdPassword":true}});
StackExchange.using.setCacheBreakers({"js/prettify-full.en.js":"e75c65979e48","js/moderator.en.js":"b6ce25c91468","js/full-anon.en.js":"bcefec08f832","js/full.en.js":"bf88016bdeb3","js/wmd.en.js":"28e8cee04c52","js/mobile.en.js":"a168d277c579","js/help.en.js":"373025d0518f","js/tageditor.en.js":"693662f7ff37","js/tageditornew.en.js":"803d1cb2516d","js/inline-tag-editing.en.js":"b5436857e5dd","js/revisions.en.js":"055fbe1202e9","js/review.en.js":"7b6845367497","js/tagsuggestions.en.js":"dba299567acf","js/post-validation.en.js":"bc3e5be5330d","js/explore-qlist.en.js":"8498d0bb288b","js/events.en.js":"57fa0feb2feb","js/keyboard-shortcuts.en.js":"ab1fdc223933","js/adops.en.js":"6b9883f0531e","js/begin-edit-event.en.js":"cb9965ad8784","js/ask.en.js":"e4dd8c66240e","js/question-editor.en.js":"","js/snippet-javascript-codemirror.en.js":"07eb23cd1f61"});
StackExchange.using("gps", function() {
StackExchange.gps.init(true);
});
</script>
<noscript id="noscript-css"><style>body,.top-bar{margin-top:1.9em}</style></noscript>
</head>
<body class="home-page unified-theme">
<div id="notify-container"></div>
<div id="custom-header"></div>
<header class="top-bar js-top-bar top-bar__network _fixed">
<div class="wmx12 mx-auto grid ai-center h100" role="menubar">
<div class="-main grid--cell">
<span class="ps-relative"></span>
<div class="topbar-dialog leftnav-dialog js-leftnav-dialog dno">
<div class="left-sidebar js-unpinned-left-sidebar" data-can-be="left-sidebar" data-is-here-when="sm md lg"></div>
</div>
<a href="https://stackoverflow.com" class="-logo js-gps-track"
data-gps-track="top_nav.click({is_current:true, location:1, destination:8})">
<span class="-img _glyph">Stack Overflow</span>
</a>
</div>
<ol class="list-reset grid gs4" role="presentation">
<li class="grid--cell">
<a href="#"
class="-marketing-link is-selected js-gps-track js-products-menu"
aria-controls="products-popover"
data-controller="s-popover"
data-action="s-popover#toggle"
data-s-popover-placement="bottom"
data-gps-track="top_nav.products.click({location:1, destination:1})"
data-ga="["top navigation","products menu click",null,null,null]">
Products
</a>
</li>
<li class="grid--cell md:d-none">
<a href="/teams/customers" class="-marketing-link js-gps-track"
data-gps-track="top_nav.products.click({location:1, destination:7})"
data-ga="["top navigation","customers menu click",null,null,null]">Customers</a>
</li>
<li class="grid--cell md:d-none">
<a href="/teams/use-cases" class="-marketing-link js-gps-track"
data-gps-track="top_nav.products.click({location:1, destination:8})"
data-ga="["top navigation","use cases menu click",null,null,null]">Use cases</a>
</li>
Original source has 4168 lines. First of all there is no closing body, html tags. How can I get the full source code of a page with UrlFetchApp?
The Logger.log() method expects a string or other JavaScript object. The logs can only hold a limited amount of data, so avoid logging large amounts of text.
Source
The character limit for the logger.log function is not specified, but your variable html does contain all of your data.
I try to make a page after tutorial and I have a question why my page jums or moves during refreshing when I clik for example on the bar? On the tutorial the page isn't jump and my jumps??? Click on the blue bar and the page jums or moves what is wrong with it?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
<meta name="keywords" content="filozofia, książki, blog, przemyślenia">
<meta name="author" content="Wojciech Bukowski">
<meta http-equiv="X-Ua-Compatible" content="IE-edge,chrome=1">
<title>Philosophia Blog</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<h1>Philosophia Blog</h1>
</div>
<nav>
<div id="topbar">
<ul>
<li>Strona Główna</li>
<li>Pierwszy raz tutaj?</li>
<li>Dlaczego filozofia?</li>
<li>O autorze</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
After seeing your code, if you don't want this to happen remove the href in your anchor tag. However, by the looks of your code, you're trying to make a navbar. So for now, don't worry about what's happening and keep going with the tutorial!
I have set up a node js based server. I need to display specific polish characters in one of my pages. I have tried to add few lines I found in internet but there was no success, I'm still getting "?" instead of getting polish character. For views I use ejs.
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta charset = "UTF-8">
<meta http-equiv="refresh" content="10" >
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id = "NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
My actual result is "Niepubliczny Zak?ad medycyny rodzinnej" instead of "Niepubliczny Zakład medycyny rodzinnej". (you can find it in div).
You could try this:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id="NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
For me, this code works OK :
http://next.plnkr.co/edit/DKvMsvAwoxMPu36J?open=lib%2Fscript.js&preview