search

OWASP / www--site-theme

Contains owasp site theme specific items (headers, footers, json, menus)
9 stars 27 forks source link

Twitter cards social preview content needed #52

Open kingthorin opened 4 years ago

kingthorin commented 4 years ago

It looks like the site inserts OpenGraph metatags (for Facebook etc), however it doesn't insert the tags necessary for Twitter which is used quite extensively as a sharing platform in the industry. It would be nice if the necessary tags for that were populated as well.

Refs:

Edit: It seems twitter will fall back to OpenGraph.

kingthorin commented 4 years ago

Note Twitter social preview cards currently error out for owasp.org content: https://cards-dev.twitter.com/validator image

I'm guessing but an not 100% sure that this has something to do with the pipe character in the title element. (Could we change to a hyphen?)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The Web Security Testing Guide (WSTG) Project produces the premier cybersecurity testing resource for web application developers and security professionals.">
<meta property="og:description" content="The Web Security Testing Guide (WSTG) Project produces the premier cybersecurity testing resource for web application developers and security professionals.">
<meta propery="og:title" content="OWASP Web Security Testing Guide| OWASP Foundation">
<meta property="og:url" content="https://owasp.github.io/www-project-web-security-testing-guide/">
<meta property="og:locale" content="en_US">

<meta property="og:type" content="website" />
<meta property="og:image" content="https://owasp.org/www--site-theme/favicon.ico" />
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
<script src="/cdn-cgi/apps/head/QYMcuzl7EEkHj4wXQRswO8EpDEg.js"></script><link rel="canonical" href="https://owasp.org/www-project-web-security-testing-guide/" />
View Source Screenshot ![image](https://user-images.githubusercontent.com/7570458/92635860-80578880-f2a4-11ea-9e53-c6631064339c.png)

Also why are the og:url values using owasp.github.io not owasp.org?

hblankenship commented 4 years ago

Are you seeing the owasp.github.io running locally or actually on the site?

kingthorin commented 4 years ago

That was live.

<meta property="og:url" content="https://owasp.github.io/www-project-web-security-testing-guide/">

hblankenship commented 4 years ago

Also, the pipe character was actually recommended by the SEO organization. Let me think on this one.

kingthorin commented 4 years ago

Okay, like I said I'm not 100% sure if that was the issue or not. I just didn't see anything else that seemed out of the ordinary. Perhaps it's simply because the pipe is appended without a leading space? ex:

- <meta propery="og:title" content="OWASP Web Security Testing Guide| OWASP Foundation">
+ <meta propery="og:title" content="OWASP Web Security Testing Guide | OWASP Foundation">