diff --git a/src/components/AudioDetails/VAudioDetails.vue b/src/components/AudioDetails/VAudioDetails.vue
index 74b708e88d..d0f8e86f69 100644
--- a/src/components/AudioDetails/VAudioDetails.vue
+++ b/src/components/AudioDetails/VAudioDetails.vue
@@ -22,7 +22,9 @@
           <div v-if="audio.audio_set">
             <dt>{{ $t('audio-details.table.album') }}</dt>
             <dd>
-              <a :href="audio.audio_set.url">{{ audio.audio_set.name }}</a>
+              <VLink :href="audio.audio_set.url">{{
+                audio.audio_set.name
+              }}</VLink>
             </dd>
           </div>
           <div v-if="audio.category">
@@ -52,13 +54,9 @@
               {{ $t('audio-details.table.provider') }}
             </dt>
             <dd>
-              <a
-                :href="audio.foreign_landing_url"
-                target="blank"
-                rel="noopener noreferrer"
-              >
+              <VLink :href="audio.foreign_landing_url">
                 {{ providerName }}
-              </a>
+              </VLink>
             </dd>
           </div>
           <div v-if="audio.source && sourceName !== providerName">
@@ -87,9 +85,12 @@
 import getProviderName from '~/utils/get-provider-name'
 import { PROVIDER } from '~/constants/store-modules'
 import { mapState } from 'vuex'
+import VLink from '~/components/VLink.vue'
+import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 
 export default {
   name: 'VAudioDetails',
+  components: { VLink, VAudioThumbnail },
   props: ['audio'],
   computed: {
     ...mapState(PROVIDER, ['audioProviders']),
diff --git a/src/components/AudioDetails/VRelatedAudio.vue b/src/components/AudioDetails/VRelatedAudio.vue
index e4ad72ce8c..bd093c51fe 100644
--- a/src/components/AudioDetails/VRelatedAudio.vue
+++ b/src/components/AudioDetails/VRelatedAudio.vue
@@ -24,10 +24,13 @@ import { computed, ref } from '@nuxtjs/composition-api'
 import { AUDIO } from '~/constants/media'
 
 import useRelated from '~/composables/use-related'
-import { isMinScreen } from '@/composables/use-media-query'
+import { isMinScreen } from '~/composables/use-media-query'
+import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
+import LoadingIcon from '~/components/LoadingIcon.vue'
 
 export default {
   name: 'VRelatedAudio',
+  components: { VAudioTrack, LoadingIcon },
   props: {
     audioId: {
       type: String,
diff --git a/src/components/ExtensionBrowsers.vue b/src/components/ExtensionBrowsers.vue
index 09820b1b1d..dc6c00c59a 100644
--- a/src/components/ExtensionBrowsers.vue
+++ b/src/components/ExtensionBrowsers.vue
@@ -1,15 +1,13 @@
 <template>
   <ul class="buttons is-centered">
     <li v-for="(browser, key) in browsers" :key="key">
-      <a
-        target="_blank"
-        rel="nofollow noreferrer"
+      <VLink
         :href="browser.extUrl"
         class="browser-button button small me-2 is-opaque"
       >
         {{ $t(`browsers.${key}`) }}
         <img class="ms-2" :src="browser.logo" :alt="$t(`browsers.${key}`)" />
-      </a>
+      </VLink>
     </li>
   </ul>
 </template>
diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
index 2480106c2e..7b8107411b 100644
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -16,12 +16,9 @@
           <div class="attribution mt-8">
             <i18n path="footer.caption.label" tag="p" class="caption">
               <template #noted>
-                <a
-                  href="https://creativecommons.org/policies#license"
-                  target="_blank"
-                  rel="noopener"
-                  >{{ $t('footer.caption.noted') }}</a
-                >
+                <VLink href="https://creativecommons.org/policies#license">{{
+                  $t('footer.caption.noted')
+                }}</VLink>
               </template>
               <template #attribution>
                 <a
diff --git a/src/components/ImageDetails/ReuseSurvey.vue b/src/components/ImageDetails/ReuseSurvey.vue
index 248b6042e7..492e2f76f0 100644
--- a/src/components/ImageDetails/ReuseSurvey.vue
+++ b/src/components/ImageDetails/ReuseSurvey.vue
@@ -1,15 +1,13 @@
 <template>
   <div class="reuse-survey caption mt-1">
     {{ $t('photo-details.survey.content') }}
-    <a
+    <VLink
       :href="formLink"
-      target="_blank"
-      rel="noopener"
       @click="onReuseSurveyClick"
       @keyup.enter="onReuseSurveyClick"
     >
       {{ $t('photo-details.survey.link') }}
-    </a>
+    </VLink>
     {{ $t('photo-details.survey.answer') }}
   </div>
 </template>
@@ -20,6 +18,7 @@ import {
   DETAIL_PAGE_EVENTS,
 } from '~/constants/usage-data-analytics-types'
 import { USAGE_DATA } from '~/constants/store-modules'
+import VLink from '~/components/VLink.vue'
 
 const reuseForm =
   'https://docs.google.com/forms/d/e/1FAIpQLSegPUDIUj_odzclJhhWRfPumSfbHtXDVDCHqRfFl7ZS8cMn2g/viewform'
@@ -27,6 +26,7 @@ const imageLinkEntry = '2039681354'
 
 export default {
   name: 'ReuseSurvey',
+  components: { VLink },
   props: ['image'],
   data: () => ({
     location: '',
diff --git a/src/components/MigrationNotice.vue b/src/components/MigrationNotice.vue
index ee8948d8ca..1f07b80619 100644
--- a/src/components/MigrationNotice.vue
+++ b/src/components/MigrationNotice.vue
@@ -3,11 +3,10 @@
     {{ $t('migration-notice.intro') }}
     <i18n tag="span" path="migration-notice.more">
       <template #read-more>
-        <a
+        <VLink
           class="text-dark-blue hover:text-dark-blue underline"
           href="https://wordpress.org/news/2021/05/welcome-to-openverse/"
-          target="_blank"
-          >{{ $t('migration-notice.read') }}</a
+          >{{ $t('migration-notice.read') }}</VLink
         >
       </template>
     </i18n>
@@ -16,9 +15,10 @@
 
 <script>
 import NoticeBar from '~/components/NoticeBar/NoticeBar.vue'
+import VLink from '~/components/VLink.vue'
 
 export default {
   name: 'MigrationNotice',
-  components: { NoticeBar },
+  components: { NoticeBar, VLink },
 }
 </script>
diff --git a/src/components/VAudioTrack/layouts/VFullLayout.vue b/src/components/VAudioTrack/layouts/VFullLayout.vue
index 24166ca241..764364d91b 100644
--- a/src/components/VAudioTrack/layouts/VFullLayout.vue
+++ b/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -41,12 +41,12 @@
             class="font-semibold leading-snug"
           >
             <template #creator>
-              <a
+              <VLink
                 class="p-px rounded-sm focus:outline-none focus:ring focus:ring-pink"
                 :href="audio.creator_url"
               >
                 {{ audio.creator }}
-              </a>
+              </VLink>
             </template>
           </i18n>
 
@@ -71,11 +71,13 @@
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import DownloadButton from '~/components/DownloadButton.vue'
+import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
   name: 'VFullLayout',
   components: {
     DownloadButton,
+    VLink,
   },
   props: ['audio', 'size', 'status', 'currentTime'],
   setup(props) {
diff --git a/src/components/VContentReport/VContentReportForm.vue b/src/components/VContentReport/VContentReportForm.vue
index d57438ee11..a0af91d6f3 100644
--- a/src/components/VContentReport/VContentReportForm.vue
+++ b/src/components/VContentReport/VContentReportForm.vue
@@ -10,13 +10,9 @@
         tag="p"
       >
         <template #source>
-          <a
-            :href="media.url"
-            class="text-pink hover:underline"
-            target="_blank"
-            rel="noopener"
-            >{{ providerName }}</a
-          >
+          <VLink :href="media.url" class="text-pink hover:underline">{{
+            providerName
+          }}</VLink>
         </template>
       </i18n>
     </div>
@@ -114,6 +110,7 @@ import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
 import VDmcaNotice from '~/components/VContentReport/VDmcaNotice.vue'
 import VReportDescForm from '~/components/VContentReport/VReportDescForm.vue'
+import VLink from '~/components/VLink.vue'
 
 import ReportService from '~/data/report-service'
 
@@ -126,6 +123,7 @@ export default defineComponent({
   components: {
     VButton,
     VIcon,
+    VLink,
     VRadio,
     VDmcaNotice,
     VReportDescForm,
diff --git a/src/components/VContentReport/VDmcaNotice.vue b/src/components/VContentReport/VDmcaNotice.vue
index 009bcf07e3..caf516c505 100644
--- a/src/components/VContentReport/VDmcaNotice.vue
+++ b/src/components/VContentReport/VDmcaNotice.vue
@@ -5,23 +5,17 @@
     tag="p"
   >
     <template #form>
-      <a
+      <VLink
         :aria-label="$t('media-details.content-report.form.dmca.form')"
         :href="DMCA_FORM_URL"
         class="text-pink hover:underline"
-        target="_blank"
-        rel="noopener"
-        >{{ $t('media-details.content-report.form.dmca.form') }}</a
+        >{{ $t('media-details.content-report.form.dmca.form') }}</VLink
       >
     </template>
     <template #source>
-      <a
-        :href="foreignLandingUrl"
-        class="text-pink hover:underline"
-        target="_blank"
-        rel="noopener noreferrer"
-        >{{ provider }}</a
-      >
+      <VLink :href="foreignLandingUrl" class="text-pink hover:underline">{{
+        provider
+      }}</VLink>
     </template>
   </i18n>
 </template>
@@ -30,9 +24,11 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 
 import { DMCA_FORM_URL } from '~/constants/content-report'
+import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
   name: 'VDmcaNotice',
+  components: { VLink },
   props: {
     /**
      * the foreign landing URL for the media item
diff --git a/src/components/VFilters/VLicenseExplanationTooltip.vue b/src/components/VFilters/VLicenseExplanationTooltip.vue
index e1f0b70868..2166f15014 100644
--- a/src/components/VFilters/VLicenseExplanationTooltip.vue
+++ b/src/components/VFilters/VLicenseExplanationTooltip.vue
@@ -16,9 +16,9 @@
       class="caption float-right m-2"
     >
       <template #link>
-        <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
+        <VLink :href="`${getLicenseDeedLink(license)}`">{{
           $t('filters.license-explanation.link')
-        }}</a>
+        }}</VLink>
       </template>
     </i18n>
     <i18n
@@ -28,9 +28,9 @@
       class="caption float-right m-2"
     >
       <template #link>
-        <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
+        <VLink :href="`${getLicenseDeedLink(license)}`">{{
           $t('filters.license-explanation.link')
-        }}</a>
+        }}</VLink>
       </template>
     </i18n>
   </div>
@@ -38,10 +38,12 @@
 
 <script>
 import { isLicense } from '~/utils/license'
+import VLink from '~/components/VLink.vue'
+import LicenseElements from '~/components/LicenseElements.vue'
 
 export default {
   name: 'VLicenseExplanationTooltip',
-
+  components: { VLink, LicenseElements },
   props: {
     license: {
       type: String,
diff --git a/src/components/VFourOhFour.vue b/src/components/VFourOhFour.vue
index 81958db4ec..9146fa7b54 100644
--- a/src/components/VFourOhFour.vue
+++ b/src/components/VFourOhFour.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="bg-yellow h-screen relative page-404 overflow-x-hidden">
-    <NuxtLink to="/" class="relative z-10 text-dark-charcoal">
+    <NuxtLink :to="localePath('/')" class="relative z-10 text-dark-charcoal">
       <span class="sr-only">{{ $t('404.link-title') }}</span>
       <span
         class="flex flex-row pt-6 lg:pt-8 ms-6 lg:ms-10 h-auto w-30 text-dark-charcoal"
@@ -25,7 +25,7 @@
           <template #link>
             <NuxtLink
               class="underline text-current hover:text-current active:text-current"
-              to="/"
+              :to="localePath('/')"
             >
               {{ $t('404.link-title') }}
             </NuxtLink>
diff --git a/src/components/VImageDetails/VImageDetails.vue b/src/components/VImageDetails/VImageDetails.vue
index eff78ccd92..3faacbc7f4 100644
--- a/src/components/VImageDetails/VImageDetails.vue
+++ b/src/components/VImageDetails/VImageDetails.vue
@@ -18,13 +18,9 @@
       <div>
         <dt>{{ $t('image-details.information.source') }}</dt>
         <dd>
-          <a
-            :href="image.foreign_landing_url"
-            target="blank"
-            rel="noopener noreferrer"
-            class="text-pink"
-            >{{ sourceName }}</a
-          >
+          <VLink :href="image.foreign_landing_url" class="text-pink">{{
+            sourceName
+          }}</VLink>
         </dd>
       </div>
       <div>
diff --git a/src/components/VLink.vue b/src/components/VLink.vue
new file mode 100644
index 0000000000..37345d8aa7
--- /dev/null
+++ b/src/components/VLink.vue
@@ -0,0 +1,15 @@
+<template>
+  <a target="_blank" rel="noopener noreferrer" v-on="$listeners"><slot /></a>
+</template>
+
+<script>
+/**
+ * This is a simple wrapper component for external links that ensures that the links
+ * are set to open in a new tab and not raise an error with the current iframe setup.
+ */
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  name: 'VLink',
+})
+</script>
diff --git a/src/components/VMediaInfo/VCopyLicense.vue b/src/components/VMediaInfo/VCopyLicense.vue
index 41183b62f2..eeb1c7dd6e 100644
--- a/src/components/VMediaInfo/VCopyLicense.vue
+++ b/src/components/VMediaInfo/VCopyLicense.vue
@@ -42,13 +42,11 @@
           tag="p"
         >
           <template #title>
-            <a
+            <VLink
               :href="media.foreign_landing_url"
-              target="_blank"
-              rel="noopener"
               @click="onSourceLinkClicked"
               @keyup.enter="onSourceLinkClicked"
-              >{{ media.title }}</a
+              >{{ media.title }}</VLink
             ></template
           >
           <template #creator>
@@ -58,14 +56,12 @@
               tag="span"
             >
               <template #creator-name>
-                <a
+                <VLink
                   v-if="media.creator_url"
                   :href="media.creator_url"
-                  target="_blank"
-                  rel="noopener"
                   @click="onCreatorLinkClicked"
                   @keyup.enter="onCreatorLinkClicked"
-                  >{{ media.creator }}</a
+                  >{{ media.creator }}</VLink
                 >
                 <span v-else>{{ media.creator }}</span>
               </template>
@@ -79,12 +75,9 @@
             }}
           </template>
           <template #license>
-            <a
-              class="uppercase"
-              :href="licenseUrl"
-              target="_blank"
-              rel="noopener"
-              >{{ fullLicenseName }}</a
+            <VLink class="uppercase" :href="licenseUrl">{{
+              fullLicenseName
+            }}</VLink
             >{{ period }}
           </template>
         </i18n>
@@ -156,7 +149,6 @@ import {
   ref,
   useContext,
 } from '@nuxtjs/composition-api'
-import CopyButton from '~/components/CopyButton.vue'
 import { COPY_ATTRIBUTION } from '~/constants/action-types'
 import { ATTRIBUTION, USAGE_DATA } from '~/constants/store-modules'
 import {
@@ -166,9 +158,12 @@ import {
 import getAttributionHtml from '~/utils/attribution-html'
 import { isPublicDomain } from '~/utils/license'
 
+import VLink from '~/components/VLink.vue'
+import CopyButton from '~/components/CopyButton.vue'
+
 const VCopyLicense = defineComponent({
   name: 'VCopyLicense',
-  components: { CopyButton },
+  components: { CopyButton, VLink },
   props: {
     media: {
       type: Object,
diff --git a/src/components/VMediaInfo/VMediaLicense.vue b/src/components/VMediaInfo/VMediaLicense.vue
index b353a593c4..1b80e5cca5 100644
--- a/src/components/VMediaInfo/VMediaLicense.vue
+++ b/src/components/VMediaInfo/VMediaLicense.vue
@@ -10,14 +10,9 @@
         class="block text-sm md:text-base"
       >
         <template #link>
-          <a
-            class="uppercase text-pink"
-            :href="licenseUrl"
-            target="_blank"
-            rel="noopener"
-          >
+          <VLink class="uppercase text-pink" :href="licenseUrl">
             {{ fullLicenseName }}
-          </a>
+          </VLink>
         </template>
       </i18n>
       <LicenseElements :license="license" class="md:py-4" />
@@ -28,13 +23,11 @@
         class="caption font-semibold"
       >
         <template #link>
-          <a
+          <VLink
             :aria-label="$t('media-details.aria.attribution.license')"
             :href="licenseUrl"
-            target="_blank"
-            rel="noopener"
             class="text-pink"
-            >{{ $t('media-details.reuse.license.link') }}</a
+            >{{ $t('media-details.reuse.license.link') }}</VLink
           >
         </template>
       </i18n>
@@ -47,13 +40,11 @@
         class="caption font-semibold"
       >
         <template #link>
-          <a
+          <VLink
             :aria-label="$t('media-details.aria.attribution.tool')"
             :href="licenseUrl"
-            target="_blank"
-            rel="noopener"
             class="text-pink"
-            >{{ $t('media-details.reuse.tool.link') }}</a
+            >{{ $t('media-details.reuse.tool.link') }}</VLink
           >
         </template>
       </i18n>
@@ -64,10 +55,11 @@
 <script>
 import { isLicense } from '~/utils/license'
 import LicenseElements from '~/components/LicenseElements.vue'
+import VLink from '~/components/VLink.vue'
 
 export default {
   name: 'MediaLicense',
-  components: { LicenseElements },
+  components: { LicenseElements, VLink },
   props: {
     fullLicenseName: String,
     license: String,
diff --git a/src/components/VMetaSearch/VMetaSourceList.vue b/src/components/VMetaSearch/VMetaSourceList.vue
index b0d669e13a..6aee9e516c 100644
--- a/src/components/VMetaSearch/VMetaSourceList.vue
+++ b/src/components/VMetaSearch/VMetaSourceList.vue
@@ -2,17 +2,12 @@
   <div class="mb-10">
     <ul class="buttons is-centered mt-6">
       <li v-for="source in sources" :key="source">
-        <a
-          target="_blank"
-          rel="nofollow noreferrer"
-          :href="getSourceUrl(source)"
-          class="button small me-2 is-opaque"
-        >
+        <VLink :href="getSourceUrl(source)" class="button small me-2 is-opaque">
           {{ source }}
           <sup class="top-0">
             <i class="ms-2 icon external-link" />
           </sup>
-        </a>
+        </VLink>
       </li>
     </ul>
   </div>
@@ -22,9 +17,11 @@
 import getLegacySourceUrl, {
   legacySourceMap,
 } from '~/utils/get-legacy-source-url'
+import VLink from '~/components/VLink.vue'
 
 export default {
   name: 'MetaSourceList',
+  components: { VLink },
   props: {
     type: { type: String },
     query: { type: Object },
diff --git a/src/components/VTranslationStatusBanner.vue b/src/components/VTranslationStatusBanner.vue
index 257ed007fc..ce35576411 100644
--- a/src/components/VTranslationStatusBanner.vue
+++ b/src/components/VTranslationStatusBanner.vue
@@ -6,9 +6,9 @@
     }}
     <i18n path="notification.translation.text">
       <template #link>
-        <a :href="translationLink" target="_blank" class="underline">{{
+        <VLink :href="translationLink" class="underline">{{
           $t('notification.translation.link')
-        }}</a>
+        }}</VLink>
       </template>
       <template #locale>
         {{ bannerLocale.name }}
@@ -18,11 +18,13 @@
 </template>
 <script>
 import useI18nSync from '~/composables/use-i18n-sync'
+import VLink from '~/components/VLink.vue'
 import VNotificationBanner from '~/components/VNotificationBanner.vue'
 
 export default {
   name: 'VTranslationStatusBanner',
   components: {
+    VLink,
     VNotificationBanner,
   },
   setup() {
diff --git a/src/pages/about.vue b/src/pages/about.vue
index c7d2b6c611..726ec33ea0 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -10,10 +10,10 @@
 
           <i18n path="about.collection.content" tag="p">
             <template #common-crawl>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.common-crawl')"
                 href="http://commoncrawl.org/"
-                >{{ $t('about.collection.common-crawl') }}</a
+                >{{ $t('about.collection.common-crawl') }}</VLink
               >
             </template>
           </i18n>
@@ -27,65 +27,65 @@
               >
             </template>
             <template #search>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.search')"
                 href="https://github.com/wordpress/openverse-frontend/"
-                >{{ $t('about.planning.search') }}</a
+                >{{ $t('about.planning.search') }}</VLink
               >
             </template>
             <template #api>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.api')"
                 href="https://github.com/wordpress/openverse-api/"
-                >{{ $t('about.planning.api') }}</a
+                >{{ $t('about.planning.api') }}</VLink
               >
             </template>
             <template #catalog>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.catalog')"
                 href="https://github.com/wordpress/openverse-catalog/"
-                >{{ $t('about.planning.catalog') }}</a
+                >{{ $t('about.planning.catalog') }}</VLink
               >
             </template>
             <template #community>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.community')"
                 href="https://make.wordpress.org/openverse/"
-                >{{ $t('about.planning.community') }}</a
+                >{{ $t('about.planning.community') }}</VLink
               >
             </template>
             <template #working>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.projects')"
                 href="https://github.com/orgs/WordPress/projects/3"
-                >{{ $t('about.planning.working') }}</a
+                >{{ $t('about.planning.working') }}</VLink
               >
             </template>
           </i18n>
 
           <i18n path="about.transfer.content" tag="p">
             <template #creative-commons>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.creative-commons')"
                 href="https://creativecommons.org/2021/05/03/cc-search-to-join-wordpress/"
-                >{{ $t('about.transfer.creative-commons') }}</a
+                >{{ $t('about.transfer.creative-commons') }}</VLink
               >
             </template>
             <template #wordpress>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.wordpress')"
                 href="https://ma.tt/2021/04/cc-search-to-join-wordpress-org/"
-                >{{ $t('about.transfer.wordpress') }}</a
+                >{{ $t('about.transfer.wordpress') }}</VLink
               >
             </template>
           </i18n>
 
           <i18n path="about.declaration.content" tag="p">
             <template #terms>
-              <a
+              <VLink
                 :aria-label="$t('about.aria.terms')"
                 href="https://creativecommons.org/terms/"
-                >{{ $t('about.declaration.terms') }}</a
+                >{{ $t('about.declaration.terms') }}</VLink
               >
             </template>
           </i18n>
@@ -96,14 +96,18 @@
 </template>
 
 <script>
-const AboutPage = {
-  name: 'about-page',
+import VLink from '~/components/VLink.vue'
+import { defineComponent } from '@nuxtjs/composition-api'
+
+const AboutPage = defineComponent({
+  name: 'AboutPage',
+  components: { VLink },
   head() {
     return {
       title: `${this.$t('about.title')} | ${this.$t('hero.brand')}`,
     }
   },
-}
+})
 
 export default AboutPage
 </script>
diff --git a/src/pages/feedback.vue b/src/pages/feedback.vue
index 0a514552e9..257c9d16cf 100644
--- a/src/pages/feedback.vue
+++ b/src/pages/feedback.vue
@@ -7,16 +7,13 @@
         </h1>
         <i18n path="feedback.description.content" tag="p" class="mb-6">
           <template #openverse>
-            <a
-              href="https://wordpress.slack.com/messages/openverse/"
-              target="_blank"
-            >
-              {{ $t('feedback.description.openverse') }}</a
+            <VLink href="https://wordpress.slack.com/messages/openverse/">
+              {{ $t('feedback.description.openverse') }}</VLink
             >
           </template>
           <template #making-wordpress>
-            <a href="https://make.wordpress.org/chat/" target="_blank">
-              {{ $t('feedback.description.making-wordpress') }}</a
+            <VLink href="https://make.wordpress.org/chat/">
+              {{ $t('feedback.description.making-wordpress') }}</VLink
             >
           </template>
         </i18n>
@@ -61,8 +58,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import { BUG_REPORT } from '~/constants/store-modules'
+import VLink from '~/components/VLink.vue'
 
 const bugForm =
   'https://docs.google.com/forms/d/e/1FAIpQLSenCn-3HoZlCz4vlL2621wjezfu1sPZDaWGe_FtQ1R5-5qR4Q/viewform'
@@ -71,6 +67,7 @@ const suggestionForm =
 
 export const FeedbackPage = {
   name: 'feedback-page',
+  components: { VLink },
   data() {
     return {
       activeTab: 0,
@@ -97,19 +94,10 @@ export const FeedbackPage = {
       this.activeTab = tabIdx
     },
   },
-  computed: {
-    ...mapState(BUG_REPORT, [
-      'isReportingBug',
-      'bugReported',
-      'bugReportFailed',
-    ]),
-  },
 }
 
 export default FeedbackPage
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 .form-iframe {
   width: 100%;
diff --git a/src/pages/image/_id.vue b/src/pages/image/_id.vue
index c17828f565..ea9d313217 100644
--- a/src/pages/image/_id.vue
+++ b/src/pages/image/_id.vue
@@ -50,7 +50,7 @@
           class="font-semibold leading-[130%]"
         >
           <template #name>
-            <a
+            <VLink
               v-if="image.creator_url"
               :aria-label="
                 $t('media-details.aria.creator-url', {
@@ -58,11 +58,9 @@
                 })
               "
               :href="image.creator_url"
-              target="blank"
-              rel="noopener noreferrer"
               @click="onCreatorLinkClicked"
               @keyup.enter="onCreatorLinkClicked"
-              >{{ image.creator }}</a
+              >{{ image.creator }}</VLink
             >
             <span v-else>{{ image.creator }}</span>
           </template>
@@ -93,16 +91,17 @@ import {
 
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
+import VLink from '~/components/VLink.vue'
 import VImageDetails from '~/components/VImageDetails/VImageDetails.vue'
 import VMediaReuse from '~/components/VMediaInfo/VMediaReuse.vue'
 import VRelatedImages from '~/components/VImageDetails/VRelatedImages.vue'
 import SketchFabViewer from '~/components/SketchFabViewer.vue'
-
 const VImageDetailsPage = {
   name: 'VImageDetailsPage',
   components: {
     VButton,
     VIcon,
+    VLink,
     VImageDetails,
     VMediaReuse,
     VRelatedImages,
diff --git a/src/pages/index.vue b/src/pages/index.vue
index a5f7b05229..f3400810f8 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -14,7 +14,7 @@
 
       <div class="px-6 lg:ps-30 lg:pe-0 xl:px-40 mx-auto w-full lg:w-auto">
         <NuxtLink
-          to="/"
+          :to="localePath('/')"
           class="relative z-10 hidden lg:block -left-[6.25rem] rtl:-right-[6.25rem]"
         >
           <h1>
@@ -66,12 +66,10 @@
           class="hidden lg:block text-sr mt-4"
         >
           <template #license>
-            <a
+            <VLink
               href="https://creativecommons.org/licenses/"
-              target="blank"
-              rel="noopener noreferrer"
               class="text-dark-charcoal hover:text-dark-charcoal underline"
-              >{{ $t('hero.disclaimer.license') }}</a
+              >{{ $t('hero.disclaimer.license') }}</VLink
             >
           </template>
         </i18n>
@@ -118,12 +116,10 @@
       class="lg:hidden text-sr p-6 mt-auto"
     >
       <template #license>
-        <a
+        <VLink
           href="https://creativecommons.org/licenses/"
-          target="blank"
-          rel="noopener noreferrer"
           class="text-dark-charcoal hover:text-dark-charcoal underline"
-          >{{ $t('hero.disclaimer.license') }}</a
+          >{{ $t('hero.disclaimer.license') }}</VLink
         >
       </template>
     </i18n>
@@ -147,6 +143,7 @@ import VContentSwitcherPopover from '~/components/VContentSwitcher/VContentSwitc
 import VContentTypeButton from '~/components/VContentSwitcher/VContentTypeButton.vue'
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+import VLink from '~/components/VLink.vue'
 
 const HomePage = {
   name: 'home-page',
@@ -157,6 +154,7 @@ const HomePage = {
     VContentSwitcherPopover,
     VContentTypeButton,
     VSearchBar,
+    VLink,
     VLogoButton,
   },
   head: {
diff --git a/src/pages/meta-search.vue b/src/pages/meta-search.vue
index d69bab5a45..ec1933c917 100644
--- a/src/pages/meta-search.vue
+++ b/src/pages/meta-search.vue
@@ -9,9 +9,11 @@
 
       <i18n path="meta-search-page.intro" tag="p" class="mb-4">
         <template #link>
-          <a aria-label="sources" href="/sources">{{
-            $t('meta-search-page.link')
-          }}</a>
+          <NuxtLink
+            :aria-label="$t('meta-search-page.sources')"
+            :to="localePath('/sources')"
+            >{{ $t('meta-search-page.link') }}</NuxtLink
+          >
         </template>
       </i18n>
       <p>{{ $t('meta-search-page.license') }}</p>
@@ -83,16 +85,16 @@
       </h2>
       <i18n path="meta-search-page.new.content" tag="p" class="mb-2">
         <template #issue>
-          <a
+          <VLink
             aria-label="issue"
-            href="https://github.com/creativecommons/cccatalog/issues/new?assignees=&labels=awaiting+triage%2C+ticket+work+required%2C+providers&template=new-source-suggestion.md&title=%5BSource+Suggestion%5D+Insert+source+name+here"
-            >{{ $t('meta-search-page.new.issue') }}</a
+            href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C%F0%9F%A7%B9+status%3A+ticket+work+required%2C%E2%98%81%EF%B8%8F+provider%3A+any&template=new_source_suggestion.yml&title=%3CSource+name+here%3E"
+            >{{ $t('meta-search-page.new.issue') }}</VLink
           >
         </template>
         <template #email>
-          <a aria-label="email" href="mailto:openverse@wordpress.org">{{
+          <VLink aria-label="email" href="mailto:openverse@wordpress.org">{{
             $t('meta-search-page.new.email')
-          }}</a>
+          }}</VLink>
         </template>
       </i18n>
       <h2 class="mt-10 mb-4 text-2xl">
@@ -116,14 +118,18 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from '@nuxtjs/composition-api'
+import VLink from '~/components/VLink.vue'
+
+export default defineComponent({
   name: 'MetaSearchPage',
+  components: { VLink },
   head() {
     return {
       title: `${this.$t('meta-search-page.title')} | ${this.$t('hero.brand')}`,
     }
   },
-}
+})
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index 6351674b5e..a19149272a 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -15,12 +15,12 @@
         <i18n path="search-guide.exact.content" tag="p">
           <template #link>
             <!-- eslint-disable -->
-            <a
+            <VLink
               :aria-label="$t('search-guide.exact.aria-label')"
               href='https://search.creativecommons.org/search?q="Claude%20Monet"'
             >
               <em>{{ $t('search-guide.exact.claude-monet') }}</em>
-            </a>
+            </VLink>
             <!-- eslint-enable -->
           </template>
         </i18n>
@@ -105,12 +105,12 @@
 
         <i18n path="search-guide.example.and.description" tag="p" class="my-4">
           <template #link>
-            <a
+            <VLink
               :aria-label="$t('search-guide.example.and.aria-label')"
               href="https://search.creativecommons.org/search?q=dog%2Bcat"
             >
               <em>{{ $t('search-guide.example.and.example') }}</em>
-            </a>
+            </VLink>
           </template>
           <template #br>
             <br />
@@ -119,12 +119,12 @@
 
         <i18n path="search-guide.example.or" tag="p" class="my-4">
           <template #link>
-            <a
+            <VLink
               :aria-label="$t('search-guide.example.or.aria-label')"
               href="https://search.creativecommons.org/search?q=dog%7Ccat"
             >
               <em>{{ $t('search-guide.example.or.example') }}</em>
-            </a>
+            </VLink>
           </template>
           <template #br>
             <br />
@@ -148,12 +148,12 @@
 
         <i18n path="search-guide.example.negate.content" tag="p" class="mb-4">
           <template #link>
-            <a
+            <VLink
               :aria-label="$t('search-guide.example.negate.aria-label')"
               href="https://search.creativecommons.org/search?q=dog%20-pug"
             >
               <em>{{ $t('search-guide.example.negate.example') }}</em>
-            </a>
+            </VLink>
           </template>
           <template #br>
             <br />
@@ -174,12 +174,12 @@
 
         <i18n path="search-guide.example.prefix.content" tag="p" class="mb-4">
           <template #link>
-            <a
+            <VLink
               :aria-label="$t('search-guide.example.prefix.aria-label')"
               href="https://search.creativecommons.org/search?q=net%2a"
             >
               <em>{{ $t('search-guide.example.prefix.example') }}</em>
-            </a>
+            </VLink>
           </template>
           <template #br>
             <br />
@@ -202,12 +202,12 @@
           class="mb-4"
         >
           <template #link>
-            <a
+            <VLink
               :aria-label="$t('search-guide.example.precedence.aria-label')"
               href="https://search.creativecommons.org/search?q=dogs%20%2B%20%28corgis%20%7C%20labrador%29"
             >
               <em>{{ $t('search-guide.example.precedence.example') }}</em>
-            </a>
+            </VLink>
           </template>
           <template #br>
             <br />
@@ -223,9 +223,9 @@
             <em aria-label="tilde N">~N</em>
           </template>
           <template #link>
-            <a href="http://en.wikipedia.org/wiki/Levenshtein_distance">
+            <VLink href="http://en.wikipedia.org/wiki/Levenshtein_distance">
               {{ $t('search-guide.example.fuzziness.link-text') }}
-            </a>
+            </VLink>
           </template>
         </i18n>
 
@@ -235,12 +235,12 @@
           class="mb-4"
         >
           <template #link>
-            <a
+            <VLink
               :aria-label="$t('search-guide.example.fuzziness.aria-label')"
               href="https://search.creativecommons.org/search?q=theatre~1"
             >
               <em>{{ $t('search-guide.example.fuzziness.example') }}</em>
-            </a>
+            </VLink>
           </template>
           <template #br>
             <br />
@@ -253,8 +253,11 @@
 </template>
 
 <script>
+import VLink from '~/components/VLink.vue'
+
 const SearchHelpPage = {
   name: 'search-help-page',
+  components: { VLink },
   methods: {
     providerSearchLink(providerCode) {
       return `https://search.creativecommons.org/search?q=provider%3A%20"${providerCode}"`
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index afe955e344..15cdd05498 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -14,27 +14,29 @@
           </p>
           <i18n path="sources.cc-content.provider" tag="p" class="my-4">
             <template #flickr>
-              <a aria-label="flickr" href="https://www.flickr.com/">{{
+              <VLink aria-label="flickr" href="https://www.flickr.com/">{{
                 $t('sources.cc-content.flickr')
-              }}</a>
+              }}</VLink>
             </template>
             <template #smithsonian>
-              <a aria-label="smithsonian" href="https://www.si.edu/">{{
+              <VLink aria-label="smithsonian" href="https://www.si.edu/">{{
                 $t('sources.cc-content.smithsonian')
-              }}</a>
+              }}</VLink>
             </template>
           </i18n>
           <i18n path="sources.cc-content.europeana" tag="p" class="my-4">
             <template #link>
-              <a aria-label="europeana" href="https://www.europeana.eu/en">{{
-                $t('sources.cc-content.europeana-link')
-              }}</a>
+              <VLink
+                aria-label="europeana"
+                href="https://www.europeana.eu/en"
+                >{{ $t('sources.cc-content.europeana-link') }}</VLink
+              >
             </template>
             <template #link-api>
-              <a
+              <VLink
                 aria-label="europeana-api"
                 href="https://pro.europeana.eu/page/apis"
-                >{{ $t('sources.cc-content.europeana-api') }}</a
+                >{{ $t('sources.cc-content.europeana-api') }}</VLink
               >
             </template>
           </i18n>
@@ -64,15 +66,13 @@
         <h3 class="text-2xl my-4">
           {{ $t('sources.suggestions') }}
         </h3>
-        <a
+        <VLink
           href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C+%F0%9F%A7%B9+status%3A+ticket+work+required%2C+%E2%98%81%EF%B8%8F+provider%3A+any&template=new-source-suggestion.md&title=%5BSource+Suggestion%5D+Insert+source+name+here"
           class="button is-primary py-8"
-          target="_blank"
-          rel="noopener noreferrer"
         >
           {{ $t('sources.issue-button') }}
           <i class="icon external-link mx-2 mt-2" />
-        </a>
+        </VLink>
       </div>
       <i18n path="sources.detail" tag="p">
         <template #single-name>
@@ -123,14 +123,14 @@
         <tbody>
           <tr v-for="(imageProvider, index) in sortedProviders" :key="index">
             <td class="font-semibold">
-              <a :href="`/search?source=${imageProvider.source_name}`">
+              <VLink :href="`/search?source=${imageProvider.source_name}`">
                 {{ imageProvider.display_name }}
-              </a>
+              </VLink>
             </td>
             <td class="font-semibold">
-              <a :href="imageProvider.source_url">
+              <VLink :href="imageProvider.source_url">
                 {{ imageProvider.source_url }}
-              </a>
+              </VLink>
             </td>
             <td class="number-cell font-semibold">
               {{ getLocaleFormattedNumber(imageProvider.media_count || 0) }}
@@ -147,9 +147,11 @@ import sortBy from 'lodash.sortby'
 import { mapState } from 'vuex'
 import { PROVIDER } from '~/constants/store-modules'
 import { useGetLocaleFormattedNumber } from '~/composables/use-get-locale-formatted-number'
+import VLink from '~/components/VLink.vue'
 
 const SourcePage = {
   name: 'source-page',
+  components: { VLink },
   data() {
     return {
       sort: {
diff --git a/src/utils/attribution-html.js b/src/utils/attribution-html.js
index bcd0290dfc..d00cd12f86 100644
--- a/src/utils/attribution-html.js
+++ b/src/utils/attribution-html.js
@@ -1,20 +1,21 @@
+const linkProperties = 'target="_blank" rel="noopener noreferrer"'
 function getAttributionHtml(media, licenseUrl, fullLicenseName) {
   if (!media) {
     return ''
   }
   const baseAssetsPath = 'https://search.creativecommons.org/static/img'
-  const imgLink = `<a href="${media.foreign_landing_url}">"${media.title}"</a>`
+  const imgLink = `<a href="${media.foreign_landing_url}" ${linkProperties}>"${media.title}"</a>`
   let creator = ''
   let mediaTag = ''
   if (media.url && media.title) {
     mediaTag = `<img style="display: block;" src="${media.url}" alt="${media.title}">`
   }
   if (media.creator && media.creator_url) {
-    creator = `<span> by <a href="${media.creator_url}">${media.creator}</a></span>`
+    creator = `<span> by <a href="${media.creator_url}" ${linkProperties}>${media.creator}</a></span>`
   } else if (media.creator && !media.creator_url) {
     creator = `<span> by <span>${media.creator}</span></span>`
   }
-  const licenseLink = ` is licensed under <a href="${licenseUrl}" style="margin-right: 5px;">${fullLicenseName.toUpperCase()}</a>`
+  const licenseLink = ` is licensed under <a href="${licenseUrl}" style="margin-right: 5px;" ${linkProperties}>${fullLicenseName.toUpperCase()}</a>`
 
   let licenseIcons = `<img style="height: inherit;margin-right: 3px;display: inline-block;" src="${baseAssetsPath}/cc_icon.svg?media_id=${media.id}" />`
   if (media.license) {
@@ -27,7 +28,7 @@ function getAttributionHtml(media, licenseUrl, fullLicenseName) {
       .join('')
   }
 
-  const licenseImgLink = `<a href="${licenseUrl}" target="_blank" rel="noopener noreferrer" style="display: inline-block;white-space: none;margin-top: 2px;margin-left: 3px;height: 22px !important;">${licenseIcons}</a>`
+  const licenseImgLink = `<a href="${licenseUrl}" ${linkProperties} style="display: inline-block;white-space: none;margin-top: 2px;margin-left: 3px;height: 22px !important;">${licenseIcons}</a>`
   return `<p style="font-size: 0.9rem;font-style: italic;">${mediaTag}${imgLink}${creator}${licenseLink}${licenseImgLink}</p>`
 }
 
diff --git a/test/unit/specs/components/ImageDetails/reuse-survey.spec.js b/test/unit/specs/components/ImageDetails/reuse-survey.spec.js
index 7efb11b197..17d1cf2063 100644
--- a/test/unit/specs/components/ImageDetails/reuse-survey.spec.js
+++ b/test/unit/specs/components/ImageDetails/reuse-survey.spec.js
@@ -6,6 +6,7 @@ import {
 import render from '../../../test-utils/render'
 import i18n from '../../../test-utils/i18n'
 import { USAGE_DATA } from '~/constants/store-modules'
+import { mount } from '@vue/test-utils'
 
 describe('ImageAttribution', () => {
   let options = null
@@ -31,7 +32,7 @@ describe('ImageAttribution', () => {
   })
 
   it('should dispatch REUSE_SURVEY on reuse link clicked', () => {
-    const wrapper = render(ReuseSurvey, options)
+    const wrapper = render(ReuseSurvey, options, mount)
     wrapper.find('a').trigger('click')
     expect(dispatchMock).toHaveBeenCalledWith(
       `${USAGE_DATA}/${SEND_DETAIL_PAGE_EVENT}`,