Fixed head tags (#332)

* Head tags improved and more organized * Fixed the head problem
quran · Jun 3, 2016 · fa2b52f · fa2b52f
1 parent 78d0bcb
commit fa2b52f
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
     "react-bootstrap": "^0.28.4",
     "react-cookie": "^0.3.4",
     "react-dom": "^0.14.0",
-    "react-helmet": "^2.3.1",
+    "react-helmet": "^3.1.0",
     "react-metrics": "^1.1.0",
     "react-paginate": "^0.4.0",
     "react-redux": "^4.4.1",

diff --git a/src/config.js b/src/config.js
@@ -38,16 +38,44 @@ module.exports = Object.assign({
         {property: 'og:description', content: description},
         {property: 'og:url', content: 'http://quran.com'},
         {property: 'og:type', content: 'website'},
-        {property: 'twitter:card', content: 'summary'},
-        {property: 'twitter:title', content: title},
-        {property: 'twitter:description', content: description},
-        {property: 'twitter:image', content: 'http://quran.com/images/thumbnail.png'},
-        {property: 'twitter:image:width', content: '200'},
-        {property: 'twitter:image:height', content: '200'}
+        {name: 'twitter:card', content: 'summary'},
+        {name: 'twitter:title', content: title},
+        {name: 'twitter:description', content: description},
+        {name: 'twitter:image', content: 'http://quran.com/images/thumbnail.png'},
+        {name: 'twitter:image:width', content: '200'},
+        {name: 'twitter:image:height', content: '200'}
       ],
       link: [
         {rel: 'apple-touch-icon', href: '/images/apple-touch-icon.png'},
         {rel: 'apple-touch-icon-precomposed', href: '/images/apple-touch-icon-precomposed.png'}
+      ],
+      /* SEO: https://developers.google.com/structured-data/slsb-overview#markup_examples */
+      /* SEO: https://developers.google.com/structured-data/site-name#markup_requirements */
+      script: [
+        {
+          "type": "application/ld+json",
+          "innerHTML": `{
+            "@context": "http://schema.org",
+            "@type": "WebSite",
+            "name": "Quran",
+            "alternateName": "Quran.com",
+            "url": "http://quran.com",
+            "potentialAction": {
+              "@type": "SearchAction",
+              "target": "http://quran.com/search?q={search_term_string}",
+              "query-input": "required name=search_term_string"
+            }
+          }`
+        },
+        {
+          "type": "application/ld+json",
+          "innerHTML": `{
+            "@context": "http://schema.org",
+            "@type": "Organization",
+            "url": "http://quran.com",
+            "logo": "http://quran.com/images/thumbnail.png"
+          }`
+        }
       ]
     }
   }

diff --git a/src/containers/App/index.js b/src/containers/App/index.js
@@ -69,7 +69,7 @@ export default class App extends Component {
               <Col md={10} mdOffset={1} className="text-center">
                 <ul className={`list-inline ${styles.seo}`}>
                   <li><a href="/sitemap.xml">Sitemap</a></li>
-                  {Object.values(surahs).filter(surah => [2, 3, 18, 19, 55, 56, 67, 112].includes(surah.id)).map(surah => (
+                  {Object.values(surahs).filter(surah => [2, 3, 18, 19, 55, 56, 67, 112].indexOf(surah.id)).map(surah => (
                     <li key={surah.id}>
                       <Link
                         to={`/${surah.id}`}

diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
@@ -167,7 +167,7 @@ export default class Surah extends Component {
       return `Surah ${surah.name.simple} [${surah.id}:${params.range}]`;
     }
 
-    return `${surah.id} Surah ${surah.name.simple}`;
+    return `Surah ${surah.name.simple} [${surah.id}]`;
   }
 
   description() {
@@ -418,36 +418,35 @@ export default class Surah extends Component {
     return (
       <div className="surah-body">
         <Helmet
-          title={surah.name.simple}
           {...makeHeadTags({
             title: this.title(),
             description: this.description()
           })}
-        />
-        <script type="application/ld+json" dangerouslySetInnerHTML={{
-          __html: `{
-            "@context": "http://schema.org",
-            "@type": "BreadcrumbList",
-            "itemListElement": [{
-              "@type": "ListItem",
-              "position": 1,
-              "item": {
-                "@id": "http://quran.com/",
-                "name": "Quran"
-              }
-            },{
-              "@type": "ListItem",
-              "position": 2,
-              "item": {
-                "@id": "http://quran.com/${surah.id}",
-                "name": "${surah.name.simple}"
-              }
-            }]
-          }`
-        }} />
-        <style dangerouslySetInnerHTML={{
-          __html: `.text-arabic{font-size: ${options.fontSize.arabic}rem;} .text-translation{font-size: ${options.fontSize.translation}rem;}`
-          }}
+          script={[{
+            "type": "application/ld+json",
+            "innerHTML": `{
+              "@context": "http://schema.org",
+              "@type": "BreadcrumbList",
+              "itemListElement": [{
+                "@type": "ListItem",
+                "position": 1,
+                "item": {
+                  "@id": "http://quran.com/",
+                  "name": "Quran"
+                }
+              },{
+                "@type": "ListItem",
+                "position": 2,
+                "item": {
+                  "@id": "http://quran.com/${surah.id}",
+                  "name": "${surah.name.simple}"
+                }
+              }]
+            }`
+          }]}
+          style={[{
+            "cssText": `.text-arabic{font-size: ${options.fontSize.arabic}rem;} .text-translation{font-size: ${options.fontSize.translation}rem;}`
+          }]}
         />
         <Header surah={surah}>
           <Row className="navbar-bottom">

diff --git a/src/helpers/Html.js b/src/helpers/Html.js
@@ -48,30 +48,6 @@ class Html extends React.Component {
               }}
               charSet="UTF-8"
             />
-            {/* SEO: https://developers.google.com/structured-data/slsb-overview#markup_examples */}
-            {/* SEO: https://developers.google.com/structured-data/site-name#markup_requirements */}
-            <script type="application/ld+json" dangerouslySetInnerHTML={{
-              __html: `{
-                "@context": "http://schema.org",
-                "@type": "WebSite",
-                "name": "Quran",
-                "alternateName": "Quran.com",
-                "url": "http://quran.com",
-                "potentialAction": {
-                  "@type": "SearchAction",
-                  "target": "http://quran.com/search?q={search_term_string}",
-                  "query-input": "required name=search_term_string"
-                }
-              }`
-            }} />
-            <script type="application/ld+json" dangerouslySetInnerHTML={{
-              __html: `{
-                "@context": "http://schema.org",
-                "@type": "Organization",
-                "url": "http://quran.com",
-                "logo": "http://quran.com/images/thumbnail.png"
-              }`
-            }} />
             <script dangerouslySetInnerHTML={{__html: `window.__data=${serialize(store.getState())};`}} charSet="UTF-8"/>
             <script src="https://cdn.ravenjs.com/3.0.4/raven.min.js" />
             {Object.keys(assets.javascript).map((script, i) =>

diff --git a/src/helpers/buildFontFaces.js b/src/helpers/buildFontFaces.js
@@ -41,7 +41,7 @@ export function createFontFacesArray(ayahs) {
   ayahs.map((ayah) => {
     const font = ayah.words[0].className;
 
-    if (!fontFaces.includes(font)) {
+    if (fontFaces.indexOf(font) === -1) {
       fontFaces.push(font);
       fontFacesArray.push(
         `@font-face {font-family: '${font}';

diff --git a/src/helpers/makeHeadTags.js b/src/helpers/makeHeadTags.js
@@ -6,7 +6,7 @@ export default function makeHeadTags({ title, description, url, image }) {
   if (title) {
     tags.title = title;
     tags.meta.push(
-      {name: 'title', content: title},
+      {property: 'og:site_name', content: title},
       {property: 'og:title', content: title},
       {name: 'twitter:title', content: title}
     );