Wie kann ich in HTML die <meta...>-Texte mit einem Zeilenumbruch versehen

Ich möchte in diesem Beispiel einen Zeilenwechsel nach "...Text, " einfügen:

<meta name="description" content="DAS ist ein Beispiel an Text, welchem ich einen Zeilenumbruch einfügen möchte.">

Wie erreiche ich das?

PS: Ja, ich habe gesucht - und nicht gefunden...

Ganz liebe Grüsse und einen guten Start ins 2017 - falls man sich erst dann wieder liest ;)

6 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

PWolff

29.12.2016, 17:00

meta-Angaben sind eigentlich nur für kurze interne Mitteilungen an den Browser gedacht, keineswegs dafür, im Normalfall von Menschen gelesen zu werden.

Aber wenn du es trotzdem haben willst:

erste Zeile&#13;&#10;zweite Zeile

oder

erste Zeile&#x0D;&#x0A;zweite Zeile

Woher ich das weiß:Berufserfahrung – Software-Entwickler

shilch

29.12.2016, 16:56

Die Meta Tags sind, wie der Name schon sagt, nur Meta-Angaben, sind also nur für Bots gedacht. Ein Zeilenumbruch in einer Meta-Angabe ist nutzlos und nicht möglich.

Ich vermute, du möchtest in den Google Ergebnissen einen Zeilenumbruch? Google ignoriert Zeichen wie \n und \r, das geht also leider nicht.

DeeBee77

Fragesteller

29.12.2016, 16:59

Hallo shilch.

Naja, 'nutzlos' ist es nicht, weil die Beschreibung beim Teilen auf Social Networks mit einem Zeilenumbruch schon besser aussieht und übersichtlicher ist.

Aber Danke für Deine Antwort :)

shilch

29.12.2016, 17:04

@DeeBee77

Ja, das "nutzlos" bezog sich auf den eigentlichen Nutzen von Meta Tags.
Du kannst ja mal ein \n in der Beschreibung ausprobieren. Google ignoriert das, vielleicht aber die Social Networks nicht.

Danke für das GF Kompliment :D

PWolff

29.12.2016, 17:09

@DeeBee77

Ach so ... für die Darstellung auf Suchergebnis- und ähnlichen Seiten.

Dann probier's mit

erste Zeile&lt;br&gt;zweite Zeile

oder (XHTML-konform)

erste Zeile&lt;br /&gt;zweite Zeile

da ist die Wahrscheinlichkeit noch am wenigsten gering, dass das ignoriert wird.

Aber jeder vernünftige Designer einer Ergebnis-Webseite wird HTML-Tags und nicht darstellbare Zeichen entfernen, damit keiner das Seitendesign kaputt macht.

Es gibt zu viele Trolle in freier Wildbahn, die es nicht bei einem einzelnen sinnvollen Zeilenumbruch bewenden ließen, sondern gleich 150 davon nehmen würden und bei der Gelegenheit auch ausprobieren würden, ob man nicht ein nicht jugendfreies Bild die ganze Seite überlagern lassen kann.

shilch

29.12.2016, 17:12

@PWolff

Haha, auch eine gute Idee :D.
Aber, wie du schreibst: Viele, besonders die bekannten, Websites sind gesichert gegen XSS.

DeeBee77

Fragesteller

29.12.2016, 17:32

Ey vielen Dank - werde das mal ausprobieren (aber wie ich so rauslese wird das garantiert gehen, da traue ich euch :D ).

Grüsse und einen schönen Abend!

DeeBee77

29.12.2016, 16:14

Hallo zusammen:

Es nimmt mir den Beispiel-Text automatisch heraus, der wird nicht geposted!!

Ich versuche es nochmals (ohne < und >, es geht mir auch nur um den Umbruch):

meta name="description" content="DAS ist ein Beispiel an Text, welchem ich einen Zeilenumbruch einfügen möchte."

Bluewater1403

29.12.2016, 16:57

In der Meta Description einen Zeilenumruch einzufügen macht keinen Sinn, da die ja nicht vom Browser angezeigt wird und ein HTML-Tag wie <br> ist in einem Meta-Tag nicht erlaubt.

Warum möchtest Du denn einen Zeilenumruch in der Description haben?

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, programmieren

30.12.2016, 04:35

Meta-Elemente sind nur für Metainformationen angedacht, nicht für Textformatierung.

Workarounds, die du versuchen kannst:

\n einfügen
entsprechende Anzahl an Leerzeichen oder Whitespaces einfügen
Grundsätzlich solltest du für Facebook die og-Meta-Angaben nutzen (https://developers.facebook.com/docs/sharing/webmasters) - heißt dennoch nicht, dass du darin Markup einfügen kannst
Mikrodaten: Versuche es mit einem via Namespace gesondert markierten Bereich innerhalb des body-Elements (funktioniert evt. für Google; für Weiteres siehe hier: http://schema.org/CreativeWork)

<body itemscope="" itemtype="http://schema.org/Article">
  <h2 itemprop="name">Dies ist meine Seite</h2>
  <p itemprop="description">Hier könnte ihre Werbung stehen ...</p>
  <img alt="Ihre Werbung" itemprop="image" src="images/ihre-werbung.jpg" />
</body>

Ähnliche Fragen

Vorschaubild für Link bei WhatsApp?

Welche Angaben muss ich im HTML-Head setzen, damit ich ein Vorschaubild beim senden eines Links erhalte?

Mein HTML-Head:

<head>
    <title>Webseitentitel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Webseiten Beschreibung" />
    <meta name="author" content="Max Mustermann" />
    <meta name="keywords" content="Schlüsselwort, noch ein Schlüsselwort, ..." />
    <meta property="og:title" content="Webseitentitel" />
    <meta property="og:description" content="Webseiten Beschreibung">
    <meta property="og:url" content="https://www.domain.de/" />
    <meta property="og:image" content="http://domain.de/images/logo.png" />
    <meta property="og:image:secure_url" content="https://domain.de/images/logo.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="325" />
    <meta property="og:image:height" content="325" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="de_DE" />
    <link rel="icon" href="images/logo.png" type="image/png">
    <link rel="shortcut icon" href="images/logo.png" type="image/png">
    <link rel="icon" href="images/logo.png" sizes="32x32" />
    <link rel="icon" href="images/logo.png" sizes="192x192" />
    <link rel="apple-touch-icon-precomposed" href="images/logo.png" />
    <meta name="msapplication-TileImage" content="images/logo.png" />
    <link rel="apple-touch-icon" href="images/logo.png">
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <link rel='shortlink' href='https://domain.de/' />
    <link rel="canonical" href="https://domain.de/" />
    <script src="https://kit.fontawesome.com/secret_key.js"></script>
</head>

Laut diesem Post bin ich vorgegangen...

https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing

...ich habe mir auch die Infos von https://ogp.me/ angeschaut.

Ich komme einfach nicht weiter :(

HILFEEEEEEEEE....

...zur Frage

HTML Text verschieben?

Ich möchte den text horizontal mittig haben justify-content und align-items gehen beide nicht


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .WelcomeTitle {
           display: flex;
           flex-direction: column;
          
            text-align: center;
            align-items: center;
            font-family: sans-serif;
        }
    </style>
    <h1 class="WelcomeTitle">Hier kommt ein Titel
        <br>
        hin der Lang ist!</h1>
</body>
</html>

...zur Frage

Zeilenumbruch in Javascrip?

Ich möchte in Javascript eine Text ausgeben. Dabei möchte ich einen Zeilenumbruch einfügen. Habe gefunden das man dies mit \r machen kann. Nur bei mir funksoniert dies nicht.

result.textContent = "Bitte fülle alle Felder aus \r \r Hallo" ;

...zur Frage

eigener HTML Code funktioniert nicht in normal - Was tun?

Ich habe meinen eigenen Code geschrieben (siehe unten). Wenn ich ihn im TryIt Editor von w3schools mache, dann geht er, aber wenn ich die Datei mit demselben Code öffne nicht. Was tun?

P. S. was nicht funktioniert ist das iframe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
	<TITLE></TITLE>
	<META NAME="GENERATOR" CONTENT="OpenOffice 4.1.5  (Win32)">
	<META NAME="CREATED" CONTENT="20190813;12185098">
	<META NAME="CHANGED" CONTENT="20190813;12281423">
</HEAD>
<BODY LANG="de-DE" DIR="LTR">
<P><FONT FACE="Impact, sans-serif"><FONT SIZE=7 STYLE="font-size: 80pt">Start
| <A HREF="../../../Programme/CookieGames/Shortcut">My Games</A> |
<A HREF="https://www.cookie-games.com/account/ich">Profile</A> | Info</FONT></FONT></P>
    <iframe src="https://www.cookie-games.com" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="https://www.cookie-games.com"> click here to view the page directly. </a></iframe>
<P><BR><BR>
</P>
</BODY>
</HTML>

...zur Frage

Umlaute auf HTML Webseite werden nicht richtig angezeigt?

Bei einer Webseite die ich schon vor längerem programmiert habe, werden plötzlich die Umlaute nicht mehr richtig angezeigt. Sowohl bei Firefox als auch bei Internet Explorer, und das nicht nur auf meinem Laptop, auch andere Besucher berichteten davon.

Habe im Internet recherchiert und habe dann folgenden META Tag hinzugefügt:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

plus eine .htaccess erstellt mit dem charset:

AddDefaultCharset iso-8859-1

hat nicht funktioniert. Habe denn einfach das "iso-8859-1" mit "utf-8" ersetzt, hat jedoch auch nicht geklappt. hat jemand eine Idee?

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

DE Sonderzeichen Fehler in HTML?

Hi,

ich sitze momentan an einer Datei, um ein paar Dinge auszuprobieren. Ich habe die Meta-Tags wie gewohnt aus einer anderen (funktionierenden) Datei kopiert.

Nun werden allerdings ausschließlich in meiner Datei die Umlaute wie Ä,Ö,Ü und ß mit

"�"

angezeigt. Auch das rein-kopieren Tags aus anderen Dateien, oder das entfernen des Stylesheets hat nix geändert. Kurzzeitig hatte ich auch den Meta-Tag:

mit reingenommen, allerdings ohne Erfolg oder Veränderungen. Auch das Debugging von W3C hat nix auffälliges gefunden:

Für alle helfenden Hände großes Danke!

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="example, html, head, meta">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="formate.css">
    <title>Das Box-Modell</title>
  </head>


<body>
  <header>
      
    <div class="flex">
     <img src="bilder/logo.svg" alt="logo">
    </div>
    
     <h1>Wilkommen auf der Test-Seite!</h1>
     <nav>
              <a href="#link_1.html">Blog</a>
              <a href="#link_1.html">Unterseite 1</a>
              <a href="#link_1.html">Unterseite 2</a>
              <a href="#link_1.html">Kontakt</a>
     </nav>
          
    </header>
      
      <main>
          
          <h2>ÜÜÜCCS-basierte Layouts <br><br />HTML-Struktur ohne CSS</h2>         
          
      </main>
    
    
    
    <footer>
     <a href="kontakt.html">Kontakt</a>
     <p>&copy; 2024 by GTA1A</p>
    </footer>


</body>
</html>

...zur Frage

Einkaufsliste JavaScript mehrere Einträge?

Hallo, ich bin noch Anfänger im Programmieren und hätte eine Frage: wie kann ich mehrere Einträge in die UL packen? Bis jetzt geht nur ein Eintrag. Und wenn ich einen neuen hinzufügen will dann wird der alte gelöscht.

Tut mir leid für die dummen variablen Namen xD

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <input type="text" name="kaufen" id="test">
    <button id="btn">Hinzufügen</button>
    <ul id="list"></ul>
<script>
const hinzufügenbtn = document.getElementById("btn");
 hinzufügenbtn.addEventListener("click", function(){
   const add =  document.getElementsByName("kaufen")[0].value;
    const  tt = document.getElementById("list").innerHTML = add;
 })
</script>
</body>
</html>

...zur Frage

Wie bekomme ich einen Zeilenumbruch bei Daten aus einer Datenbank?

In der Datenbank steht: "Step 1 - Step 3\nDokumente zur Eingabe".

Im Quelltext wird der Inhalt korrekt ausgelesen und in die Variabe: $text geschrieben.

Um auf der Internetseite angezeigt zu werden habe ich den Quelltext:

<p align="justify"><?php echo nl2br($text) ?></p>

Auf der Internetseite angezeigt wird: "Step 1 - Step 3\nDokumente zur Eingabe".

Eigentlich sollte hier ein Umbruch durchgeführt werden:

Step 1 - Step 3

Dokumente zur Eingabe

Wird aber nicht! Gebe ich den Text direkt ein: $text="Step 1 - Step 3\nDokumente zur Eingabe" (also nicht aus der Datenbank gelesen), funktioniert es.

Wie erreiche ich das auch der Aus der Datenbank übernommene Text mit Zeilenumbruch dargestellt wird?

Würde mich über Hilfe freuen.

...zur Frage

CSS: Wie Gitarren-Akkorde platzsparend in den Text einfügen?

Ich erstelle HTML-Dokumente mit Liedtexten zum Ausdrucken. Die Texte sind so groß wie möglich. Also viele Strophen, umso kleiner der Text.

Nun möchte ich Akkord-Angaben hinzufügen. Die führen dazu, dass die Zeilenhöhe enorm anschwillt und der Text nicht mehr auf A4 passt:

Welches CSS stellt die Akkorde höher, aber behält die Zeilenhöhe? Hier habe ich experimentiert:

akk_c::before {
  color:          red;
  background:     #eee;
  vertical-align: super;
  font-family:    arial, sans-serif;
  font-size:      80%;
}
akk_c::before   { content: "C"; }

...zur Frage

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->

Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

...zur Frage

Zeilenumbruch Word-Tabelle?

Hallo,

wie bekomme ich es hin, dass der Text unten in die nächste Spalte rutscht. Leider wird die Spalte nur immer größer. Oder gibt es einen anderen Trick, wie man auf einem Linierten Blatt in Word schreiben kann. Habe auch schon unter Tabelleneigenschaften den Haken bei „Zeilenwechsel auf Seiten zulassen“ herausgenommen, aber dies klappt auch nicht.

Danke im voraus

...zur Frage

Wie kann ich den Fehler bei meiner To-Do-Liste (mit HTML und JavaScript) beheben?

Mein Ziel ist es, eine To-Do-Liste mit HTML, CSS und Javascript zu erstellen. Eine Person gibt ihr To-Do ein und kann es mit ENTER oder mit dem "Bestätigen"-Button hinzufügen. Gleichzeitig wird auch die Leiste, wo man dies eingibt, wieder geleert.

Wenn man nun dort etwas eingibt und bestätigt, wird die Eingabeleiste geleert, aber das To-Do fügt sich nicht hinzu. Oder besser gesagt: Es erscheint nur für ein paar Millisekunden.

Wie kann ich den Fehler beheben (ich bin Anfänger)?

Hier der Code von der index.html-Datei:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo Liste</title>
    <style>
      #input {
        margin: 50px;
        text-align: center;
      }
    </style>
    <script>
      function addTodo() {
        todolist.innerHTML += `${todofield.value}`;
        todofield.value= '';
      }
    </script>
  </head>
  <body>
    <form onsubmit="addTodo()">
      <div id="input">
        <input type="text" id="todofield">
        <button type="submit" for="todofield">Bestätigen</button>
      </div>
    </form>
    <div id="todolist"></div>
  </body>
</html>

Danke für eure Hilfe.

...zur Frage

refresh funktion einbauen?

wie kan ich eine refresh funtion bei einer if funtion einbauen?

Hier soll zum Beispiel anstatt document.get.. die refresh funton stehen.

<meta http-equiv="refresh" content="600">


if (myHour >= 15 && myHour < 16 && myMinutes >= 0 &&myMinutes < 10 ) {
      document.getElementById("contMinutes").innerHTML = '<img src="0074.png" alt="xxx" />';

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen